@keyframes move {
  from {opacity: 0%; top: -200%;}
  to {}
}

@keyframes moveShadow {
  from {text-shadow: 0.5vh 325vh  rgb(0, 0, 0);}
  to {text-shadow: 1vh 1vh rgb(0, 0, 0,);}
}

@keyframes buttonHover {
  from {}
  to {rotate: 360deg; border-color: greenyellow; background-color: green;}
}

h1 {
  color: lightgrey;
  font-family: Comic Sans MS;
  border-style: groove;
  border-color: darkslategrey;
  background-color: rgb(37, 37, 37);
  margin-top: 30%;
}

p {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  color: white;
  font-size: 250%;
  animation-name: moveShadow;
  text-shadow: 0.5vh 0.5vh rgba(0, 0, 0, 0.5);
  animation-duration: 1s;
}

p2 {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  color: white;
  font-size: 200%;
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  animation-name: move;
  animation-duration: 1s;
}

body {
  background-color: #23272A;
}

img {
  height: 25%;
  width: 25%;
  margin: 1vh;
  border-style: outset;
  border-color: red;
}

img:hover {
  animation: buttonHover 1s forwards;
}