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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

html {
  padding: 10px;
  filter: grayscale(0%) saturate(120%) sepia(30%);
  font-family: monospace;
  font-size: x-large;
}

html,
body {
  height: 100%;
  overscroll-behavior: none;
}

body {
  /*background-color: #160700;*/
  background-color: black;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  border: 1px solid white;
  border-radius: 1px;
}

html[data-turbo-visit-direction="forward"]::view-transition-old(
    sidebar
  ):only-child {
  animation: slide-to-right 0.1s ease-out;
}

.crt {
  font-family: "Courier New", monospace;
  background: linear-gradient(to top, #000000, #000000, #333333, #333333);
  background-size: 100% 2px;
  text-shadow: 0 0 5px #ffffff;
  filter: grayscale(0) saturate(82%) sepia(50%) contrast(1.1) blur(0.3px);
}

@media screen {
  .crt {
    animation: scanlines infinite 55s linear,
      front-flicker 4s infinite alternate-reverse;
  }
}
@keyframes scanlines {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 -10px;
  }
}
@keyframes front-flicker {
  from {
    text-shadow: 0 0 5px #ffffff;
  }
  to {
    text-shadow: 0 0 3px #ffffff;
  }
}