@font-face {
  font-family: "Galliso";
  src: url("../fonts/Galliso.ttf") format("truetype");
}
@font-face {
  font-family: "Second-Font";
  src: url("./fonts/Galliso.ttf") format("truetype");
}

.loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  z-index: 1000;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  
}

.loader-copy p{
  font-size: 5vw;
  font-family: 'Galliso', sans-serif;
  letter-spacing: 0.5rem;
  
}

@media screen and (min-width: 300px) and (max-width: 600px) {
    .loader-copy p{
      font-size: 12vw;
    }

}


.progress-bar {
  position: absolute;
  bottom: 0;
  width: 0%;
  height: 100%;
  background: #00ff73;
  background: linear-gradient(to right, #150ab6ca, #0279d4db);
  clip-path: polygon(0% 80%, 100% 80%, 100% 100%, 0% 100%);
}

#loader-copy-1,
#loader-copy-2,
#loader-copy-3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
}

.loader .word {
  opacity: 0;
}