* {
   font-family: "Space Mono", "Lucida Console", monospace;
}
#canvas {
    z-index: -100;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.8;
    background-color: #fff;
}
h1 {
    color: #00ff7b;
    font-size: 50px;
    margin-bottom: 0;
}
h2 {
    color: #f6fffa;
}
iframe {
    width: 70%;
}
body {
    text-align: center;
    color: #f6fffa;
}
.sounds {
    border-style: solid;
    border-color:#f6fffa;
    border-width: 1px;
    width: 55%;
    margin: 10px auto;
    padding: 5px 1px;
}

/* Shake */
img {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  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); }
}