@font-face {
    font-family: '3270';
    src: url(files/3270.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

body
{
    font-family: '3270', monospace;
    margin: 0;
    padding: 0;
    background-color:black;
    color: white;
}

.splitter
{
    border: 5px ridge blue;
    margin: 20px 20% 0 20%;

}

.header2
{
width: fit-content;
margin: 10px auto;
padding: 25px;
text-align: center;
}

.logo
{
    width: 256px;
}

.article
{
    margin: 20px 20% 0 20%;
}

.article-header
{
    border: 3px solid;
    padding: 5px;
    width: fit-content;
    top: 18px;
    z-index: 1;
    left: -10px;
}

a
{
    color:deepskyblue;
}

.bg-grey {
    background-image: linear-gradient(to right, #555, #888);
    border: 2px solid;
    border-top-color: #aaa;
    border-left-color: #aaa;
    border-bottom-color: #444;
    border-right-color: #444;
    position: relative;
  }

.article-content
{
    padding: 5px;
    width: 100%;
}

.gradient-border {
  --border-width: 10px;

  position: relative;
  width: 500px;
  color: white;
  background: #222;
  border-radius: 10px;
  padding: 10px 0 5px 0;

  &::after {
    position: absolute;
    content: "";
    top: calc(-1 * var(--border-width));
    left: calc(-1 * var(--border-width));
    z-index: -1;
    width: calc(100% + var(--border-width) * 2);
    height: calc(100% + var(--border-width) * 2);
    background: linear-gradient(
      60deg,
      hsl(195, 85%, 50%), 
      hsl(210, 90%, 55%),  
      hsl(225, 95%, 50%), 
      hsl(240, 100%, 45%), 
      hsl(255, 95%, 40%),  
      hsl(270, 90%, 45%), 
      hsl(285, 85%, 40%), 
      hsl(300, 80%, 45%)   
    );
    background-size: 300% 300%;
    background-position: 0 50%;
    border-radius: 10px;
    animation: moveGradient 4s alternate infinite;
  }
}

@keyframes moveGradient {
  50% {
    background-position: 100% 50%;
  }
}