body {
  font-family: "Fuzzy Bubbles", sans-serif;
  background-color: #fad1d9;
}

.main-container {
  background-color: white;
  margin: 3em 18em 1.5em;
  padding: 2em;
  border-radius: 1em;
}

.search-form {
  display: flex;
  justify-content: space-between;
}

.search-city-input {
  font-family: "Fuzzy Bubbles", sans-serif;
  background: rgb(252, 230, 234);
  font-size: 1.2em;
  padding: 0.8em;
  border-radius: 0.5em;
  border: none;
  width: 80%;
}

.search-button {
  font-family: "Fuzzy Bubbles", sans-serif;
  background: rgb(216, 131, 160);
  font-size: 1.2em;
  border-radius: 0.5em;
  padding: 0.8em;
  border: none;
  color: white;
  transition: all 200ms ease-in-out;
}
.search-button:hover {
  background: rgb(216, 118, 151);
  cursor: pointer;
  font-weight: bold;
}

.current-city-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 2em;
}

.current-weather-info {
  display: flex;
  align-items: center;
}

.current-city {
  font-size: 3em;
  margin-bottom: 0;
}

.current-details {
  color: rgb(99, 99, 99);
  line-height: 1.5;
}

.humidity,
.wind {
  color: rgb(55, 220, 55);
  font-weight: bold;
}

.current-temp {
  font-size: 3.3em;
  font-weight: bold;
  align-self: center;
  display: flex;
}

.unit-toggle {
  font-size: 0.6em;
  color: #999;
}
.unit-toggle a {
  text-decoration: none;
  font-size: 0.8em;
  color: #999;
  margin: 0 5px;
  cursor: pointer;
}
.unit-toggle a.active {
  color: #000;
  font-weight: bold;
}

.forecast-container {
  display: flex;
  justify-content: space-evenly;
  text-align: center;
  margin-top: 1em;
}

.forecast-date {
  font-weight: bold;
}

.forecast-temps {
  display: flex;
  justify-content: center;
  gap: 0.5em;
}

.forecast-high-temp {
  font-weight: bold;
}

.forecast-img {
  width: 50%;
}

.forecast-day {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 2s ease forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
footer {
  text-align: center;
  font-size: 0.7em;
  color: gray;
}
footer a {
  color: rgb(248, 120, 141);
  text-decoration: none;
}
footer a:visited {
  color: rgb(248, 120, 141);
}
footer a:hover {
  text-decoration: underline;
}

@media (max-width: 1200px) {
  .main-container {
    margin: 3em 12em 1.5em;
  }
}
@media (max-width: 1050px) {
  .main-container {
    margin: 3em 10em 1.5em;
  }
}
@media (max-width: 950px) {
  .main-container {
    margin: 3em 6em 1.5em;
  }
}
@media (max-width: 850px) {
  .main-container {
    margin: 3em 4em 1.5em;
  }
}
@media (max-width: 750px) {
  .main-container {
    margin: 3em 2em 1.5em;
  }
  .current-city-container {
    flex-direction: column-reverse;
  }
  .current-weather-info {
    margin-top: 1em;
  }
  .current-city,
  .current-temp {
    margin: 0;
    justify-self: center;
  }
  .current-details {
    text-align: center;
  }
}
@media (max-width: 500px) {
  .main-container {
    margin: 2em 1em 1.5em;
  }
  .current-city {
    text-align: center;
  }
  .current-city-container {
    margin: 0;
  }
  .search-city-input {
    width: 70%;
    font-size: 1em;
  }
  .search-button {
    font-size: 1em;
  }
  .unit-toggle {
    font-size: 0.5em;
  }
  .forecast-container {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    text-align: center;
    margin-top: 1em;
  }
  .forecast-day {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  .forecast-date {
    width: 60px;
  }
  .forecast-temps {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0.5em;
    width: 60px;
  }
  .forecast-img {
    width: 70%;
  }
}