#header {
  animation: move-bg 25s linear infinite;
  animation-direction: alternate;
}
@keyframes move-bg {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}
/* Auto starting animations */
.continue_below {
  animation:
    continue-below-move-bg 0.5s linear infinite,
    continue-below-fade-in 10s ease-out forwards;;
  animation-direction: alternate;
}
@keyframes continue-below-move-bg {
  0% {
    background-position: 0% 0%;
    filter: opacity(0.5);
  }
  25% {
    background-position: 0% 10%;
  }
  50% {
    background-position: 0% 25%;
  }
  75% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 0% 100%;
    filter: opacity(1);
  }
}
@keyframes continue-below-fade-in {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 0.75;
  }
}
.anim_rotation {
  animation: rotate 10s linear infinite;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.anim_slow_rotation {
  animation: slow-rotate 20s linear infinite;
  animation-direction: alternate;
}
@keyframes slow-rotate {
  0% {
    transform: rotate(0deg) translate(0, 0);
  }
  100% {
    transform: rotate(15deg) translate(-3em, -2em);
  }
}
/* Triggerable animations (by adding .animate class) */
.anim_fade_in {
  visibility: hidden;
  animation-fill-mode: forwards;
  opacity: 0;
}
.anim_fade_in.animate {
  visibility: visible;
  animation: fade-in 3s ease-out forwards;
}
@keyframes fade-in {
  0% {
    scale: 0.8;
    opacity: 0;
  }
  50% {
    scale: 1;
    opacity: 1;
  }
  100% {
    opacity: 1
  }
}
.anim_pop_in {
  visibility: hidden;
  animation-fill-mode: forwards;
  opacity: 0;
}
.anim_pop_in.animate {
  visibility: visible;
  animation: pop-in 0.75s ease-out forwards;
}
@keyframes pop-in {
  0% {
    opacity: 1;
    scale: 0;
  }
  80% {
    scale: 1.2;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}
.anim_left_slide_in {
  visibility: hidden;
  opacity: 0;
}
.anim_left_slide_in.animate {
  visibility: visible;
  animation: left-slide-in 0.5s ease-out forwards;
}
@keyframes left-slide-in {
  0% {
    transform: translateX(-100vw);
    opacity: 1;
  }
  100% {
    transform: translateX(0vw);
    opacity: 1;
  }
}
.anim_right_slide_in {
  visibility: hidden;
  opacity: 0;
}
.anim_right_slide_in.animate {
  visibility: visible;
  animation: right-slide-in 0.5s ease-out forwards;
}
@keyframes right-slide-in {
  0% {
    transform: translateX(100vw);
    opacity: 1;
  }
  100% {
    transform: translateX(0vw);
    opacity: 1;
  }
}
.anim_bottom_slide_in {
  visibility: hidden;
  opacity: 0;
}
.anim_bottom_slide_in.animate {
  visibility: visible;
  animation: bottom-slide-in 0.5s ease-out forwards;
}
@keyframes bottom-slide-in {
  0% {
    transform: translateY(100vh);
    opacity: 1;
  }
  100% {
    transform: translateY(0vh);
    opacity: 1;
  }
}
.anim_top_slide_in {
  visibility: hidden;
  opacity: 0;
}
.anim_top_slide_in.animate {
  visibility: visible;
  animation: top-slide-in 0.5s ease-out forwards;
}
@keyframes top-slide-in {
  0% {
    transform: translateY(-100vh);
    opacity: 1;
  }
  100% {
    transform: translateX(0vh);
    opacity: 1;
  }
}
.anim_clockwise_rotate {
  visibility: hidden;
  animation-fill-mode: forwards;
}
.anim_clockwise_rotate.animate {
  visibility: visible;
  animation: clockwise-rotate 0.5s;
}
@keyframes clockwise-rotate {
  0% {
    transform: rotate(1440deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes reveal-from-left {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 1;
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}@keyframes reveal-from-top {
  from {
    clip-path: inset(0 0 100% 0);
    opacity: 1;
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
.anim_height_grow {
  visibility: hidden;
  opacity: 0;
}
.anim_height_grow.animate {
  visibility: visible;
  animation: height-grow 0.5s ease-out forwards;
}
@keyframes height-grow {
  0% {
    max-height: 0;
    opacity: 1;
  }
  100% {
    max-height: 100vh;
    opacity: 1;
  }
}
.anim_width_grow {
  visibility: hidden;
  opacity: 0;
}
.anim_width_grow.animate {
  visibility: visible;
  animation: width-grow 0.5s ease-out forwards;
}
@keyframes width-grow {
  0% {
    max-width: 0;
    opacity: 1;
  }
  100% {
    max-width: 100vw;
    opacity: 1;
  }
}
@keyframes show-element {
  to {
    max-height: unset;
    max-width: unset;
  }
}
.anim_appear {
  visibility: hidden;
  animation-fill-mode: forwards;
  opacity: 0;
}
.anim_appear.animate {
  visibility: visible;
  animation: appear 1s ease-out forwards;
}
@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.anim_text_blur {
  visibility: hidden;
  opacity: 0;
}
.anim_text_blur.animate {
  visibility: visible;
  animation: text-blur 1s ease-out forwards;
}
@keyframes text-blur {
  0% {
    opacity: 1;
    text-shadow: 0 0 20px black;
    color: transparent;
  }
  99% {
    color: transparent;
  }
  100% {
    opacity: 1;
    text-shadow: 0 0 0 black;
    color: black;
  }
}