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

@layer base {
  @font-face {
    font-family: 'neopixel';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/font/neopixel-regular.otf') format('otf');
  }
}

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}



/* styles/nprogress.css */
#nprogress .bar {
  background: rgb(7, 132, 250);
  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
}

#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px rgb(7, 104, 250), 0 0 5px rgb(7, 132, 250);
  opacity: 1.0;
  transform: rotate(3deg) translate(0px, -4px);
}

#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 50%;
  left: 50%;
  margin-left: -22px;
  margin-top: -22px;
}

#nprogress .spinner-icon {
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  border: solid 2px transparent;
  border-top-color:  rgb(7, 104, 250);
  border-left-color: rgb(7, 132, 250);
  border-radius: 50%;
  animation: nprogress-spinner 400ms linear infinite;
}

@keyframes nprogress-spinner {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
