body {
  font-family: Arial, Helvetica, sans-serif;
}

.clear {
  background-image: radial-gradient(
      circle at 18.7% 37.8%,
      rgb(250, 250, 250, 0.8) 10%,
      rgb(225, 234, 238, 0.4) 90%
    ),
    url(https://s3.amazonaws.com/shecodesio-production/uploads/files/000/087/643/original/ClearSky.jpg?1688145075);
  background-size: 600px;
}

.clouds {
  background-image: radial-gradient(
      circle at 18.7% 37.8%,
      rgb(250, 250, 250, 0.8) 0%,
      rgb(225, 234, 238, 0.8) 90%
    ),
    url(https://s3.amazonaws.com/shecodesio-production/uploads/files/000/087/625/original/sky-with-clouds-sunbeams.jpg?1688141036);
  background-size: 900px;
}

.rain {
  background-image: radial-gradient(
      circle at 18.7% 37.8%,
      rgb(250, 250, 250, 0.8) 0%,
      rgb(225, 234, 238, 0.8) 90%
    ),
    url(https://s3.amazonaws.com/shecodesio-production/uploads/files/000/085/496/original/weather.jpeg?1686676314);
  background-size: 900px;
}

.thunderstorm {
  background-image: radial-gradient(
      circle at 18.7% 37.8%,
      rgb(250, 250, 250, 0.2) 0%,
      rgb(225, 234, 238, 0.2) 90%
    ),
    url(https://s3.amazonaws.com/shecodesio-production/uploads/files/000/087/632/original/Thunderstorm2.jpg?1688142308);
  background-size: 900px;
}

.snow {
  background-image: radial-gradient(
      circle at 18.7% 37.8%,
      rgb(250, 250, 250, 0.8) 0%,
      rgb(225, 234, 238, 0.8) 90%
    ),
    url(https://s3.amazonaws.com/shecodesio-production/uploads/files/000/087/624/original/Snow.jpg?1688141005);
  background-size: 900px;
}

.mist {
  background-image: radial-gradient(
      circle at 18.7% 37.8%,
      rgb(250, 250, 250, 0.6) 0%,
      rgb(225, 234, 238, 0.6) 90%
    ),
    url(https://s3.amazonaws.com/shecodesio-production/uploads/files/000/087/562/original/Mist.jpg?1688066244);
  background-size: 900px;
}

.weather-app-display {
  border-radius: 15px;
  color: #61676c;
  box-shadow: 10px 10px 20px rgba(200, 202, 225, 0.2);
  margin: 0 auto;
  margin-top: 50px;
  max-width: 600px;
  padding: 50px;
}

/* Search Bar */
.form-control {
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 10px 10px 20px rgba(186, 193, 210, 0.2);
  border-top: 1px solid white;
  border-left: 1px solid white;
  border-right: 1px solid rgba(200, 202, 225, 0.3);
  border-bottom: 1px solid rgba(200, 202, 225, 0.3);
  margin-bottom: 20px;
}

.btn {
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 10px 10px 20px rgba(186, 193, 210, 0.2);
  border-top: 1px solid white;
  border-left: 1px solid white;
  border-right: 1px solid rgba(200, 202, 225, 0.3);
  border-bottom: 1px solid rgba(200, 202, 225, 0.3);
  backdrop-filter: blur(3px);
  color: #61676c;
  transition: all 150ms ease-in-out;
}

.btn:hover {
  /* background: rgb(226, 230, 236, 0.5); */
  filter: brightness(105%);
  box-shadow: none;
}

/* Main Forecast Container */
.main-forecast {
  align-items: center;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 10px 10px 20px rgba(200, 202, 225, 0.2);
  border-top: 1px solid white;
  border-left: 1px solid white;
  border-right: 1px solid rgba(200, 202, 225, 0.3);
  border-bottom: 1px solid rgba(200, 202, 225, 0.3);
  border-radius: 10px;
  backdrop-filter: blur(3px);
  padding-top: 48px;
  padding-bottom: 48px;
}

.main-forecast:hover {
  /* transform: scale(1.05); */
  filter: brightness(105%);
}

h3,
h4 {
  margin-bottom: 0px;
  margin-left: 20px;
  text-align: left;
  text-transform: capitalize;
  line-height: 22px;
}

h4 {
  font-size: 20px;
  color: rgba(97, 103, 108, 0.6);
  line-height: 30px;
}

.date-note {
  font-size: 12px;
  line-height: 10px;
}

img {
  display: flex;
  align-items: center;
  margin: 0 auto;
  margin-top: 10px;
}

h1 {
  text-align: center;
  margin-bottom: 0px;
}

#current-temperature {
  color: rgba(97, 103, 108, 0.9);
  font-size: 48px;
  margin: 0;
  padding-left: 0px;
}

.units {
  color: rgba(97, 103, 108, 0.8);
  font-size: 16px;
  position: relative;
  top: -19px;
  cursor: default;
}

ul {
  list-style: none;
  margin-bottom: 0px;
  padding-bottom: 0px;
  text-align: left;
}

#weather-description {
  font-size: 18px;
  text-transform: capitalize;
  margin-bottom: 2px;
}

ul.main-forecast-specs {
  font-size: 14px;
  line-height: 20px;
  margin-top: 25px;
}

/* Additional Forecast Container */
.week-forecast {
  align-items: center;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 10px 10px 20px rgba(200, 202, 225, 0.2);
  border-top: 1px solid white;
  border-left: 1px solid white;
  border-right: 1px solid rgba(200, 202, 225, 0.3);
  border-radius: 10px;
  backdrop-filter: blur(3px);
  display: flex;
  padding-top: 15px;
  padding-bottom: 15px;
  text-align: left;
}

.week-forecast:hover {
  /* transform: scale(1.1); */
  filter: brightness(105%);
}

.forecast-icon {
  width: 52px;
  margin-top: 0;
}

.forecast-specs {
  padding: 0px;
  padding-left: 10px;
}

.forecast-day {
  font-size: 15px;
  line-height: 20px;
}

.forecast-temperature {
  font-size: 15px;
}

.forecast-temperature-max {
  color: rgba(97, 103, 108, 0.9);
}

.forecast-temperature-division {
  color: rgba(97, 103, 108, 0.3);
}

.forecast-temperature-min {
  color: rgba(97, 103, 108, 0.5);
}

.forecast-units {
  display: inline;
  color: rgba(97, 103, 108, 0.7);
}

footer {
  color: rgb(159, 173, 191);
  font-size: 12px;
  text-align: center;
  padding-top: 20px;
}