@-webkit-keyframes stop {
  70% {
    border-radius: 6px;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60px;
    height: 60px;
    margin: -30px -30px;
  }
  100% {
    border-radius: 6px;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 64px;
    height: 64px;
    margin: -32px -32px;
  }
}
@-moz-keyframes stop {
  70% {
    border-radius: 6px;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60px;
    height: 60px;
    margin: -30px -30px;
  }
  100% {
    border-radius: 6px;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 64px;
    height: 64px;
    margin: -32px -32px;
  }
}
@-o-keyframes stop {
  70% {
    border-radius: 6px;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60px;
    height: 60px;
    margin: -30px -30px;
  }
  100% {
    border-radius: 6px;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 64px;
    height: 64px;
    margin: -32px -32px;
  }
}
@keyframes stop {
  70% {
    border-radius: 6px;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60px;
    height: 60px;
    margin: -30px -30px;
  }
  100% {
    border-radius: 6px;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 64px;
    height: 64px;
    margin: -32px -32px;
  }
}
body {
  overflow: hidden;
  /*background: #000;*/
}
body .container {
  z-index: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 170px;
  height: 170px;
  margin: -85px -85px;
}
body .container #btn1,
body .container #btn2,
body .container #btn3,
body .container #btn4,
body .container #btn5 {
  display: none;
}
body .container #btn1 + label:before,
body .container #btn2 + label:before,
body .container #btn3 + label:before,
body .container #btn4 + label:before,
body .container #btn5 + label:before{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 130px;
  height: 130px;
  margin: -59px -59px;
  content: '';
  -webkit-transform: translate(-6px, -6px);
  -ms-transform: translate(-6px, -6px);
  transform: translate(-6px, -6px);
  border-radius: 50%;
  border: 6px solid #343a40;
  cursor: pointer;
}
body .container #btn1 + label:after,
body .container #btn2 + label:after,
body .container #btn3 + label:after,
body .container #btn4 + label:after,
body .container #btn5 + label:after{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  margin: -50px -50px;
  content: '';
  border-radius: 50px;
  background: #e80415;
  cursor: pointer;
}
body .container #btn1:checked + label:after,
body .container #btn2:checked + label:after,
body .container #btn3:checked + label:after,
body .container #btn4:checked + label:after,
body .container #btn5:checked + label:after{
  -webkit-animation: stop 0.5s infinite cubic-bezier(0.4, -0.9, 0.9, 1);
  -moz-animation: stop 0.5s infinite cubic-bezier(0.4, -0.9, 0.9, 1);
  -o-animation: stop 0.5s infinite cubic-bezier(0.4, -0.9, 0.9, 1);
  animation: stop 0.5s infinite cubic-bezier(0.4, -0.9, 0.9, 1);
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  background: #AAB2BD;
}

body #timer {
    font-size: 6em;
    position: absolute;
    align-self: center;
    top: 75%;
    z-index: 9;
}

.animateHue {
  position: absolute;
}
canvas#freq {
  position: absolute;
  top: 0;
}