html, body, #canvas {
  width: 100%;
  height: 100%;
}

.butterviz {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  animation: rainbow-bg 10s linear;
  animation-iteration-count: infinite;
}

#loader {
  font-size: xx-large;
  font-family: 'Bungee Spice';
  text-align: center;
  position: absolute;
  transition: all .75s ease;
  background-color: rgba(0, 0, 0, 0.75);
  visibility: hidden;
  opacity: 0;
}

#loader p {
  padding: 10rem 5rem 1rem 5rem;
  background: url(/static/raccoon.gif);
  background-repeat: no-repeat;
  background-position: top center;
}

#loader.show {
  visibility: visible;
  opacity: 1;
}

#the-button {
  animation: throb 2.5s ease-in-out infinite alternate;
  font-family: 'Bungee Spice', cursive;
  font-size: 6em;
  text-align: center;
}

#metadata {
  position: absolute;
  bottom: 0%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  color: #fff;
  font-family: 'Bungee Spice', sans-serif;
  text-align: center;
  width: 100%;
  padding-top: 3rem;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  padding-bottom: 3rem;
}

#title {
  font-size: 2rem;
}

@keyframes rainbow-bg{
    100%,0%{
      background-color: rgb(255,0,0);
    }
    8%{
      background-color: rgb(255,127,0);
    }
    16%{
      background-color: rgb(255,255,0);
    }
    25%{
      background-color: rgb(127,255,0);
    }
    33%{
      background-color: rgb(0,255,0);
    }
    41%{
      background-color: rgb(0,255,127);
    }
    50%{
      background-color: rgb(0,255,255);
    }
    58%{
      background-color: rgb(0,127,255);
    }
    66%{
      background-color: rgb(0,0,255);
    }
    75%{
      background-color: rgb(127,0,255);
    }
    83%{
      background-color: rgb(255,0,255);
    }
    91%{
      background-color: rgb(255,0,127);
    }
}
@keyframes throb{
    from{
      transform: scale(1.0);
    }
    to {
      transform: scale(0.75);
    }
}