@tailwind base;
@tailwind components;
@tailwind utilities;
 
@font-face {
  font-family: Electrolize;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Electrolize-Regular.woff2') format('woff2');
}

  @font-face {
  font-family: Orbitron;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Orbitron-Regular.woff2') format('woff2');
}
  @font-face {
  font-family: Orbitron;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/Orbitron-Medium.woff2') format('woff2');
}
  @font-face {
  font-family: Orbitron;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/Orbitron-Bold.woff2') format('woff2');
}

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

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

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

#canvas-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  max-height: 100vh;
  canvas {
    height: 100vh !important;
    background-color: #161629;
  }
}

.scene-label{
  color: #0c67a140;
  // color: rgb(75, 80, 85);
  pointer-events: none;
  user-select: none;
  width: 150px;
  text-transform: uppercase;
  font-size: 12px;
  // font-family: Orbitron;
  // font-size: 200px;
  // opacity: 0.3;
  z-index: 1 !important;
  .active{
    color:#14ccfa;
    font-weight: 700;
  }
}
@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}
