body {
    background-color: rgb(132, 161, 190);
    font-family: "Inter", sans-serif;
    margin: 0;
}

.weatherapp {
    background-color: white;
    max-width: 600px;
    margin: 30px auto;
    box-shadow: 0 30px 40px rgb(78, 125, 168);
    border-radius: 20px; 
    padding: 20px;
}

header {
    border-bottom: 1px solid  #f9f7fe;
    padding: 0 0 20px 0;
    position: relative;
}

.search-form-input {
background-color: #f9f7fe;
box-shadow: 0 5px 10px rgb(217, 219, 221);
border: none;
border-radius: 14px;
width: 80%;
font-size: 16px;
margin-top: 10px;
padding: 15px 20px;
}

.search-form-button {
background-color: rgb(64, 132, 199);
box-shadow: 0 5px 10px rgb(112, 158, 204);
margin-left: 5px;
padding: 15px 25px;
font-size: 16px;
border: none;
border-radius: 14px;
color: white;
}

.search-form-button:hover { 
background: rgba(45, 97, 150, 1);
}

.weather-city {
color: blueviolet;
margin-bottom: 10px; 
margin-left: 10px;
 font-size: 40px;
 line-height: 48px;
}

main {
padding: 5px 0;
}

.weather-data {
 display: flex;
 justify-content: left; 
 align-items: center;
 width: 100%;
}


.left-container {
    display: flex;
    align-items: center;

}
.weather-details {
    margin-left: auto; 
    text-align: right;
    font-size: 18px;
    line-height: 22px;
    color: rgba(0, 0, 0, 0.6);
}

.weather-details strong {
 color: rgb(253, 112, 112);
 font-weight: bold;
}

.container {
   display: flex;
   align-items: center;
   margin-bottom: auto;
}

.weather-icon {
 width: 90px;
 height: 90px;
 margin-right: 5px;
}

.weather-temperature {
 margin-right: 5px;
 font-size: 70px;
 
}

.weather-degrees {
    margin-bottom: 20px;
    margin-right: 0;
    font-size: 28px;
}

.forecast {
display: flex;
justify-content: space-around;
margin-top: 20px;
border-top: 2px solid #7f739e;
padding-top: 30px;
padding-bottom: 15px;
}

.day-week {
text-align: center;
color: rgba(0, 0, 0, 0.692);
font-size: 16px;
line-height: 15px;
}

.day-icon {
width: 100%;
text-align: center;
}

.day-temperatures {
    display: flex;
    text-align: center;
    justify-content: center;
    color: rgb(253, 112, 112);
    margin-top: 10px;
}

.temp {
    padding: 0 10px;
}

footer {
    border-top: 2px solid #7f739e;
    padding: 10px 0 0 0;
    text-align: center;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
}