/* design the loaders */

/********************** Index page *******************************/

.index-body {
  background: black;
  color: white;
  z-index: -1;
}
.loader {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loader-text {
  background: 50% 100% / 50% 50% no-repeat
              radial-gradient(ellipse at bottom, white, transparent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 5vw;
  animation: reveal 2s ease-in-out forwards 10ms;
  font-family: dodger;
  letter-spacing: 1.5em;
}

@keyframes reveal {
  100% {
  background-size: 300% 300%;
  letter-spacing: 0.01em;
  }
}
  /*page content*/
.index-container {
  /*makes page content invisible when loader is visible*/
  opacity: 0;
  display: none;
  transition: opacity 1s ease-in;
}

/********************** Submission page *******************************/
.submitted-container {
  opacity: 0;
  display: none;
  transition: opacity 1s ease-in; 
}
.submitted-body {
  background: var(--main-blue);
}
.loader-submitted{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: white;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards
}

.checkmark{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: #fff;
  stroke-miterlimit: 10;
  margin: 10% auto;
  box-shadow: inset 0px 0px 0px var(--main-blue);
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both

}

.checkmark__check{
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards

}

@keyframes stroke{
  100%{
    stroke-dashoffset: 0
  }
}
  
  
@keyframes scale{
  0%, 100% {
    transform: none
  }
  50%{
    transform: scale3d(1.1, 1.1, 1)}
  
}
@keyframes fill{
  100%{
    box-shadow: inset 0px 0px 0px 30px var(--main-blue);
  }
}

/********************** form page *******************************/
.form-body {
  background-color: var(--main-blue);
  z-index: -1;
}
.form-loader {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.form-loader-text {
  background: 50% 100% / 50% 50% no-repeat
  radial-gradient(ellipse at bottom, white, transparent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 5vw;
  animation: reveal 2s ease-in-out forwards 10ms;
  font-family: dodger;
  letter-spacing: 1.5em;
}
  /*page content*/
  .form-page-container{
    /*makes page content invisible when loader is visible*/
    opacity: 0;
    display: none;
    transition: opacity 2s ease-in;
  }