@import "tailwindcss";

@layer base {
  body {
    @apply min-h-full font-sans antialiased leading-normal bg-[#f0f0f0] text-[#333333];
  }

}

.glass-scroll-shape {
  animation: glass-scroll-shape linear;
  animation-timeline: scroll(root block);
  animation-fill-mode: both;
}

.slider-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  outline: none;
  cursor: pointer;
}

.slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
  transition: transform 0.15s ease;
}

.slider-input:hover::-webkit-slider-thumb {
  transform: scale(1.25);
}

.slider-input::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
  cursor: pointer;
}

.slider-input::-moz-range-track {
  height: 3px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
}

@keyframes glass-scroll-shape {
  0% {
    width: min(400px, 80vw);
    height: min(250px, 80vh);
    border-radius: 50px;
    left: 50%;
  }
  10% {
    width: 200px;
    height: 150px;
    border-radius: 50px;
    left: 50%;
  }
  /*10% {*/
  /*  width: 20vw;*/
  /*  height: 20vh;*/
  /*  border-radius: 20vmin;*/
  /*}*/
  20% {
    top: 33svi;
    left: 70%;
    width: 10vw;
    height: 5vw;
    border-radius: 5vmin;
  }
  30% {
    top: 51svh;
    left: 28.5vw;
    width: 55vw;
    height: 300px;
    border-radius: 5vmin;
  }
  55% {
    top: 51svh;
    left: 28.5vw;
    width: 55vw;
    height: 300px;
    border-radius: 5vmin;
  }
  60% {
    left: 50%;
    width: 20vmin;
    height: 20vmin;
    border-radius: 50%;
  }
  80% {
    left: 50%;
    width: 15vmin;
    height: 15vmin;
    border-radius: 50%;
  }
  100% {
    width: 20vw;
    height: 20vh;
    border-radius: 24px;
  }
}
