/* ===== Animations ===== */

/* North Star Animation */
.north-star {
  animation: rotateIt 40s ease-in-out infinite;
  position: absolute;
  top: -20% ;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  opacity: 0.75;
}

.north-star-alt {
  animation: rotateIt 40s ease-in-out infinite;
  position: absolute;
  bottom: -40%;
  right: -60%;
  z-index: 1;
  opacity: 0.75;
}

.scaleIt {
  animation: scaleAnimation 2s ease-in-out infinite;
}

.rotateIt {
  animation: rotateIt 5s linear infinite;
}

@keyframes scaleAnimation {
  0%, 100% {
    transform: scale(0.95);
  }
  50% {
    transform: scale(1.1);
  }
}

@keyframes rotateIt {
  0% { transform: translateX(-50%) rotate(0) scale(100%); }
  50% { transform: translateX(-50%) rotate(180deg) scale(65%); }
  100% { transform: translateX(-50%) rotate(360deg) scale(100%); }
}

@keyframes scroll {
  0% { transform: translateX(50%); }
  100% { transform: translateX(-100%); }
} 

@media (min-height: 1024px) {
    .north-star {
      top: 0%;
    }
  }
  
  @media (min-height: 1920px) {
    .north-star {
      top: 10%;
    }
  }