body{
    position: relative;
}

.white{
    z-index: 1;
    height: 100vh;
    width: 100vw;
    background-color: white;
    margin-top: 0%;
    margin-left: 0%;
    display: block;
    transition: opacity 0.75s ease-in-out;
}

.title{
    margin-top: 23.2%;
    font-size: 400%;
    color: aliceblue;
    cursor: context-menu;
}

.textbox{
    width: 320px;
    height: 25px;
    border: 0px;
    transition-duration: 0.3s;
    cursor: pointer;
}

.textbox:hover{
    width: 320px;
    height: 34px;
    border: 0px;
    transition-duration: 0.1s;
}

.textbox:focus{
    width: 700px;
    height: 25px;
    border: 0px;
    transition-duration: 0.3s;
    cursor: auto;
}

.button {
    background-color: rgb(160, 29, 29);
    border: none;
    width: 25px;
    height: 25px;
    color: rgb(255, 255, 255);
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: help;
    transition-duration: 0.3s;
}

.button:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.4s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px); }
  10% { transform: translate(-1px, -1px); }
  20% { transform: translate(-1px, 0px); }
  30% { transform: translate(1px, 1px); }
  40% { transform: translate(1px, -1px); }
  50% { transform: translate(-1px, 1px); }
  60% { transform: translate(-1px, 1px); }
  70% { transform: translate(1px, 1px); }
  80% { transform: translate(-1px, -1px); }
  90% { transform: translate(1px, 1px); }
  100% { transform: translate(1px, -1px); }
}