@keyframes fancy {
  0%     { transform: rotateX(  0deg) rotateZ(  0deg); }
  33%    { transform: rotateX(240deg) rotateZ(120deg); }
  66%    { transform: rotateX(480deg) rotateZ(240deg); }
  100%   { transform: rotateX(720deg) rotateZ(360deg); }
}

@keyframes fade {
  0%     { background-color: #660000; }
  16.67% { background-color: #666600; }
  33.33% { background-color: #006600; }
  50%    { background-color: #006666; }
  66.67% { background-color: #000066; }
  83.33% { background-color: #660066; }
  100%   { background-color: #660000; }
}

html, body {
  margin: 0;
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  height: 100%;
}

body {
  animation: fade 10s infinite linear;
  overflow: hidden;
  color: #fafafa;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 100%;
}

#fancy {
  display: inline-block;
  animation: fancy 10s infinite linear;
}

audio {
  display: block;
}