html, body{
  font-family: 'Alata', sans-serif;
  background: #333;
  color: #ccc;
  text-align: center;
  margin: 0;
  padding: 0;
}

h1{
  background:#222;
  color:#e37ef2;
  margin: 0;
  padding:8px;
}

a {
  color: #e37ef2;
}

#instructions{
  margin:8px;
  padding:8px;
  background:#444;
}

#go-time {
  font-size: 2em;
  color: chartreuse;
  margin: 8px;
}

#button{
  background:#e37ef2;
  border:4px solid #222;
  padding:16px;
  color:#222;
  cursor:pointer;
  width:100px;
  margin: 16px auto;
}

#progress {
  margin: 8px;
}

#progress .outer{
  height:16px;
  width:256px;
  background:#444;
  margin: 0 auto;
}

#progress .inner{
  height:16px;
  background:#777;
}

#progress.go-time .inner{
  background:chartreuse;
}

#min-timer{
  font-family: Consolas, monaco, monospace;
  font-size:2.5em;
  color: #777;
}

#min-timer.go-time{
  color: chartreuse;
}

#max-timer.go-time{
  color: #e81341;
}

#max-timer{
  font-family: Consolas, monaco, monospace;
  font-size:1.5em;
  color: #666;
}

#footer {
  margin:8px;
  padding:8px;
  border-top:1px solid #222;
  font-size: .8em;
}