html {
  display: table;
  width: 100%
}

body {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  font-family: sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #444;
  background-color: #111418;
  perspective: 1000
}

body,
html {
  width: 100%;
  height: 100%;
  overflow: hidden
}

canvas {
  image-rendering: auto;
  image-rendering: crisp-edges;
  image-rendering: pixelated
}

button {
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  padding: 8px 16px;
  color: #e5e2e2;
  text-shadow: 0 1px 2px hsla(0, 0%, 100%, .15);
  background-color: #008cba;
  background-image: linear-gradient(#008cba, #007bb5);
  box-shadow: inset 0 0 2px hsla(0, 0%, 100%, .15);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s ease-out
}

button:hover {
  transform: scale(1.05);
  background-image: linear-gradient(#009ce0, #008cba);
}
  button:active {
    transform: scale(.95);
    opacity: .5
  }
  audio {
    position: absolute;
    width: 0;
    height: 0;
    visibility: hidden
  }
  @keyframes Cue-In {
    0% {
      opacity: 0;
      transform: scale(.1) rotateX(45deg)
    }
    to {
      transform: scale(1) rotateX(0)
    }
  }
  .cue-in {
    animation: Cue-In 2s ease-in-out
  }