body {
  background-color: #000;
}

#output {
  width: 300px;
  height: 130px;
  border: 1px solid #666;
  font-size: 2.5rem;
  font-family: Verdana;
  text-align: center;
  padding-top:2rem;
  background-color: #baffc9;
}

.small {
  font-size: 1.2rem;
}

#timer {
  width: 302px;
  height: 20px;
  background-color: #666;
  font-family: Verdana;
  font-size: 0.8rem;
  padding-top: 4px;
}

#timertext {
  position:absolute;
  left: 20px;
}

.color-1 {
    background-color: #ffb3ba !important;
}

.color-2 {
  background-color: #ffdfba !important;
}

.color-3 {
  background-color: #ffffba !important;
}

.color-4 {
  background-color: #baffc9 !important;
}

.color-6 {
  background-color: #bae1ff !important;
}


.freq-1 {
    animation-name: animation_blink;
    animation-timing-function: ease-in;
    animation-duration: 0.2s; 
    animation-iteration-count: infinite;
    background-color: #ffb3ba !important;
}

.freq-2 {
    animation-name: animation_blink;
    animation-timing-function: ease-in;
    animation-duration: 0.4s; 
    animation-iteration-count: infinite;
  background-color: #ffdfba !important;
}

.freq-3 {
    animation-name: animation_blink;
    animation-timing-function: ease-in;
    animation-duration: 0.6s; 
    animation-iteration-count: infinite;
  background-color: #ffffba !important;
}

.freq-4 {
    animation-name: animation_blink;
    animation-timing-function: ease-in;
    animation-duration: 0.8s; 
    animation-iteration-count: infinite;
  background-color: #baffc9 !important;
}

.freq-6 {
    animation-name: animation_blink;
    animation-timing-function: ease-in;
    animation-duration: 1.2s; 
    animation-iteration-count: infinite;
  background-color: #bae1ff !important;
}

@keyframes animation_blink {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }    
}