/* Generated by https://scss.premo.biz/scss2css.php 
Uses scssphp-1.6.0 - https://scssphp.github.io/scssphp/ */

body {
  font-family: 'Titillium Web', Verdana;
  color: #FFFFFF;
  background-color: #000000;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}
.square {
  position: relative;
  width: 100vmin;
  height: 100vmin;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  margin: 0 auto;
  overflow: hidden;
}
.square .time {
  position: relative;
  width: 100%;
  height: 28%;
  font-size: 34vmin;
  line-height: 26vmin;
}
.square .time div {
  float: left;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.square .time .hours {
  position: absolute;
  left: 0;
  width: 46%;
  height: 100%;
  text-align: right;
}
.square .time .colon {
  width: 8%;
  height: 100%;
  position: absolute;
  left: 46%;
  font-size: 6vmin;
  line-height: 6vmin;
  text-align: center;
}
.square .time .colon .ap {
  position: absolute;
  top: 23%;
  width: 100%;
}
.square .time .colon .m {
  position: absolute;
  bottom: 23%;
  width: 100%;
}
.square .time .minutes {
  position: absolute;
  right: 0;
  width: 46%;
  height: 100%;
}
.square .time .ampm {
  font-size: 6vmin;
  position: absolute;
  display: block;
  float: none;
}
.square .date {
  position: relative;
  width: 100%;
  height: 10%;
  display: inline-flex;
  justify-content: space-around;
  font-size: 9.8vmin;
  line-height: 10vmin;
}
.square .city_state {
  width: 100%;
  text-align: center;
  height: 5%;
  font-size: 5vmin;
  line-height: 4.8vmin;
  z-index: 100;
}
.square .city_state .city_state_refresh {
  cursor: pointer;
}
.square .weather_current {
  position: relative;
  width: 100%;
  height: 28%;
  font-size: 34vmin;
  line-height: 26vmin;
  z-index: 90;
}
.square .weather_current img {
  position: relative;
  width: 32vmin;
  height: 32vmin;
  top: -7%;
}
.square .weather_current .temp {
  position: absolute;
  right: 3vmin;
  top: 0;
}
.square .weather_future {
  position: relative;
  width: 100%;
  height: 21%;
  display: inline-flex;
  justify-content: space-between;
  font-size: 3.4vmin;
  line-height: 4vmin;
}
.square .weather_future .day {
  width: 18%;
  text-align: center;
  position: relative;
}
.square .weather_future img {
  width: 14vmin;
  height: 14vmin;
  position: relative;
  top: -0.4vmin;
}
.square .weather_future .temp {
  position: relative;
  top: -8%;
}
.square .iphone .weather_future .temp {
  top: auto;
  bottom: 2vmin;
}
.square .limit_indicator {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 3.4vmin;
  line-height: 4vmin;
  display: none;
}
.square .share_geo_prompt {
  position: absolute;
  top: 42%;
  left: 0;
  width: 100%;
  height: 54%;
  box-sizing: border-box;
  padding-top: 10%;
  font-size: 6vmin;
  text-align: center;
  background-color: #000000;
  display: none;
  z-index: 200;
}
.square .share_geo_prompt .share_geo_prompt_text {
  margin-bottom: 2vmin;
}
.square .share_geo_prompt .share_geo_button_yes, .square .share_geo_prompt .share_geo_button_no {
  color: #000000;
  font-family: 'Titillium Web', Verdana;
  font-size: 9vmin;
  text-transform: uppercase;
  text-align: center;
  box-sizing: border-box;
  width: 25vmin;
  height: 15vmin;
  margin: 0 3vmin;
  padding-top: 0.6vmin;
  border-radius: 1.5vmin;
  background-color: #FFFFFF;
  display: inline-block;
  cursor: pointer;
}
.square .about_text {
  text-transform: none;
  font-size: 2.2vmin;
  padding: 0 2vmin 10vmin;
}
.square .about_text a {
  text-decoration: none;
  color: #FFEE77;
}
.square .about_text a:hover {
  text-decoration: underline;
}
.about_page .date {
  padding-top: 14vmin;
  font-size: 9.2vmin;
}
.about {
  top: 0;
  font-size: 1.7vmin;
}
.about a {
  text-decoration: none;
  color: #FFEE77;
}
.about a:hover {
  text-decoration: underline;
}