body {
  margin: 0;
  padding:0;
  text-align: center;
  color: #667766;
  font-size: 4vw;
  background-color: black;
}
body.morning {
  background-color: #7db9e8;
}
div.morning {
  height: 100vh;
  margin: 0;
  padding: 0;
  color: white;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0a3566+0,2989d8+50,7db9e8+77,e2b97a+92,e58a60+100 */
  background: #0a3566; /* Old browsers */
  background: -moz-linear-gradient(top, #0a3566 0%, #2989d8 50%, #7db9e8 77%, #e2b97a 92%, #e58a60 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #0a3566 0%,#2989d8 50%,#7db9e8 77%,#e2b97a 92%,#e58a60 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #0a3566 0%,#2989d8 50%,#7db9e8 77%,#e2b97a 92%,#e58a60 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a3566', endColorstr='#e58a60',GradientType=0 ); /* IE6-9 */
}
body.day {
  background-color: #7db9e8;
}
div.day {
  height: 80vh;
  margin: 0;
  padding: 0;
  color: white;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,2989d8+50,7db9e8+100 */
  background: #1e5799; /* Old browsers */
  background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #7db9e8 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}
body.evening {
  background-color: #db803b;
}
div.evening {
  height: 80vh;
  margin: 0;
  padding: 0;
  color: white;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#85a8c6+0,e0a767+73,d69851+90,db803b+100 */
  background: #85a8c6; /* Old browsers */
  background: -moz-linear-gradient(top, #85a8c6 0%, #e0a767 73%, #d69851 90%, #db803b 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #85a8c6 0%,#e0a767 73%,#d69851 90%,#db803b 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #85a8c6 0%,#e0a767 73%,#d69851 90%,#db803b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#85a8c6', endColorstr='#db803b',GradientType=0 ); /* IE6-9 */
}
body.lateEvening {
  background-color: midnightblue;
}
body.night {
  background-color: black;
}
div {
  margin:0;
  padding:0;
}
h2 {
  margin:0;
  padding:0;
  padding-top: 2vw;
  margin-bottom:-5vw;
  font-size: 5vw;
}
.currentTime {
  font-size: 23vw;
}
.daytime {
  font-size: 2.5vw;
}
.target .day {
 float: left;
 left: 0;
}
.target .month {
 float: right;
 right: 0;
}
.target {
 font-size: 16vw;
 position: relative;
 margin: 0;
 margin-top:-5vw;
}
.localTime {
 position: absolute;
 top: 0;
 right: 0;
 text-align: right;
}
.midnightTime {
 position: absolute;
 top: 0;
 left: 0;
 text-align: left;
}
.caption {
 margin: 0;
 padding: 0;
 margin-top: -5vw;
 font-size: 1.5vw;
}
.time_caption.caption {
 margin-top: -1vw;
}
.subscript {
 font-size: 0.5em;
}
.subscript.long {
 font-size: 0.3em;
}
.timezones {
  font-size: 1vw;
}