@font-face {
    font-family: 'Curse Casual';
    src: url(/assets/CurseCasual.ttf);
  }

#tranquility {
    z-index: 3;
    position: absolute;
    top: 25%;
    left: 25%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 50%;
    height: 50%;
    transform: scale(0);
    transform-origin: center;
  }

video {
    width: 40vw;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

#tranquility.scale-in {
    animation-name: zoom;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

#motivation {
    font-family: 'Curse Casual', cursive;
    color: rgba(255, 255, 255, 0);
    padding-top: 80px;
    margin-left: -103%;
    margin-right: -100%;
    white-space: nowrap;
    text-align: center;
    font-size: 4.5vw;
    transition: none;
}

#motivation.show {
  color: rgba(255, 255, 255, 1);
  padding-top: 40px;
  transition: all 0.5s ease-in-out;

}

#motivation.hide {
  color: rgba(255, 255, 255, 0);
  padding-top: 0px;
  transition: all 0.5s ease-in-out;
}

.rainbow {
  animation-name: color;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

@keyframes zoom {
    0%   {transform: scale(0);}
    100% {transform: scale(1);}
}

@keyframes color {
    0% {
      background-color: #C42328;
    }
    20% {
      background-color: #C22CB6;
    }
    40% {
        background-color: #020097;
    }
    60% {
        background-color: #4BD146;
    }
    80% {
        background-color: #EFEE70;
    }
    100% {
      background-color: #C42328;
    }
  }

@keyframes text {

}