globals.css

@media screen and (min-width: 768px) {
  :root {
    font-size: 0.9375rem;
  }
}

* {
  min-width: 0;
}

:root {
  --background: 236 239 244;
  --background-light: 248 250 252;
  --background-lighter: 236 239 244;
  --background-lightest: 219 222 230;
  --background-primary: 235 47 149;
  --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: 235 47 149;
  --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: 207 212 222;
}

.dark {
  --background: 17 23 41;
  --background-light: 32 41 58;
  --background-lighter: 44 56 79;
  --background-lightest: 54 74 102;
  --background-primary: 235 47 149;
  --background-primary-light: 235 47 149;
  --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: 235 47 149;
  --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: 203 213 225;
  --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;
}

#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);
  }
}

.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;
}

.container-page {
  @apply mx-auto w-full px-4;
  max-width: 1300px;
}

.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);
}