:root {
  font-family: Arial, Helvetica, sans-serif;
  --main-color: lightcyan;
  --back-color: darkblue;
  --border-color: cornflowerblue;
  --fs-10: 0.625rem;
  --circle-size: 18.75rem;
  --fs-temp: 4.5rem;
}
body {
  background-color: var(--back-color);
  width: 99%;
  height: 90vh;
}
#weather {
  color: var(--main-color);
}
h2 {
  text-align: center;
  margin: var(--fs-10) 0;
  color: var(--main-color);
}
.top-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.top {
  border: var(--fs-10) solid var(--border-color);
  border-radius: 50%;
  width: var(--circle-size);
  height: var(--circle-size);
}
.high {
  margin-top: 0.75rem;
  text-align: center;
}
.temp-hdr {
  margin-top: -1rem;
  color: var(--border-color);
}
h1 {
  text-align: center;
  color: var(--main-color);
}
.temp-bundle {
  text-align: center;
  margin-top: -1rem;
}
.big-temp {
  font-size: var(--fs-temp);
  display: inline;
}
.small-temp {
  display: inline;
}
.weather-condition {
  color: var(--main-color);
  margin-top: -0.5rem;
}
.forecast, .sunrise, .sunset {
  color: var(--border-color);
  margin-top: -0.375rem;
}
.low {
  margin-top: -0.125rem;
}
footer p{
  color: var(--border-color);
  text-align: center;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  /* CSS rules for iOS devices */
  .low {
    margin-top: -0.5rem;
  }
}