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

/* set default font */
html {
  font-family: "Monaspace Neon";
  font-feature-settings: "calt", "ss01", "ss02", "ss03", "ss04", "ss05", "ss06",
    "ss07", "ss08", "ss09", "liga";
}

/* hide scrollbar */
::-webkit-scrollbar {
  display: none;
}

/* make text pan :3 */
pan {
  background: linear-gradient(
    45deg,
    #ff1b8d 33%,
    #ffd800 33%,
    #ffd800 66%,
    #21b1ff 66%
  );
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* RAVE!!! */
.rave {
  background: red;
  animation: raveBackgroundAnimation 1s linear infinite;
}

@keyframes raveBackgroundAnimation {
  0% {
    background-color: red;
  }
  16.666% {
    background-color: orange;
  }
  33.333% {
    background-color: yellow;
  }
  50% {
    background-color: green;
  }
  66.666% {
    background-color: blue;
  }
  83.333% {
    background-color: indigo;
  }
  100% {
    background-color: violet;
  }
}

.rave > * {
  background: black;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: raveBackgroundTextAnimation 1s linear infinite;
}

@keyframes raveBackgroundTextAnimation {
  0% {
    background-color: black;
  }
  16.666% {
    background-color: black;
  }
  33.333% {
    background-color: black;
  }
  50% {
    background-color: white;
  }
  66.666% {
    background-color: white;
  }
  83.333% {
    background-color: white;
  }
  100% {
    background-color: black;
  }
}

/* page fade in */
body {
  opacity: 0;
  animation: fadeIn 1s ease-in-out forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}