@font-face {
   font-family: 'deltarune';
   src: url('fonts/undertale-deltarune-text-font-extended.otf.woff2');
}
@font-face {
   font-family: 'dr-title';
   src: url('fonts/deltarune.ttf');
}
body {
  background-image: url("https://64.media.tumblr.com/92118d1cc8eaf2055ca1e833deae0754/f0d6414b7414f996-4f/s250x400/047aee6372bed685f56641580261e4b265cdb28a.pnj");
  background-position: top right;
  background-size: 100px;
  font-family: 'deltarune';
}
a {
  color: black;
  text-decoration: none;
}
.layout {
  width: 100%;
  display: grid;
  grid:
    "header header header" auto
    "leftSide body body" 1fr
    "footer footer footer" auto
    / auto 1fr auto;
  gap: 8px;
}

.header { 
  grid-area: header;
  text-align: center;
}
.leftSide { 
  grid-area: leftSide;
  background-color: red;
  box-shadow: 30px 24px 16px 0px #FFFFFF;
  text-align: center;
  padding: 20px;
}
.body {
  grid-area: body;
  background-color: red;
  box-shadow: 30px 24px 16px 0px #FFFFFF;
  text-align: center;
  padding: 20px;
}
.footer {
  grid-area: footer;
  text-align: center;
}
@keyframes textShadow {
  0% {
    text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  5% {
    text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  10% {
    text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  15% {
    text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  20% {
    text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  25% {
    text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  30% {
    text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  35% {
    text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  40% {
    text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  45% {
    text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  50% {
    text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  55% {
    text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  60% {
    text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  65% {
    text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  70% {
    text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  75% {
    text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  80% {
    text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  85% {
    text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  90% {
    text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  95% {
    text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  100% {
    text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
}
.crt::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}
.crt::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}
.crt {
  animation: textShadow 1.6s infinite;
}
.broider {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAAXNSR0IArs4c6QAAAWhJREFUWEfVmLESxCAIRGN5//+xV+bmClNgdt6q0QnpMiKsCAtYjsnv/B7nX0X5HOVOFa275m+Vu5v/cgSE1l1bF1Cl0DUU5Ub3VeBxfz6g8ST1X8WekldX2asnyjcxWl2eDigBVrHpejY6RtlDj74O6NNZq7JXeZrsy6yfpZdlQIl4iWdpf8xi1xFX6JEB8oxKhqh3G1D3QKvkpmv9KmDNjbhZuAuQ5N80QGcry6inKQlr8l340gClLqg5mejkez3r8nK131QmxX+9BE3Ah4FSP7oaKLWX2D3tunobKAnu9mhsL2WMztbm3hilBrqkoac0QOmKdq1TDryme0oDlG7uNR59DKhb8nrneXpByTsz0Vw92mBTkqjh0X7NGzUQDzSqRwJ1+1KSizWagFLplDHqbuweJeDpnN4B7DaPYhTpBSYD6t7yASWeJL57mjXsrFe0QSHQOxG4DpouoW5W041gjJMAre8C+gNPC6QOk+4OJAAAAABJRU5ErkJggg==") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;
}
.text:hover {
  --color1: #FF0000;
  --color2: #FFFF00;
  background: repeating-linear-gradient(
  45deg,
  var(--color1),
  var(--color1) 30px,
  var(--color2) 30px,
  var(--color2) 60px
  );
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  animation: 40s linear 0s infinite move;
  -webkit-text-stroke: 1px white;
}

@keyframes move {
from {
background-position: 0px;
}
to {
background-position: 1000px;
}
}