:root {
  --animation-duration: 700ms;
  --animation-speed: 1.2; 
  --spaceSpinner-size: 32px; 
  --spaceSpinner-color-two: cyan;
}


.spaceSpinner,
.spaceSpinner.navSpiner {
  position: absolute;
  top: 90%;
  width: var(--spaceSpinner-size);
  height: var(--spaceSpinner-size);
  display: inline-block;
  margin: 32px;
  opacity: 0;
  transition: opacity 0.77s ease, visibility 0.77s linear;
}


.preloadSpinnerContainer {
  position: fixed;
  display: grid;
  top: 75%; 
  left: 50%;    
  transform: translateX(50%); 
}


.spaceSpinner.navSpiner {
  --spaceSpinner-size: 30px;
  position: absolute;
  margin: 0px;
  padding: 0;
  top: 22%;
  right: 2%;
}


.preloadHoverContent {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  display: grid;
  justify-content: center;
}

.preloadHoverContent {
  visibility: hidden;
  opacity: 0; 
}

.preloadSpinner {
  justify-self: center;
  visibility: hidden;
  opacity: 0; 
}

.preloadHoverContent, 
.preloadHoverContent .spaceSpinner {
  transition: none; 
}


.preload-start-button:hover+.preloadHoverContent,
.preload-start-button:hover+.preloadHoverContent .spaceSpinner {
  transition: opacity 0.77s ease, visibility 0.77s linear; 
  opacity: 1;
  visibility: visible;
}

.preload-start-button:not(:hover) + .preloadHoverContent,
.preload-start-button:not(:hover) + .preloadHoverContent .spaceSpinner {
  transition: opacity 0.77s ease, visibility 0.77s linear; 
}


.preload-start-button:hover+.preloadHoverContent .spaceSpinner {
  animation: spinZ 20s linear infinite;
}

@keyframes spinZ {
  0% { transform: rotateZ(0deg); }
  100% { transform: rotateZ(360deg); }
}


.preload-start-button:hover+.preloadHoverContent .preloadAltSandroTopLabeEmblem {
  animation: hueRotateAnimation 2.69s ease-in-out 1.2s infinite;
  transform-origin: top; 
}

@keyframes hueRotateAnimation {
  0% {
    filter: hue-rotate(360deg) brightness(100%);
  }
  25% {
    filter: hue-rotate(355deg) brightness(100%);
  }
  50% {
    filter: hue-rotate(335deg) brightness(83%);
  }
  100% {
    filter: hue-rotate(360deg) brightness(100%);
  }
}

.preload-start-button+.preloadHoverContent .spaceSpinner {
  animation: stopSpinZ 1s forwards; 
}

@keyframes stopSpinZ {
  from { transform: rotateZ(360deg); } 
  to { transform: rotateZ(0deg); } 
}

.preload-start-button:hover+.preloadHoverContent .spaceSpinner.spaceSpinner-two .spaceSpinner_circle,
.preload-start-button:hover+.preloadHoverContent .spaceSpinner.spaceSpinner-two::before,
.preload-start-button:hover+.preloadHoverContent .spaceSpinner.spaceSpinner-two::after {
  border-top-color: rgb(0, 255, 13);
  border-left-color: rgb(8, 211, 211);
}


.navbar a.navbar-brand:hover+.navSpiner {
  opacity: 1;
  visibility: visible;
}

.spaceSpinner.spaceSpinner-two .spaceSpinner_circle,
.spaceSpinner.spaceSpinner-two::before,
.spaceSpinner.spaceSpinner-two::after {
  border-top-color: springgreen;
  border-left-color: var(--spaceSpinner-color-two);
}

.spaceSpinner.navSpiner.spaceSpinner-two .spaceSpinner_circle,
.spaceSpinner.navSpiner.spaceSpinner-two::before,
.spaceSpinner.navSpiner.spaceSpinner-two::after {
  border-top-color: rgb(0, 204, 255);
  border-left-color: rgb(8, 211, 160); 
}


.spaceSpinner.navSpiner.scrolled-inverse.spaceSpinner-two .spaceSpinner_circle,
.spaceSpinner.navSpiner.scrolled-inverse.spaceSpinner-two::before,
.spaceSpinner.navSpiner.scrolled-inverse.spaceSpinner-two::after {
  border-top-color: springgreen;
  border-left-color: var(--spaceSpinner-color-two);
}

.spaceSpinner-size32 {
  transform: scale(1);
}

.spaceSpinner_circle,
.spaceSpinner::before,
.spaceSpinner::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  perspective: 600px;
  border-top-width: 4px;
  border-left-width: 2px;
  border-top-style: solid;
  border-left-style: solid;
  border-radius: 32px;
  width: var(--spaceSpinner-size);
  height: var(--spaceSpinner-size);
  animation-duration: calc(var(--animation-duration) * var(--animation-speed));
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.spaceSpinner_circle {
  animation-name: rotation1;
}

.spaceSpinner::before {
  animation-name: rotation2;
}

.spaceSpinner::after {
  animation-name: rotation3;
}

@keyframes rotation1 {
  0% {
    transform: rotateX(65deg) rotateZ(45deg);
  }

  100% {
    transform: rotateX(65deg) rotateZ(405deg);
  }
}

@keyframes rotation2 {
  0% {
    transform: rotateX(-45deg) rotateY(45deg) rotateZ(180deg);
  }

  100% {
    transform: rotateX(-45deg) rotateY(45deg) rotateZ(540deg);
  }
}

@keyframes rotation3 {
  0% {
    transform: rotateX(45deg) rotateY(45deg) rotateZ(270deg);
  }

  100% {
    transform: rotateX(45deg) rotateY(45deg) rotateZ(630deg);
  }
}


@media (max-height: 600px) {
  .preloadSpinnerContainer {
    top: 72%;
  }
}


@media (min-height: 700px) {
  .spaceSpinner {
    --spaceSpinner-size: 64px;
    border-top: 0;
  }

  .spaceSpinner_circle,
  .spaceSpinner::before,
  .spaceSpinner::after {
    border-top-width: 6px;
    border-left-width: 3px;
  }


  .spaceSpinner.navSpiner .spaceSpinner_circle,
  .spaceSpinner.navSpiner::before,
  .spaceSpinner.navSpiner::after {
    border-top-width: 3px;
    border-left-width: 1px;
  }

}