html, body {
  background: FFFFFF;
  font-family: Verdana, sans-serif;
  height: 100%;
  margin: 0;
}

.eric {
  top: 5%;
  left: 5%;
  max-width: 100px;
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 1s;

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

.drumkit {
  max-width: 50%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
}

.howdoesthiswork {
  background: rgb(255, 255, 255);
  padding: 10px; 
  font-size: 0.6vw;
}

.wrapper {
  min-height: 100%;
  overflow: hidden;
  margin-bottom: -50px;
}

.footer {
  height: 50px;
  margin-top: -50px;
  text-align: center;
}

table {
  font-size: 0.6vw;
}

h3 {
  font-size: 0.7vw;
}
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-2px, 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); }
}