@keyframes nowness{
  0% { opacity: 1; }
  50% { opacity: .9; }
  100% { opacity: 1; }
}


.animate {
  animation-duration: 1s;
  animation-name: animate-fade;
  animation-delay: 0.5s;
  animation-fill-mode: backwards;
}

@keyframes animate-fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.animate-2 {
  animation-duration: 1s;
  animation-name: animate-fade;
  animation-delay: 1.0s;
  animation-fill-mode: backwards;
}

.animate-3 {
  animation-duration: 2s;
  animation-name: animate-fade;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

@keyframes scaleAnim {
  0%{transform: scale(1);}
  50%{transform: scale(1.2);}
  100%{transform: scale(1);}
}

.scaleLFO{
  animation: scaleAnim 3s infinite ease-in;
}

@keyframes MoonPhaseAnimDef {
  0%{transform: rotate(-30DEG);}
  50%{transform: rotate(180DEG);}
  100%{transform: rotate(390DEG);}
}

.moonPhaseAnim{
  animation: MoonPhaseAnimDef 800s infinite linear;
}

@media screen and (prefers-reduced-motion: reduce) {
  .animate { animation: none !important; }
}

.delay-1 { animation-delay: 0.6s; }
.delay-2 { animation-delay: 0.7s; }
.delay-3 { animation-delay: 0.8s; }

.animate.pop {
  animation-duration: 0.5s;
  animation-name: animate-pop;
  animation-timing-function: cubic-bezier(.26, .53, .74, 1.48);
}

@keyframes animate-pop {
  0% {
    opacity: 0;
    transform: scale(0.5, 0.5);
  }

  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}



@keyframes spin-Y-axis
{0%{transform:rotateY(0deg)}
to
{transform:rotateY(1turn)}}