:root {
  --white: #fafafa;
  --white-light: rgba(250,250,250,0.75);
  --blue: #0083b0;
  --light-blue: #7dc5db;
  --bar-height: 1.6rem; }

@-webkit-keyframes reveal {
  0% {
    -webkit-transform: translateY(-1rem);
    transform: translateY(-1rem);
    opacity: 0; }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1; } }

@keyframes reveal {
  0% {
    -webkit-transform: translateY(-1rem);
    transform: translateY(-1rem);
    opacity: 0; }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1; } }

/* https://google-webfonts-helper.herokuapp.com/fonts */
@font-face {
  font-family: 'Kumbh Sans';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/kumbh-sans-v1-latin-regular.eot");
  /* IE9 Compat Modes */
  src: local("Kumbh Sans Regular"), local("KumbhSans-Regular"), url("../fonts/kumbh-sans-v1-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/kumbh-sans-v1-latin-regular.woff2") format("woff2"), url("../fonts/kumbh-sans-v1-latin-regular.woff") format("woff"), url("../fonts/kumbh-sans-v1-latin-regular.ttf") format("truetype"), url("../fonts/kumbh-sans-v1-latin-regular.svg#KumbhSans") format("svg");
  /* Legacy iOS */ }

html {
  font-size: 62.5%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  html * {
    -webkit-box-sizing: inherit;
    box-sizing: inherit; }

body {
  background: #111;
  color: var(--white);
  font-family: "Kumbh Sans", sans-serif;
  font-size: 2rem;
  line-height: 1; }

img {
  max-width: 100%; }

.page-container {
  width: 100%;
  max-width: 45rem;
  padding: 2rem;
  margin: 0 auto; }

.main {
  padding: 4rem 3rem;
  border-radius: 2rem;
  background: #00b4db;
  background: -webkit-gradient(linear, left top, right top, from(#0083b0), to(#00b4db));
  background: linear-gradient(to right, #0083b0, #00b4db);
  -webkit-box-shadow: 0.2rem 0.2rem 8rem rgba(255, 235, 255, 0.2);
  box-shadow: 0.2rem 0.2rem 8rem rgba(255, 235, 255, 0.2); }

.content-info {
  padding: 1.5rem 3rem;
  font-size: 1.1rem;
  color: var(--white-light); }
  .content-info p {
    margin: 0 0 0.5em; }
  .content-info a {
    color: var(--white-light); }

.current {
  display: grid;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  grid-template-columns: 1fr 2fr;
  width: 25rem;
  margin: 0 auto 3rem;
  text-align: center; }
  .current__condition-icon {
    position: relative;
    top: -0.5rem;
    font-size: 8rem; }
  .current__temp {
    font-size: 8rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
  .current__location {
    font-size: 2rem;
    margin-bottom: 0.5em;
    grid-column: 1 / span 2; }
  .current__condition-text {
    font-size: 1.4rem;
    line-height: 1.4;
    grid-column: 1 / span 2; }
    .current__condition-text .wi {
      margin-left: .2em; }

.forecast {
  --range-min: 0;
  --range-max: 120;
  display: none; }
  .forecast.forecast--active {
    display: block;
    -webkit-animation: reveal 300ms ease-out;
    animation: reveal 300ms ease-out; }
  .forecast__day {
    display: grid;
    grid-template-columns: 2.5rem 5rem 5rem 1fr;
    margin: 0 0 1rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 2rem; }
  .forecast__icon {
    position: relative;
    top: -0.1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 1.5rem; }
  .forecast__precipitation-chance {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    top: 0.2rem;
    font-size: 1.1rem; }
    .forecast__precipitation-chance .wi {
      position: relative;
      top: -0.1rem;
      font-size: 1.6rem;
      color: var(--light-blue);
      margin-right: 0.2em; }
  .forecast__day-name {
    position: relative;
    top: 0.1rem;
    font-size: 1.3rem;
    padding: .4rem; }
  .forecast__temp-value {
    position: absolute;
    top: calc(50% - 0.3em);
    font-size: 1.1rem; }
    .forecast__temp-value--min {
      right: calc(100% + 0.3em); }
    .forecast__temp-value--max {
      left: calc(100% + 0.3em); }
  .forecast__temp-range {
    position: relative;
    padding: 0 2rem; }
  .forecast__temp-bar {
    display: block;
    height: calc(var(--bar-height));
    border-radius: calc(var(--bar-height) / 2);
    background: var(--white);
    position: relative;
    left: calc( (var(--min) - var(--range-min)) / (var(--range-max) - var(--range-min)) * 100%);
    width: calc( (var(--max) - var(--min)) / (var(--range-max) - var(--range-min)) * 100%); }

.today {
  --range-min: 0;
  --range-max: 120;
  --row-height: 2.5rem;
  display: none;
  --range-max: 0; }
  .today.forecast--active {
    display: block;
    -webkit-animation: reveal 300ms ease-out;
    animation: reveal 300ms ease-out; }
  .today[data-display="precipitation"] .hour__value.hour__value--precip {
    display: block; }
  .today[data-display="precipitation"] .hour__bar {
    --value: var(--value-precip);
    --range-max: var(--range-max-precip);
    --range-min: var(--range-min-precip); }
  .today[data-display="temp-real"] .hour__value.hour__value--temp-real {
    display: block; }
  .today[data-display="temp-real"] .hour__bar {
    --value: var(--value-temp-real);
    --range-max: var(--range-max-temp-real);
    --range-min: var(--range-min-temp-real); }
  .today[data-display="temp-feel"] .hour__value.hour__value--temp-feel {
    display: block; }
  .today[data-display="temp-feel"] .hour__bar {
    --value: var(--value-temp-feel);
    --range-max: var(--range-max-temp-feel);
    --range-min: var(--range-min-temp-feel); }
  .today[data-display="wind"] .hour__value.hour__value--wind {
    display: block; }
  .today[data-display="wind"] .hour__bar {
    --value: var(--value-wind);
    --range-max: var(--range-max-wind);
    --range-min: var(--range-min-wind); }
  .today .hour {
    --precipitation-width: 0.8rem;
    display: grid;
    grid-template-columns: var(--precipitation-width) 5.25rem 1fr;
    margin: 0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: var(--row-height); }
    .today .hour--first .hour__precipitation {
      border-radius: calc(var(--precipitation-width) / 2) calc(var(--precipitation-width) / 2) 0 0; }
    .today .hour--last .hour__precipitation {
      border-radius: 0 0 calc(var(--precipitation-width) / 2) calc(var(--precipitation-width) / 2); }
    .today .hour--day {
      text-align: center;
      font-size: 1.3rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
      .today .hour--day span {
        position: relative;
        top: 0.2rem; }
    .today .hour__precipitation {
      --cloud-percent: 0;
      --rain-percent: 0;
      position: relative;
      background: var(--white);
      height: 100%;
      overflow: hidden; }
      .today .hour__precipitation:before {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #4d4d4d;
        opacity: var(--cloud-percent);
        z-index: 90; }
      .today .hour__precipitation:after {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #1c1cba;
        opacity: var(--rain-percent);
        z-index: 100; }
      .today .hour__precipitation span {
        display: none; }
    .today .hour__time {
      font-size: 1.3rem;
      text-align: right;
      padding-right: 0.5em; }
    .today .hour__wind {
      font-size: 1.1rem;
      text-align: right; }
    .today .hour__condition {
      position: absolute;
      left: 0;
      top: calc(50% - 0.4em);
      padding-left: .75em;
      font-size: 1.1rem;
      font-style: italic; }
    .today .hour__value {
      position: absolute;
      top: calc(50% - 0.3em);
      font-size: 1.1rem;
      left: calc(100% + 0.4em);
      display: none;
      white-space: nowrap; }
    .today .hour__range {
      position: relative;
      padding: 0 2rem 0 0; }
    .today .hour__bar {
      display: block;
      height: calc(var(--bar-height));
      border-radius: 0 calc(var(--bar-height) / 2) calc(var(--bar-height) / 2) 0;
      background-image: -webkit-gradient(linear, left top, right top, color-stop(5rem, rgba(255, 255, 255, 0)), to(var(--white)));
      background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 5rem, var(--white) 100%);
      position: relative;
      width: calc( (var(--value) - var(--range-min)) / (var(--range-max) - var(--range-min)) * 60% + 40%);
      -webkit-transition: width 150ms ease-out;
      transition: width 150ms ease-out; }

.forecast-controls {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0 0 2rem; }
  .forecast-controls .forecast-control {
    display: inline-block;
    margin: 0;
    padding: 0.3rem 1rem 0.3rem;
    -wekbit-appearance: none;
    border: 0.1rem solid var(--white);
    background-color: transparent;
    color: var(--white);
    cursor: pointer;
    -webkit-transition: all 150ms;
    transition: all 150ms;
    font-size: 1.4rem; }
    .forecast-controls .forecast-control:nth-child(n+2) {
      border-left: 0; }
    .forecast-controls .forecast-control:hover, .forecast-controls .forecast-control:focus {
      background-color: var(--white);
      color: var(--blue);
      outline: none;
      opacity: .9; }
    .forecast-controls .forecast-control--active {
      background-color: var(--white);
      color: var(--blue); }
    .forecast-controls .forecast-control--active:hover, .forecast-controls .forecast-control--active:focus {
      opacity: 1; }
    .forecast-controls .forecast-control:first-child {
      border-radius: 1rem 0 0 1rem; }
    .forecast-controls .forecast-control:last-child {
      border-radius: 0 1rem 1rem 0; }

.data-controls {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 2rem 0 2rem; }
  .data-controls .data-control {
    display: inline-block;
    margin: 0;
    padding: 0.3rem 1rem 0.3rem;
    -wekbit-appearance: none;
    border: 0.1rem solid var(--white);
    background-color: transparent;
    color: var(--white);
    cursor: pointer;
    -webkit-transition: all 150ms;
    transition: all 150ms;
    font-size: 1.2rem; }
    .data-controls .data-control:nth-child(n+2) {
      border-left: 0; }
    .data-controls .data-control:hover, .data-controls .data-control:focus {
      background-color: var(--white);
      color: var(--blue);
      outline: none;
      opacity: .9; }
    .data-controls .data-control--active {
      background-color: var(--white);
      color: var(--blue); }
    .data-controls .data-control--active:hover, .data-controls .data-control--active:focus {
      opacity: 1; }
    .data-controls .data-control:first-child {
      border-radius: 1rem 0 0 1rem; }
    .data-controls .data-control:last-child {
      border-radius: 0 1rem 1rem 0; }