$body-bg: #ecf0f1;
$dorito: #2c3e50;
$speed: 1s;
$delay: $speed/-2;
$size: 40px;

body {
  background: $body-bg;
  flex-direction: column;
  color: $dorito;
}

label {
  display: block;
  margin-bottom: 3em;
  font-size: $size/2.5;
  font-family: "Monaco", monospace;
}
select {
  font-size: 1em;
  font-family: inherit;
  background: $body-bg;
  color: $dorito;
  border: 1px solid $dorito;
  height: 2em;
}
.triangles {
  width: 7em;
  height: 2em;
  font-size: $size;
}
.triangle {
  width: 0; height: 0;
  border-width: 0 0.57em 1em;
  border-color: transparent transparent $dorito;
  border-style: solid;
  display: inline-block;
  animation: flip $speed infinite linear;
  &:nth-child(even) {
    transform: rotate(2turn);
    animation-delay: $delay;
  }
  &:nth-child(n+6) {
    border-bottom-color: rgba($dorito,0.8);
  }
}

@keyframes flip {
  to { transform: rotate(1turn); }
}