@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  @font-face {
    font-family: "IBM";
    font-style: normal;
    src: url(/fonts/IBM_VGA.woff) format("woff");
  }
}

img {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.xterm-viewport {
  overflow-y: hidden !important;
}

body {
  cursor: url("/cursors/arrow.png"), auto;
}

body a,
body button,
body input,
body [role="button"],
body .pointer-cursor {
  cursor: url('/cursors/hand.png'), pointer;
}

.cursor-resize {
  cursor: url('/cursors/resize-nwse.png'), pointer;
}

/*
thanks to https://aleclownes.com/2017/02/01/crt-display.html for the CRT effect
*/
@keyframes scan {
  0% {
    background-position: 0 -100vh;
  }
  100% {
    background-position: 0 100vh;
  }
}
@keyframes flicker {
  0% {
    opacity: 0.27861;
  }
  5% {
    opacity: 0.34769;
  }
  10% {
    opacity: 0.23604;
  }
  15% {
    opacity: 0.90626;
  }
  20% {
    opacity: 0.18128;
  }
  25% {
    opacity: 0.83891;
  }
  30% {
    opacity: 0.65583;
  }
  35% {
    opacity: 0.67807;
  }
  40% {
    opacity: 0.26559;
  }
  45% {
    opacity: 0.84693;
  }
  50% {
    opacity: 0.96019;
  }
  55% {
    opacity: 0.08594;
  }
  60% {
    opacity: 0.20313;
  }
  65% {
    opacity: 0.71988;
  }
  70% {
    opacity: 0.53455;
  }
  75% {
    opacity: 0.37288;
  }
  80% {
    opacity: 0.71428;
  }
  85% {
    opacity: 0.70419;
  }
  90% {
    opacity: 0.7003;
  }
  95% {
    opacity: 0.36108;
  }
  100% {
    opacity: 0.24387;
  }
}
@keyframes textShadow {
  0% {
    text-shadow: 0.4389924193300864px 0 1px rgba(0, 30, 255, 0.2),
      -0.4389924193300864px 0 1px rgba(255, 0, 80, 0.2), 0 0 1px;
  }
  25% {
    text-shadow: 2.7928974010788217px 0 1px rgba(0, 30, 255, 0.3),
      -2.7928974010788217px 0 1px rgba(255, 0, 80, 0.2), 0 0 2px;
  }
  50% {
    text-shadow: 2.7928974010788217px 0 1px rgba(0, 30, 255, 0.1),
      -2.7928974010788217px 0 1px rgba(255, 0, 80, 0.2), 0 0 1px;
  }
  75% {
    text-shadow: 2.7928974010788217px 0 1px rgba(0, 30, 255, 0.2),
      -2.7928974010788217px 0 1px rgba(255, 0, 80, 0.2), 0 0 2px;
  }
  100% {
    text-shadow: 2.6208764473832513px 0 1px rgba(0, 30, 255, 0.1),
      -2.6208764473832513px 0 1px rgba(255, 0, 80, 0.3), 0 0 1px;
  }
}
.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 10s 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: 9999;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

.scan-lines:before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: linear-gradient(
    to bottom,
    rgba(220, 255, 220, 0.04),
    rgba(220, 255, 220, 0.08)
  );
  pointer-events: none;
  animation: scan 9.5s linear infinite;
}

.crt {
  animation: textShadow 6s infinite;
}
