@import url("fsont.css");
@property --hue {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}
html {
  font-size: max(1.2vmin, 10px);
}

body, ul, h1, h2, h3, p {
    margin: -1px 0px -1px -1px;
}

main {
  width: 100%;
  height: 100%;
  font-family: "Lemon", "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
}

.crt-monitor {
  --scale: 0.3rem;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(to bottom, black calc(0 * var(--scale)), black calc(0.2 * var(--scale)), transparent calc(0.2 * var(--scale)), transparent calc(2.8 * var(--scale)), transparent calc(3.0 * var(--scale))), repeating-linear-gradient(to right, #f11 calc(0 * var(--scale)), #f11 calc(0.8 * var(--scale)), #000 calc(0.8 * var(--scale)), #000 calc(1 * var(--scale)), #1f1 calc(1 * var(--scale)), #1f1 calc(1.8 * var(--scale)), #000 calc(1.8 * var(--scale)), #000 calc(2 * var(--scale)), #11f calc(2 * var(--scale)), #11f calc(2.8 * var(--scale)), #000 calc(2.8 * var(--scale)), #000 calc(3.4 * var(--scale)));
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  filter: saturate(0.75) blur(1px);
}
.crt-monitor .content {
  width: calc(100% + 4px);
  margin-left: -2px;
  height: 100%;
  background-color: #1f1f1f;
  font-size: 7rem;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  mix-blend-mode: multiply;
  -webkit-animation: hue-shift 3s infinite linear, shake 0.03s infinite alternate forwards;
          animation: hue-shift 3s infinite linear, shake 0.03s infinite alternate forwards;
}
.crt-monitor .content p {
  --s: 80%;
  --l: 60%;
  background-color: #98ce00;
  background-image: linear-gradient(-30deg, hsl(var(--hue), var(--s), 100%), hsl(var(--hue), var(--s), var(--l)), hsl(calc(var(--hue) + 30deg), var(--s), var(--l)), hsl(calc(var(--hue) + 60deg), var(--s), var(--l)), hsl(calc(var(--hue) + 90deg), var(--s), var(--l)), hsl(calc(var(--hue) + 120deg), var(--s), var(--l)), hsl(calc(var(--hue) + 150deg), var(--s), var(--l)), hsl(calc(var(--hue) + 180deg), var(--s), var(--l)), hsl(calc(var(--hue) + 210deg), var(--s), var(--l)), hsl(calc(var(--hue) + 240deg), var(--s), var(--l)), hsl(calc(var(--hue) + 270deg), var(--s), var(--l)), hsl(calc(var(--hue) + 300deg), var(--s), var(--l)), hsl(calc(var(--hue) + 330deg), var(--s), var(--l)), hsl(calc(var(--hue) + 360deg), var(--s), var(--l)), hsl(calc(var(--hue) + 360deg), var(--s), 100%));
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
  filter: blur(3px) brightness(1.5);
}
.crt-monitor .content p::first-line {
  font-size: 3em;
}
.crt-monitor .scan {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.crt-monitor .scan::before, .crt-monitor .scan::after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 30%;
  top: 0;
  transform: translateY(-100%) skewY(-5deg);
  transform-origin: bottom left;
  background-color: #000;
  opacity: 0;
  -webkit-animation: scan 3s infinite linear forwards;
          animation: scan 3s infinite linear forwards;
}
.crt-monitor .scan::after {
  height: 25%;
  -webkit-animation-delay: -1.5s;
          animation-delay: -1.5s;
  opacity: 0;
}

@-webkit-keyframes hue-shift {
  to {
    --hue: 1turn;
  }
}

@keyframes hue-shift {
  to {
    --hue: 1turn;
  }
}
@-webkit-keyframes shake {
  to {
    transform: translateX(1px);
  }
}
@keyframes shake {
  to {
    transform: translateX(1px);
  }
}
@-webkit-keyframes scan {
  to {
    transform: translateY(120%) skewY(-5deg);
    top: 100%;
  }
}
@keyframes scan {
  to {
    transform: translateY(120%) skewY(-5deg);
    top: 100%;
  }
}