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

html,
body {
  @apply bg-denim-100 font-open-sans text-denim-700 overflow-x-hidden;
  min-height: 100vh;
  min-height: 100dvh;
}

html[data-full],
html[data-full] body {
  overscroll-behavior-y: none;
}

body[data-no-scroll] {
  overflow-y: hidden;
  height: 100vh;
}

#root {
  padding: 0.05px;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
}

body[data-no-select] {
  user-select: none;
}

.roll {
  animation: roll 1s;
}

@keyframes roll {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.line-clamp {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.google-cast-button:not(.casting) google-cast-launcher {
  @apply brightness-[500];
}

input[type=range] {
  @apply bg-[#1C161B];
  height: 0.25rem;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  outline: none;
  line-height: normal;
  border-radius: 5px;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 1rem;
  background: white;
  aspect-ratio: 1;
  cursor: pointer;
  border-radius: 50%;
  margin-bottom: 1rem;
}

input[type=range]::-moz-range-thumb {
  aspect-ratio: 1;
  height: 1rem;
  background: white;
  aspect-ratio: 1;
  cursor: pointer;
  border-radius: 50%;
  margin-bottom: 1rem;
}