/* Color
#B1F0F7
#81BFDA
#fbf8e3
#FADA7A
#f9f9f9
#F65281
 */

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  background: #fbf8e3;
  font-family: 'Outfit', serif;
}

.main-container {
  background: #f9f9f9;
  max-width: 600px;
  margin: 60px auto;
  padding: 40px 30px;
  border-radius: 20px;
  box-shadow: 8px 8px 18px rgb(135, 135, 135, 0.4);
  /* box-shadow: 8px 8px 12px rgb(250, 218, 122, 0.8); */
}

/* Header */
.header-container {
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
}

.icon-container {
  display: inline-block;
  width: 40px;
  margin-right: 5px;
}

.title-icon {
  width: 100%;
}

h1 {
  display: inline-block;
  letter-spacing: 0.8px;
  font-size: 36px;
}

/* Input Form */
.form-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5cqmin;
}

#search-input {
  width: 78%;
  padding: 12px;
  background: #fefcf0;
  border: 1px solid #fada7a;
  border-radius: 10px;
  font-size: 18px;
}

#search-input:focus {
  outline-color: #81bfda;
}

.search-button {
  width: 20%;
  text-transform: uppercase;
  border-radius: 10px;
  border: none;
  background: #81bfda;
  color: #f9f9f9;
  font-weight: 800;
  letter-spacing: 0.5px;
  box-shadow: 3px 3px 4px rgb(170, 168, 168, 0.4);
  transition: all 200ms ease-in-out;
}

.search-button:hover {
  cursor: pointer;
  transform: translate(-1px, -2px);
}

.search-button:active {
  transform: translate(1px, 1px);
}

/* Current weather container */
.current-weather-container {
  display: flex;
  justify-content: space-between;
}

.right-box {
  display: flex;
  align-items: center;
}

.current-temperature {
  font-size: 60px;
  font-weight: 800;
}

.current-unit {
  margin-bottom: 26px;
  margin-left: 3px;
}

.humidity-wrap,
.wind-wrap {
  color: #f65281;
  font-weight: 800;
}

/* Forecast */
.forecast-container {
  display: flex;
  justify-content: space-between;
}

.forecast-day,
.forecase-temperature {
  text-align: center;
}

.forecase-temperature p {
  display: inline-block;
  color: #f65281;
  font-weight: 800;
}

.forecase-temperature p:nth-child(2) {
  opacity: 65%;
  margin-left: 2px;
}
/* Footer */
.footer-container {
  margin-top: 60px;
}

.footer-container p {
  text-align: center;
  font-size: 12px;
  color: #747474;
}

.footer-container a {
  color: #81bfda;
}