@keyframes navDown {
  to {
    top: 0;
  }
}

@keyframes ballToSquare {
  0% {
    transform-origin: 50% 50%;
    top: 50%;
    border-radius: 50%;
  }
  50% {
    transform-origin: 50% 50%;
    border-radius: 0;
  }
  100% {
    transform-origin: 50% 50%;
    top: calc(50% - 8vh);
    border-radius: 0;
    height: 16vh;
    width: 16vh;
  }
}

@keyframes bounceBall {
  0% {
    transform: scaleY(3);
  }
  25% {
    top: 70%;
    transform: scaleY(.5);
  }
  50% {
    top: 25%;
    transform: scaleY(1) scaleX(.85);
  }
  100% {
    top: 55%;
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@keyframes float {
  from {
    top: -10vh;
    transform: scale(1, .65);
  }
  25% {
    transform: scale(.65, 1);
  }
  to {
    top: 60vh;
    transform: scale(1, .65);
  }
}

@keyframes gradientSlide {
  0% {
    background-color: #282a2d;
  }
  30% {
    background-color: #fd0202;
  }
  60% {
    background-color: #56ff00;
  }
  100% {
    background-color: #00a8ff;
  }
}

@keyframes nameToCorner {
  to {
    top: 4vw;
    font-size: 4vh;
  }
}

@keyframes nameSubToCorner {
  to {
    top: 13vh;
    font-size: 2vh;
  }
}

@keyframes pulse {
  from {
    top: 0;
  }
  to {
    top: 1vh;
  }
}

@keyframes squareSnapIntoRect {
  to {
    transform: scale(.5);
  }
}

@keyframes rectSnapIntoBar {
  from {
    width: 16vw;
    right: calc(50% - 8vw);
    transform: scale(.5);
  }
  50% {
    width: 24vw;
    transform: scale(1) scaleX(2.125) scaleY(.0125);
    background-color: white;
  }
  100% {
    width: 24vw;
    transform: scale(1) scaleX(2.125) scaleY(.0125);
    background-color: white;
    opacity: 0;
  }
}

@keyframes barToBorder {
  to {
    transform: scale(1) scaleX(1) scaleY(1);
    background-color: rgba(255, 255, 255, 0);
    border: 1px solid #333;
    width: 50vw;
    height: 30vh;
    top: 60vh;
  }
}