/* Copyright 2018 Google LLC.
SPDX-License-Identifier: Apache-2.0 */

/* CSS files add styling rules to your content */

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  /*border: 1px solid #999;*/
}

body {
  font-family: Roboto, Arial;
  font-size: 0.8em;
  color: #666;
  overflow-y: hidden;
}

.icon {
  background-repeat: no-repeat;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  background-size: contain;
}

.icon.rain {
  background-image: url("https://assets.codepen.io/5928893/837e1dde-8f7c-4df4-8d84-9200a53f45cc_rain_s_cloudy.png");
}

.icon.sunny {
  background-image: url("https://assets.codepen.io/5928893/837e1dde-8f7c-4df4-8d84-9200a53f45cc_sunny.png");
}

.icon.pc {
  background-image: url("https://assets.codepen.io/5928893/837e1dde-8f7c-4df4-8d84-9200a53f45cc_partly_cloudy.png");
}

.icon.sshowers {
  background-image: url("https://assets.codepen.io/5928893/837e1dde-8f7c-4df4-8d84-9200a53f45cc_rain_s_cloudy.png");
}

.icon.cloudy {
  background-image: url("https://assets.codepen.io/5928893/837e1dde-8f7c-4df4-8d84-9200a53f45cc_cloudy.png");
}

.icon.thunder {
  background-image: url("https://assets.codepen.io/5928893/837e1dde-8f7c-4df4-8d84-9200a53f45cc_thunderstorms.png");
}

.weather-forecast {
  padding: 10px 10px 0 10px;
  display: inline-block;
}

/* Header row */

.location {
  font-size: 3em;
  color: #444;
}

.date {
}

.desc {
}

/* Current Weather Summary */
.current {
  overflow: auto;
  width: 100%;
  margin-bottom: 15px;
}

.current .visual {
  width: 50%;
  float: left;
}

.current .description {
  width: 50%;
  float: left;
}

/* Current Weather - Visual */

.visual .icon {
  width: 64px;
  height: 64px;
}

.temp {
  font-size: 2.5em;
  display: inline-block;
  vertical-align: top;
}

.scale {
  vertical-align: top;
  display: inline-block;
  margin-top: 6px;
  color: #888;
}

/* General Labels */

.wind:before {
  content: "Wind: ";
  color: #888;
}

.precip:before {
  content: "Precipitation: ";
  color: #888;
}

.humidity:before {
  content: "Humidity: ";
  color: #888;
}

.pollen:before {
  content: "Pollen Count: ";
  color: #888;
}

.pcount:before {
  content: "Pollen ";
  color: #888;
}

/* Seven Day Forecast */

.seven-day div {
  vertical-align: middle;
}

.seven-day-fc {
  margin: 0 -11px -1px -11px;
  padding: 10px;
}

.seven-day-fc div {
  display: inline-block;
}

.seven-day-fc .date {
  font-weight: bold;
  color: #444;
}

.seven-day-fc .icon {
  width: 50px;
  height: 50px;
}

.seven-day-fc .seven-day-temp {
  text-align: center;
}

.seven-day-fc .temp-high {
  color: #444;
}

.seven-day-fc .temp-low {
  color: #888;
}

.seven-day-fc .temp-low,
.seven-day-fc .temp-high {
  display: block;
}

.seven-day-fc .pcount {
  text-align: center;
}

@media (max-width: 600px) {
  .weather-forecast {
    width: 100%;
  }

  .seven-day-fc {
    border-top: 1px solid rgba(0, 0, 0, 0.2);
  }

  .seven-day-fc:last-of-type {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  }

  .seven-day-fc .date {
    width: 30%;
  }

  .seven-day-fc .seven-day-temp {
    width: 30%;
  }

  .seven-day-fc .pcount {
    width: 16%;
  }
}

@media (min-width: 601px) {
  body {
    font-size: 1em;
  }

  .weather-forecast {
    width: 100%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  }

  .seven-day-fc {
    display: inline-block;
    width: 13.5%;
    margin: 0;
    border: none;
    font-size: 0.8em;
  }

  .seven-day-fc div {
    display: block;
    text-align: center;
  }

  .seven-day-fc .date {
    text-align: center;
  }

  .seven-day-fc .temp-low,
  .seven-day-fc .temp-high {
    display: inline;
  }

  .seven-day-fc .seven-day-temp {
    font-size: 1.25em;
  }

  .seven-day-fc .icon {
    width: 64px;
    height: 64px;
  }
}

@media (min-width: 360px) {
  body {
    font-size: 1em;
  }
}

@media (min-width: 500px) {
  .seven-day-fc .temp-low,
  .seven-day-fc .temp-high {
    display: inline-block;
    width: 45%;
  }

  .seven-day-fc .seven-day-temp {
    margin-left: 5%;
  }

  .seven-day-fc .icon {
    width: 64px;
    height: 64px;
  }
}

@media (min-width: 700px) {
  .weather-forecast {
    width: 700px;
  }
}