@import url("https://fonts.googleapis.com/css2?family=Vina+Sans&display=swap");
html {
  background-color: #C5FFF8;
  height: 100%;
  width: 100%;
  top: 0%;
  left: 0%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

body {
  width: 75vw;
  height: 75vh;
  padding: 0px;
  margin: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: "Vina Sans", sans-serif;
}

button {
  font-family: "Vina Sans", sans-serif;
  font-size: x-large;
  height: 75px;
  width: 30%;
  outline: none;
  background-color: #5FBDFF;
  border: 0px solid;
  border-radius: 15px;
  margin: 25px;
}
@media screen and (max-width: 720px) {
  button {
    font-size: larger;
    width: 45%;
  }
}

.jello-vertical:hover {
  animation: jello-vertical 0.9s both;
}
@keyframes jello-vertical {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(0.75, 1.25, 1);
  }
  40% {
    transform: scale3d(1.25, 0.75, 1);
  }
  50% {
    transform: scale3d(0.85, 1.15, 1);
  }
  65% {
    transform: scale3d(1.05, 0.95, 1);
  }
  75% {
    transform: scale3d(0.95, 1.05, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}
.scale-out-center:active {
  animation: scale-out-center 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
@keyframes scale-out-center {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 1;
  }
}
.scale-in-center {
  animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes scale-in-center {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}/*# sourceMappingURL=style.css.map */