treasurehunt.css

h1{
  font-family: 'Permanent Marker', cursive;
}
ul{
background-color: #cccccc;
}
body {
  background-image: url("https://images.unsplash.com/photo-1499516387605-0d549f707bd1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2700&q=80");
  background-color: #cccccc;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

table{
  display: flex;
  justify-content: center;
}

td{
  padding: 5px;
  border: 3px goldenrod;
  border-style: solid;
}

td:hover {
  background-color: darkblue;
  animation: whatever-we-want 1s infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

@keyframes whatever-we-want {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

footer{
  background-color: inherit;
}