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

@layer base {
  html {
    font-family: acumin-pro, sans-serif;
  }

  html, body{
    margin: 0; padding: 0;
    
  }

  html.dark{
    background-color: #202225;
  }

}

*{
  user-select: none;
}

::-webkit-scrollbar {
    width: 4px !important;
    padding: 0;
    margin: 0;
    display: inline;
}

.download-progress{
  background-size: 500% !important;
  animation: rainbow 2s linear 0s infinite;
}

.spin-loading{
  animation: spin-loading 2s cubic-bezier(.46,-0.55,.49,1.52) 0s forwards infinite;
}

.glow-on-hover {
    border-radius: 10px;
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -4px;
    left:-4px;
    background-size: 400%;
    z-index: -1;
    filter: blur(3px);
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    animation: glowing 20s linear infinite;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

@keyframes spin-loading{
  0%{ transform: rotate(-360deg); }
  50%{ transform: rotate(-360deg); }
}

@keyframes rainbow {
  0% { background-position: 84% 0 }
  100% { background-position: 0 0% }
}