html {
  height: 100%; }

body {
  background: #393E41;
  color: white;
  font-size: 16px; }

a {
  color: #1098F7; }
  a:hover {
    color: white; }

.loading {
  padding-top: 12em;
  position: relative; }
  .loading .spinner {
    top: 115% !important; }
  .loading .browser-check {
    font-size: 14px;
    position: absolute;
    top: 0;
    width: 100%; }

.current-temp-wrap {
  margin-top: 1em;
  text-align: center; }
  .current-temp-wrap .location .date {
    display: inline-block;
    margin: 0 0.5ex; }
  .current-temp-wrap .temp-block {
    position: relative;
    margin: 0 auto;
    max-width: 20em; }
    .current-temp-wrap .temp-block h1 {
      font-size: 5em; }
    .current-temp-wrap .temp-block .unit-toggle {
      font-size: 1.5em;
      position: absolute;
      top: 0.5ex;
      right: 1em; }
      .current-temp-wrap .temp-block .unit-toggle a {
        color: #1098F7;
        margin-right: 5px; }
        .current-temp-wrap .temp-block .unit-toggle a:hover {
          color: white;
          cursor: pointer;
          text-decoration: none; }
      .current-temp-wrap .temp-block .unit-toggle span {
        font-size: 1em; }
  .current-temp-wrap .description-wrap .icon-wrap {
    position: relative;
    margin: 0 auto;
    max-width: 15em; }
    .current-temp-wrap .description-wrap .icon-wrap i {
      font-size: 5em;
      left: 0; }
    .current-temp-wrap .description-wrap .icon-wrap p {
      font-size: 1.5em;
      margin-top: 1ex; }
  .current-temp-wrap .description-wrap .weather-stat-wrap {
    position: relative;
    margin-top: 2ex; }
    .current-temp-wrap .description-wrap .weather-stat-wrap .weather-stat {
      height: 3.5ex;
      margin: 0 auto;
      max-width: 15em;
      position: relative;
      text-transform: unset; }
      .current-temp-wrap .description-wrap .weather-stat-wrap .weather-stat p {
        position: absolute; }
      .current-temp-wrap .description-wrap .weather-stat-wrap .weather-stat .stat-title {
        left: 0; }
      .current-temp-wrap .description-wrap .weather-stat-wrap .weather-stat .stat-value {
        right: 0; }

.forecast-wrap {
  margin: 1em 0 0 0;
  text-align: center; }
  .forecast-wrap .day-block-wrap {
    border: 1px solid white;
    margin: 1ex; }
  .forecast-wrap .day-block {
    text-align: center; }
    .forecast-wrap .day-block div {
      float: none; }
    .forecast-wrap .day-block .day-name {
      display: inline-block; }
      .forecast-wrap .day-block .day-name h3 {
        font-size: 1.5em; }
    .forecast-wrap .day-block .img-wrap {
      display: inline-block; }
      .forecast-wrap .day-block .img-wrap i {
        font-size: 2em; }
    .forecast-wrap .day-block .high-low {
      display: inline-block;
      padding: 0;
      position: relative; }
      .forecast-wrap .day-block .high-low h5 {
        display: inline-block;
        font-size: 1.5em;
        margin-right: 0.5ex; }
      .forecast-wrap .day-block .high-low .low {
        color: gray; }

.location-denied {
  text-align: center;
  background: black; }
  .location-denied p {
    font-size: 12px;
    margin: 0 auto;
    padding: 1em;
    width: 100%; }

.credits {
  text-align: center;
  width: 100%; }
  .credits a {
    color: #1098F7; }
  .credits.load-fix {
    bottom: 0;
    position: absolute; }

@media (min-width: 768px) {
  .forecast-wrap .day-block {
    display: inline-block;
    float: none;
    padding: 1ex 0;
    width: 12%; }
    .forecast-wrap .day-block .day-name h3 {
      margin-top: 10px; }
    .forecast-wrap .day-block .img-wrap {
      margin-top: 1ex;
      margin-bottom: 1.5ex; }
    .forecast-wrap .day-block .high-low {
      padding: 0; }
      .forecast-wrap .day-block .high-low h3 {
        font-size: 1.5em; }
      .forecast-wrap .day-block .high-low h5 {
        font-size: 1em;
        padding-left: 1ex; }
  .credits {
    bottom: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%); } }

/*  Firefox  */
@-moz-document url-prefix() {}