body.rainbow_template .game-menu__template-animation {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: space-between;
  max-height: 110px;
  pointer-events: none;
  user-select: none;
  width: 100%;
}

.rainbow-template__unicorn {
  position: relative;
  top: 60px;
  width: 100px;
  z-index: 1;
}

#left-corner-unicorn.left-unicorn-comes {
  left: 0;
  transform: rotate(0deg);
}

#right-corner-unicorn.right-unicorn-comes {
  right: 0;
  transform: rotateY(180deg) rotate(0deg);
}

#left-corner-unicorn {
  left: -50%;
  transform: rotate(-30deg);
  transition: left 0.7s ease, transform 0.5s 0.4s ease;
}

#right-corner-unicorn {
  right: -50%;
  transform: rotateY(180deg) rotate(-30deg);
  transition: right 0.7s ease, transform 0.5s 0.4s ease;
}

@keyframes largerScreenVomitRainbow {
  from {
    width: 0%;
  }
  to {
    width: calc(100vw - 120px);
  }
}

@keyframes largerScreenUnvomitRainbow {
  from {
    width: calc(100vw - 120px);
    /* width: 83.5%; */
  }
  to {
    width: 0%;
  }
}

@keyframes mobileScreenVomitRainbow {
  from {
    width: 0%;
  }
  to {
    width: calc(100vw - 92px);
  }
}

@keyframes mobileScreenUnvomitRainbow {
  from {
    width: calc(100vw - 92px);
  }
  to {
    width: 0%;
  }
}

.larger-screen-rainbow--start-animation {
  animation: largerScreenVomitRainbow 4s linear forwards;
  left: 60px;
}

.larger-screen-rainbow--end-animation {
  animation: largerScreenUnvomitRainbow 4s linear;
  right: 60px;
}

.mobile-rainbow--start-animation {
  animation: mobileScreenVomitRainbow 4s linear forwards;
  left: 44px;
}

.mobile-rainbow--end-animation {
  animation: mobileScreenUnvomitRainbow 4s linear;
  right: 44px;
}

.rainbow {
  background-image: linear-gradient(
    #ff0000,
    #ffa500,
    #ffff00,
    #008000,
    #0000ff 90%,
    #4b0082,
    #ee82ee
  );
  border-radius: 2px 0 0 2px;
  height: 17px;
  position: absolute;
  top: 108px;
  z-index: 1;
}

@media (max-width: 580px) {
  .rainbow-template__unicorn {
    width: 70px;
  }
}

@media (max-height: 375px) {
  .rainbow-template__unicorn {
    top: -69px;
  }

  .rainbow {
    top: -20px;
  }
}