#kuttate {
  position: fixed; 
  top: 5px;      
  left: 10px;   
  height: 100px;     
  max-height: 150px;
  animation-name: movein;
  animation-duration: 1s;
  pointer-events: none;
}


#loadborder {
  width: 90%;
  max-width: 1000px;
  height: 50px;
  margin: auto;
  border: 5px solid black;
  border-radius: 10px;
  position: relative;
  top: 70vh;
  font-size: 1.16vw;
  animation-name: movein;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
#loadbar{
  top: 0px;
  left: 0px;
  height: 50px;
  width: 46%;
  background-color: black;
  border-radius: 5px;
  position: absolute;

  font-size: 1.16vw;

}

@keyframes spin {
  0% {
    transform: translateX(-50%) rotateZ(0deg);
  }
  100% {
    transform: translateX(-50%) rotateZ(360deg);
  }
}


@keyframes movein {
  from { transform: translateY(20px); }
}

#loadanim {
  position: fixed;  
  top: 15vh;     
  left: 50%;
  transform: translateX(-50%); 
  width: 25vw;
  height: 25vw;
  max-width: 500px;
  max-height: 500px;
  animation-name: spin;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(12);
  z-index: 500; 
  pointer-events: none;
}


#percentage {
  font-size: 2.3vw;
  font-family: "Special Gothic Expanded One";
  margin-right: auto;
  position: absolute;
  top: 55px;
  animation-name: movein;
  animation-duration: 1s;
  pointer-events: none;
}

#loadborder,
#percentage,
#loadbar,
#loadanim {
  will-change: transform;
  transition: transform 0.1s ease-out;
}

.gradient-top,
.gradient-bottom {
  position: fixed;
  left: 0;
  width: 100%;
  height: 25%;
  pointer-events: none;
  z-index: 9999;
}

.gradient-top {
  top: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2), transparent);
}

.gradient-bottom {
  bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.2), transparent);
}

@media (max-width: 600px) {
  #loadborder {
    top: 47vh;
    font-size: 6vw;
    width: 95%;
  }

  #loadanim {
    top: 15vh;
    width: 60vw;
    height: 60vw;
  }

  #percentage {
    font-size: 5vw;
    top: 70px;
    left: 5%;
  }
}