globals.css

@import 'react-tooltip/dist/react-tooltip.css';
@tailwind base;
@tailwind components;
@tailwind utilities;


:root {
  --hot-red: #E91315;
  --hot-red-light: #EFE3F3;
  --hot-yellow: #FFC83F;
  --hot-yellow-light: #FFE4AE;
  --hot-blue: #0176CE;
  --hot-blue-light: #BDE0FF;
  --rt-opacity: 0.97;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.font-epilogue {
  font-family: "Epilogue", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.bg-racha-fire {
  background: var(--hot-red-light) url("/racha-fire.png") bottom left;
  background-size: 100% auto;
  background-position: bottom;
  background-repeat: no-repeat;
}
.bg-racha-fire\/50 {
  background: transparent url("/racha-fire-opacity-50.png") bottom left;
  background-size: 100% auto;
  background-position: bottom;
  background-repeat: no-repeat;
}
.w3ui-button-colors {
  @apply text-white bg-slate-800 hover:bg-blue-800 transition-colors ease-in;
}

.w3ui-button-size {
  @apply text-sm font-medium rounded-sm;
}

.w3ui-button-padding {
  @apply py-2 px-8;
}

.w3ui-button {
  @apply w3ui-button-colors w3ui-button-size w3ui-button-padding;
}

.w3ui-button.active {
  @apply bg-transparent;
}

.authenticator {
  @apply bg-racha-fire w-full min-h-screen flex flex-col justify-center items-center py-4;
}

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

@layer utilities {
  .bg-grad {
    background-color: rgb(244 244 245);
    background-image: linear-gradient(225deg, #ff149296 0%, #00ffff96 100%);
    background-size: 400% 400%;
    animation: bgPosDrift 60s ease infinite;
  }
  .text-grad {
    background: linear-gradient(92deg, #B507DC 0.82%, #2F0FDB 26.77%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}