@keyframes wobbleAnimation {
  0% { transform: translateX(0) rotate(0); }
  15% { transform: translateX(-25px) rotate(-5deg); }
  30% { transform: translateX(20px) rotate(3deg); }
  45% { transform: translateX(-15px) rotate(-3deg); }
  60% { transform: translateX(10px) rotate(2deg); }
  75% { transform: translateX(-5px) rotate(-1deg); }
  100% { transform: translateX(0) rotate(0); }
}

@keyframes buttonBorderAnimation {
  14% {border-color: red;}
  28% {border-color: orange;}
  42% {border-color:yellow;}
  56% {border-color: green;}
  70% {border-color: blue;}
  84% {border-color: indigo;}
  100% {border-color: violet;}
}

button {
  cursor: pointer;
  position: absolute;
  width: 250px;
  height: 50px;
  border-style: solid;
  border-radius: 5px;
  color: black;
  background-color: white;
  font-size: medium;
}

#Eaglercraft {
  left: 5%;
}

#Eaglercraft:hover {
    border-width: 5px;
    font-size: 20px;
    animation-name: buttonBorderAnimation, wobbleAnimation;
    animation-duration: 2s, 1s;
    animation-timing-function: ease;
    animation-iteration-count: infinite, 1;
    animation-direction: normal;
    animation-fill-mode: none;
}