@keyframes in-n-out {
  0% {
    opacity: 1;
  }
  100% {
    width: 48px;
    height: 48px;
  }
}

@keyframes moon_move {
  0% {
    height: 18px;
    width: 48dvw;
    left: 26dvw;
    background-color: lightblue;
    opacity: 0.2;
  }
  28% {
    background-color: blue;
  }
  48% {
    background-color: blueviolet;
  }
  88% {
    background-color: cornflowerblue;
  }
  100% {
    background-color: rgb(67, 164, 255);
    opacity: 1;
  }
}

@keyframes scroll_hidden {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -100%;
  }
}

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

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

@keyframes back-left {
  0% {
    background-position: left;
  }
  100% {
    background-position: right;
  }
}