body{
  background: linear-gradient(135deg, #21ceec, #21b2ec, rgb(33, 104, 236));
  background-size: cover;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
form{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(49, 49, 49, 0.795);
  padding: 25px;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

input{
  padding: 5px;
  border: 2px solid white;
  border-radius: 5px;
  font-size: 17px;
  background: white;
  text-align: center;
}

input:focus{
  outline: none;
  border: 2px solid white;
}

h2{
  margin-bottom: 5px;
  margin-top: 0;
}

/* From Uiverse.io by vinodjangid07 */ 
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 20px;
  background-color: #006aff;
  border: 8px solid #c0dfff;
  color: white;
  gap: 8px;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s;
}
.text {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
}
.svg {
  padding-top: 5px;
  height: 100%;
  width: fit-content;
}
.svg svg {
  width: 40px;
  height: 20px;
}
.button:hover {
  border: 8px solid #b1d8ff;
  background-color: #1b7aff;
}
.button:active {
  border: 5px solid #c0dfff;
}
.button:hover .svg svg {
  animation: jello-vertical 0.9s both;
  transform-origin: left;
}

@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);
  }
}