body {
  background-color: #1de9b6;
  color: #1a237e;
  font-family: sans-serif;
}

#container {
  width: 261px;
  margin: 100px auto;
  position: relative;
}

svg#lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 261px;
  height: 300px;
  -webkit-animation: spin 10s linear infinite;
  animation: spin 10s linear infinite;
}

svg#lines path {
  stroke: #01579b;
  stroke-width: 1px;
  stroke-dasharray: 20 10;
}

svg#lines path:nth-child(odd){
  -webkit-animation: dash-odd 5s linear infinite;
  animation: dash-odd 5s linear infinite;
}

svg#lines path:nth-child(even){
  -webkit-animation: dash-even 5s linear infinite;
  animation: dash-even 5s linear infinite;
}

@-webkit-keyframes spin { 
  100% { 
    -webkit-transform: rotate(360deg); 
  }
}

@-webkit-keyframes dash-odd {
  to {
    stroke-dashoffset: 300;
  }
}

@-webkit-keyframes dash-even {
  to {
    stroke-dashoffset: -300;
  }
}


@keyframes spin { 
  100% { 
    transform:rotate(360deg); 
  }
}

@keyframes dash-odd {
  to {
    stroke-dashoffset: 300;
  }
}

@keyframes dash-even {
  to {
    stroke-dashoffset: -300;
  }
}


svg#tri {
  position: absolute;
  top: 84px;
  left: 23px;
  width: 222px;
}

svg#tri polygon {
  fill: #1a237e;
}

#container span {
  color: #1de9b6;
  text-transform: uppercase;
  font-size: 20px;
  text-align: center;
  display: block;
  width: 100%;

  position: absolute;
  top: 130px;
  left: 0;
}

#colors, #black {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 12px;
  cursor: pointer;
}

#colors {
  display: none;
}