html {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
body {
  background-color: #55bbbb;
  padding-top: 100px;
}
#clock {
  position: relative;
  width: auto;
  padding: 10px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
}
#numbers {
  box-shadow: 0px 5px 5px 0px rgba(70, 177, 177, 0.85);
}
@media screen and (max-width: 649px) {
  #numbers {
    font-size: 150%;
    font-weight: 100;
    height: 25px;
  }
  #numbers .number {
    top: 7.5%;
  }
}
@media screen and (min-width: 650px) {
  #numbers {
    font-size: 300%;
    font-weight: 100;
    height: 50px;
  }
  #numbers .number {
    top: 30%;
  }
}
@media screen and (min-width: 900px) {
  #numbers {
    font-size: 450%;
    font-weight: 100;
    height: 70px;
  }
  #numbers .number {
    top: 35%;
  }
}
.number-box {
  background: #eeffff;
  position: relative;
  display: inline-block;
  width: 8.33333333%;
  height: 100%;
  text-align: center;
}
.number {
  position: relative;
  height: 100%;
  color: #55bbbb;
}
.line {
  position: absolute;
  width: 1px;
  height: 30px;
  background: #55bbbb;
}
.time_bar {
  height: 10px;
  background: white;
  width: 0%;
  box-shadow: 0px 5px 5px 0px rgba(70, 177, 177, 0.85);
}
#seconds {
  background: #ccffff;
  transition: width 0.2s linear;
}
#minutes {
  background: #aaffff;
  transition: width 0.5s linear;
}
#hours {
  background: #88eeee;
  transition: width 1s linear;
}