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

html,
body {
    padding: 0;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
        Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

* {
    box-sizing: border-box;
}

:root {
    --foreground-rgb: 0, 0, 0;
    --background-start-rgb: 214, 219, 220;
    --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
    :root {
        --foreground-rgb: 255, 255, 255;
        --background-start-rgb: 0, 0, 0;
        --background-end-rgb: 0, 0, 0;
    }
}

body {
    color: rgb(var(--foreground-rgb));
    background: linear-gradient(
            to bottom,
            transparent,
            rgb(var(--background-end-rgb))
        )
        rgb(var(--background-start-rgb));
}

audio::-webkit-media-controls-current-time-display {
    font-family: "__VT323_2a9463";
    font-size: 1.2rem;
}

audio::-webkit-media-controls-time-remaining-display {
    font-family: "__VT323_2a9463";
    font-size: 1.2rem;
}

audio::-webkit-media-controls-enclosure {
    border-radius: 0;
    border: 2px solid black;
}

.loader {
  animation: spin 1s linear infinite;
  height: 10px;
  width: 10px;
  margin: -5px;
  scale: 0.5;
}

@keyframes spin {
  0% {
    box-shadow: 
      0px -30px #fff, 
      10px -30px #fff, 
      20px -20px #fff, 
      30px -10px #fff, 
      30px 0px #fff, 
      30px 10px #fff, 
      20px 20px #fff, 
      10px 30px #fff, 
      0px 30px transparent, 
      -10px 30px transparent, 
      -20px 20px transparent, 
      -30px 10px transparent, 
      -30px 0px transparent, 
      -30px -10px transparent, 
      -20px -20px transparent,
      -10px -30px transparent;
  }
  6.25% {
    box-shadow: 
      0px -30px transparent, 
      10px -30px #fff, 
      20px -20px #fff, 
      30px -10px #fff, 
      30px 0px #fff, 
      30px 10px #fff, 
      20px 20px #fff, 
      10px 30px #fff, 
      0px 30px #fff, 
      -10px 30px transparent, 
      -20px 20px transparent, 
      -30px 10px transparent, 
      -30px 0px transparent, 
      -30px -10px transparent, 
      -20px -20px transparent,
      -10px -30px transparent;
  }
  12.5% {
    box-shadow: 
      0px -30px transparent, 
      10px -30px transparent, 
      20px -20px #fff, 
      30px -10px #fff, 
      30px 0px #fff, 
      30px 10px #fff, 
      20px 20px #fff, 
      10px 30px #fff, 
      0px 30px #fff, 
      -10px 30px #fff, 
      -20px 20px transparent, 
      -30px 10px transparent, 
      -30px 0px transparent, 
      -30px -10px transparent, 
      -20px -20px transparent,
      -10px -30px transparent;
  }
  18.75% {
    box-shadow: 
      0px -30px transparent, 
      10px -30px transparent, 
      20px -20px transparent, 
      30px -10px #fff, 
      30px 0px #fff, 
      30px 10px #fff, 
      20px 20px #fff, 
      10px 30px #fff, 
      0px 30px #fff, 
      -10px 30px #fff, 
      -20px 20px #fff, 
      -30px 10px transparent, 
      -30px 0px transparent, 
      -30px -10px transparent, 
      -20px -20px transparent,
      -10px -30px transparent;
  }
  25% {
    box-shadow: 
      0px -30px transparent, 
      10px -30px transparent, 
      20px -20px transparent, 
      30px -10px transparent, 
      30px 0px #fff, 
      30px 10px #fff, 
      20px 20px #fff, 
      10px 30px #fff, 
      0px 30px #fff, 
      -10px 30px #fff, 
      -20px 20px #fff, 
      -30px 10px #fff, 
      -30px 0px transparent, 
      -30px -10px transparent, 
      -20px -20px transparent,
      -10px -30px transparent;
  }
  31.25% {
    box-shadow: 
      0px -30px transparent, 
      10px -30px transparent, 
      20px -20px transparent, 
      30px -10px transparent, 
      30px 0px transparent, 
      30px 10px #fff, 
      20px 20px #fff, 
      10px 30px #fff, 
      0px 30px #fff, 
      -10px 30px #fff, 
      -20px 20px #fff, 
      -30px 10px #fff, 
      -30px 0px #fff, 
      -30px -10px transparent, 
      -20px -20px transparent,
      -10px -30px transparent;
  }
  37.5% {
    box-shadow: 
      0px -30px transparent, 
      10px -30px transparent, 
      20px -20px transparent, 
      30px -10px transparent, 
      30px 0px transparent, 
      30px 10px transparent, 
      20px 20px #fff, 
      10px 30px #fff, 
      0px 30px #fff, 
      -10px 30px #fff, 
      -20px 20px #fff, 
      -30px 10px #fff, 
      -30px 0px #fff, 
      -30px -10px #fff, 
      -20px -20px transparent,
      -10px -30px transparent;
  }
  43.75% {
    box-shadow: 
      0px -30px transparent, 
      10px -30px transparent, 
      20px -20px transparent, 
      30px -10px transparent, 
      30px 0px transparent, 
      30px 10px transparent, 
      20px 20px transparent, 
      10px 30px #fff, 
      0px 30px #fff, 
      -10px 30px #fff, 
      -20px 20px #fff, 
      -30px 10px #fff, 
      -30px 0px #fff, 
      -30px -10px #fff, 
      -20px -20px #fff,
      -10px -30px transparent;
  }
  50% {
    box-shadow: 
      0px -30px transparent, 
      10px -30px transparent, 
      20px -20px transparent, 
      30px -10px transparent, 
      30px 0px transparent, 
      30px 10px transparent, 
      20px 20px transparent, 
      10px 30px transparent, 
      0px 30px #fff, 
      -10px 30px #fff, 
      -20px 20px #fff, 
      -30px 10px #fff, 
      -30px 0px #fff, 
      -30px -10px #fff, 
      -20px -20px #fff,
      -10px -30px #fff;
  }
  56.25% {
    box-shadow: 
      0px -30px #fff, 
      10px -30px transparent, 
      20px -20px transparent, 
      30px -10px transparent, 
      30px 0px transparent, 
      30px 10px transparent, 
      20px 20px transparent, 
      10px 30px transparent, 
      0px 30px transparent, 
      -10px 30px #fff, 
      -20px 20px #fff, 
      -30px 10px #fff, 
      -30px 0px #fff, 
      -30px -10px #fff, 
      -20px -20px #fff,
      -10px -30px #fff;
  }
  62.5% {
    box-shadow: 
      0px -30px #fff, 
      10px -30px #fff, 
      20px -20px transparent, 
      30px -10px transparent, 
      30px 0px transparent, 
      30px 10px transparent, 
      20px 20px transparent, 
      10px 30px transparent, 
      0px 30px transparent, 
      -10px 30px transparent, 
      -20px 20px #fff, 
      -30px 10px #fff, 
      -30px 0px #fff, 
      -30px -10px #fff, 
      -20px -20px #fff,
      -10px -30px #fff;
  }
  68.75% {
    box-shadow: 
      0px -30px #fff, 
      10px -30px #fff, 
      20px -20px #fff, 
      30px -10px transparent, 
      30px 0px transparent, 
      30px 10px transparent, 
      20px 20px transparent, 
      10px 30px transparent, 
      0px 30px transparent, 
      -10px 30px transparent, 
      -20px 20px transparent, 
      -30px 10px #fff, 
      -30px 0px #fff, 
      -30px -10px #fff, 
      -20px -20px #fff,
      -10px -30px #fff;
  }
  75% {
    box-shadow: 
      0px -30px #fff, 
      10px -30px #fff, 
      20px -20px #fff, 
      30px -10px #fff, 
      30px 0px transparent, 
      30px 10px transparent, 
      20px 20px transparent, 
      10px 30px transparent, 
      0px 30px transparent, 
      -10px 30px transparent, 
      -20px 20px transparent, 
      -30px 10px transparent, 
      -30px 0px #fff, 
      -30px -10px #fff, 
      -20px -20px #fff,
      -10px -30px #fff;
  }
  81.25% {
    box-shadow: 
      0px -30px #fff, 
      10px -30px #fff, 
      20px -20px #fff, 
      30px -10px #fff, 
      30px 0px #fff, 
      30px 10px transparent, 
      20px 20px transparent, 
      10px 30px transparent, 
      0px 30px transparent, 
      -10px 30px transparent, 
      -20px 20px transparent, 
      -30px 10px transparent, 
      -30px 0px transparent, 
      -30px -10px #fff, 
      -20px -20px #fff,
      -10px -30px #fff;
  }
  87.5% {
    box-shadow: 
      0px -30px #fff, 
      10px -30px #fff, 
      20px -20px #fff, 
      30px -10px #fff, 
      30px 0px #fff, 
      30px 10px #fff, 
      20px 20px transparent, 
      10px 30px transparent, 
      0px 30px transparent, 
      -10px 30px transparent, 
      -20px 20px transparent, 
      -30px 10px transparent, 
      -30px 0px transparent, 
      -30px -10px transparent, 
      -20px -20px #fff,
      -10px -30px #fff;
  }
  93.75% {
    box-shadow: 
      0px -30px #fff, 
      10px -30px #fff, 
      20px -20px #fff, 
      30px -10px #fff, 
      30px 0px #fff, 
      30px 10px #fff, 
      20px 20px #fff, 
      10px 30px transparent, 
      0px 30px transparent, 
      -10px 30px transparent, 
      -20px 20px transparent, 
      -30px 10px transparent, 
      -30px 0px transparent, 
      -30px -10px transparent, 
      -20px -20px transparent,
      -10px -30px #fff;
  }
  100% {
    box-shadow: 
      0px -30px #fff, 
      10px -30px #fff, 
      20px -20px #fff, 
      30px -10px #fff, 
      30px 0px #fff, 
      30px 10px #fff, 
      20px 20px #fff, 
      10px 30px #fff, 
      0px 30px transparent, 
      -10px 30px transparent, 
      -20px 20px transparent, 
      -30px 10px transparent, 
      -30px 0px transparent, 
      -30px -10px transparent, 
      -20px -20px transparent,
      -10px -30px transparent;
  }
}
