@import url(http://fonts.googleapis.com/css?family=Quicksand:400,700);

#wake-container {
  padding-bottom: 5px;
}

.day-bookend label {
  padding-left: 6px;
  font-family: 'Quicksand', sans-serif;
  vertical-align: bottom;
}

.now {
  fill: #e3dc29;
}

.quicksand {
  font-family: 'Quicksand', sans-serif;
}

.digital-time {
  fill: rgba(50, 50, 50, 1);
}

.sun-arc {
  fill: rgba(219, 219, 49, 0.4)
}

.sleep-arc {
  fill: rgb(81, 85, 165);
}

.day-arc {
	fill: #70a6d5;
}

.back {
  fill: rgba(0, 0, 0, 0.13);
}

html {
  background: url("background.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.clock-wrapper {
  margin: 0 auto;
  padding-top: 40px;
}

@media only screen and (min-width: 240px) and (max-width: 650px) and (-webkit-min-device-pixel-ratio: 2) {

  html {
    background: url("mobile-background.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

}