globals.css

* {
  min-width: 0;
}

:root {
  --background: 248 250 252;
  --background-light: 255 255 255;
  --background-lighter: 248 250 252;
  --background-lightest: 238 242 245;
  --background-primary: 0 83 255;
  --background-primary-light: 224 225 254;
  --background-warning: 225 181 62;
  --background-info: 77 70 220;
  --background-accent: 236 239 244;
  --background-red: 254 247 247;
  --text: 32 41 58;
  --text-primary: 0 83 255;
  --text-secondary: 99 102 241;
  --text-secondary-light: 37 99 235;
  --text-muted: 148 163 184;
  --text-dark: 17 23 41;
  --text-warning: 230 121 38;
  --text-on-primary: 255 255 255;
  --text-muted-on-primary: 203 213 225;
  --text-muted-on-primary-light: 100 116 139;
  --text-red: 220 70 70;
  --border-gray: 226 232 240;
}

.dark {
  --background: 17 23 41;
  --background-light: 32 41 58;
  --background-lighter: 44 56 79;
  --background-lightest: 54 74 102;
  --background-primary: 0 83 255;
  --background-primary-light: 77 70 220;
  --background-warning: 225 181 62;
  --background-info: 77 70 220;
  --background-accent: 104 4 231;
  --background-red: 54 40 55;
  --text: 255 255 255;
  --text-primary: 99 149 253;
  --text-secondary: 130 161 248;
  --text-secondary-light: 191 219 254;
  --text-muted: 163 172 190;
  --text-dark: 17 23 41;
  --text-warning: 225 181 62;
  --text-on-primary: 255 255 255;
  --text-muted-on-primary: 197 205 222;
  --text-muted-on-primary-light: 203 213 225;
  --text-red: 241 95 95;
  --border-gray: 51 59 74;
}

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

.fill-opacity-100 g {
  fill-opacity: 1;
}

* {
  @apply scrollbar-thin scrollbar-track-background scrollbar-thumb-border-gray scrollbar-track-rounded-full scrollbar-thumb-rounded-full dark:scrollbar-thumb-background-lighter;
}

html,
body {
  @apply font-sans;
  @apply text-text;
  @apply text-base;
  @apply bg-background;
}

#__next {
  position: relative;
}

#pwa-install {
  position: relative;
  z-index: 9999;
}

.highlighted {
  @apply relative after:pointer-events-none after:absolute after:left-0 after:top-0 after:h-full after:w-full after:rounded-2xl after:bg-background-primary/20;
}
.highlighted::after {
  animation: highlighted-blue 4s ease-in-out 1;
}
.dark .highlighted {
  @apply after:hidden;
  animation: highlighted 4s ease-in-out 1;
}
@keyframes highlighted-blue {
  0% {
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes highlighted {
  3% {
    filter: brightness(1.4);
  }
  15% {
    filter: brightness(1.4);
  }
}

@keyframes bounceAnimation {
  0% {
    transform: scale(1.5) rotateZ(0);
  }
  20% {
    transform: scale(1.5) rotateZ(-45deg);
  }
  40% {
    transform: scale(1) rotateZ(0);
  }
  60% {
    transform: scale(1.1) rotateZ(-25deg);
  }
  80% {
    transform: scale(1) rotateZ(0);
  }
  100% {
    transform: scale(1.1) rotateZ(-15deg);
  }
}

.animate {
  animation: bounceAnimation 0.7s ease;
}

@keyframes floatLike {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(0.5);
  }
  50% {
    opacity: 0.8;
    transform: translate(var(--x), var(--y)) scale(0.5) rotateY(180deg);
  }
  100% {
    opacity: 0;
    transform: translate(var(--x), calc(var(--y) + 200px)) scale(0.5)
      rotateY(360deg);
  }
}

.floating-like {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 20px;
  animation: floatLike 1.5s ease-out;
  pointer-events: none;
}

@keyframes floatBigLike {
  from {
    opacity: 0;
    transform: scale(0) rotateZ(0deg);
  }
  40% {
    opacity: 0.9;
    transform: scale(0.5) rotateZ(-20deg);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.1) rotateZ(-25deg);
  }
  60% {
    opacity: 0.9;
    transform: scale(1.1) rotateZ(0);
  }
  80% {
    opacity: 0.9;
    transform: scale(0.9) rotateZ(0) translateY(-300);
  }
  100% {
    opacity: 0;
    transform: scale(0.6) rotateZ(0) translateY(-600px);
  }
}

.big-floating-like {
  position: absolute;
  height: 5rem;
  width: 5rem;
  animation: floatBigLike 1s ease-in;
  pointer-events: none;
}

@keyframes slcaleSection {
  from {
    transform: scale(1);
  }
  70% {
    transform: scale(0.98);
  }
  to {
    transform: scale(1);
  }
}

.scale-section {
  animation: slcaleSection 0.4s ease-in;
}

.input-range {
  appearance: none;
  background: rgb(236 239 244);
  background-image: linear-gradient(
    rgba(235, 47, 149, 0.5),
    rgba(235, 47, 149, 0.5)
  );
  height: 10px;
  border-radius: 38px;
  background-repeat: no-repeat;
}

:is(.dark *) > .input-range {
  background: #0f172a;
  appearance: none;
  background-image: linear-gradient(
    rgba(235, 47, 149, 0.8),
    rgba(235, 47, 149, 0.8)
  );
  height: 10px;
  border-radius: 38px;
  background-repeat: no-repeat;
}

.input-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: #eb2f95;
  cursor: ew-resize;
}

.input-range::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

.unselectable {
  @apply select-none;
  user-drag: none;
  -webkit-user-drag: none;
}

.unselectable-text {
  user-select: none;
  -webkit-user-select: none; /* Safari fallback only */
  -webkit-user-select: none; /* Chrome/Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
}

.selecteble-text {
  user-select: auto;
  -webkit-user-select: auto; /* Safari fallback only */
  -webkit-user-select: auto; /* Chrome/Safari */
  -moz-user-select: auto; /* Firefox */
  -ms-user-select: auto; /* IE10+ */
}

.rotate-y-180 {
  transform: rotateY(180deg);
}

.floating-word {
  position: absolute;
  font-size: 34px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);

  animation: moveUp 3s forwards;
  z-index: 10;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

@keyframes moveUp {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-150px);
  }
}

.no-scroll {
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox */
}
.no-scroll::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}