#slider-container {

   position:absolute;
   bottom:1vh;
   left:0.5vw;
   z-index:4;
}

.slider-label {
   position:relative;
   font-size:1.9vh;
   left:calc(max(225px,20.2vh));
}

.slider {
   width:calc(max(220px,20vh));
   position:absolute;
   height:2vh;
}

#visual{
   position:absolute;
   top:calc(max(20vh - 20vw,0vh));
   justify-content: center;
   z-index:0;
}

#ta {
   position:absolute;
   width:100vw;
}

#title {
   font-size: calc(min(4vh,5vw));
   text-align:center;
   position:relative;
   width:100%;
   z-index:2;
}

#author {
   font-size: calc(min(2vh,3vw));
   width:100%;
   position:relative;
   text-align:center;
   margin-top:0;
   z-index:2;
}

select {
  font-size: 1.9vh;
}

#yAxis {
   margin-bottom:1vh;
}

#xAxis {
   margin-bottom:1vh;
}

#randomizeButtonContainer {
  background: #111;
  width: fit-content;
  border-radius: 0.5rem;
}

#randomizeButtonContainer:hover {
  background-image: repeating-linear-gradient(in oklch 50deg, oklch(0.3 0.1 0) 0.0%, oklch(0.3 0.1 180) 25.0%, oklch(0.3 0.1 359.9) 50.0%); 
  background-size: 200%, 200%;
  animation: mov 2s linear infinite;
}

#randomizeButton {
  font-size: 2.3vh;
  box-sizing: border-box;
  border-radius: 0.5rem;
  position:relative;
  /* background: #111; */
  color: rgba(127,127,127,255);
  
}


#randomizeButton:hover {
  background-image: repeating-linear-gradient(in oklch 50deg, oklch(0.6537 0.2557 -179.9) 0.0%, oklch(0.6537 0.2557 0) 25.0%, oklch(0.6537 0.2557 180) 50.0%);
  background-size: 200%, 200%;
  animation: mov 2s linear infinite reverse;
  background-clip: text;
  color:transparent;
}

@keyframes mov {
  from {
    background-position: 0% 100%;
  }
  to {
    background-position: 104% 0%;
  }
}

/* oklch(0.6537 0.2557 21.9) */