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

:root {
  --background: 0 100% 99%;

  --dusty-pink: 342 100% 95%;
  --bulldog-red: 348 88% 39%;
  --barely-pink: 345 100% 98%;
  --dev-dog-blue: 240 20% 25%;
  --nearly-black: 45 6% 13%;
  --midnight-blue: 240 20% 17%;
  --grout-gray: 0 5% 52%;
  --glory-glory-red: 349 100% 45%;
  --mud-gray: 346 7% 37%;
  --pebble-gray: 346 9% 63%;
  --limestone: 20 12% 81%;
  --baby-blue: 180 33% 89%;
  --lake-herrick: 183 100% 34%;
  --gold: 22 89% 79%;
  --peach: 0 65% 69%;
  --wave: 184 52% 63%;
}

/* For Safari and Chrome */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
/* For older Safari versions */
.no-scrollbar::-webkit-scrollbar {
  -webkit-appearance: none;
}

/* For Internet Explorer and Edge */
.no-scrollbar {
  -ms-overflow-style: none;
}

.OuterRingAnimation {
  /* background: black; */
  text-align: center;

  position: relative;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.OuterRingAnimation::after,
.OuterRingAnimation::before {
  content: "";
  position: absolute;
  height: 100%;
  background-image: conic-gradient(
    from var(--angle),
    red,
    blue,
    yellow,
    green,
    red
  );
  width: 100%;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  border-radius: inherit;
  animation: 3s spin linear infinite;
}

.OuterRingAnimation::before {
  filter: blur(1.5rem);
  opacity: 0.5;
}

@keyframes spin {
  from {
    --angle: 0deg;
  }
  to {
    --angle: 360deg;
  }
}
