body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: rgb(247, 247, 247);
    /* font-family: 'Cabin', sans-serif; */
    /* font-family: 'Cairo', sans-serif; */
    font-family: 'Varela Round', sans-serif;

}

form {
    display: flex;
    flex-direction: row;
    position: absolute;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 2rem;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
}
form img {
    padding-right: 1rem;
    height: 3rem;
}
form input {
    border: none;
    flex: 3;
    font-size: 2rem;
    padding: 1rem;
    border-radius: 60px;
    background-color: rgba(255, 255, 255, 0.317);
    cursor: text;
}

input[type="text"]:hover {
    border: none;
    outline: none;
    background-color: rgba(255, 255, 255, 0.445);
  }

  input:focus {

    outline: none;
    }
  

form button {
    box-sizing: border-box;
    cursor: pointer;
    margin-left: 1.5rem;
    padding: 1rem 2rem;
    border-radius: 30px;
    background-color: rgba(255, 255, 255, 0.721);
    font-size: 2rem;
    color: rgb(148, 148, 148);
    border: none;

}

form button:hover {
    color: rgba(79, 74, 74, 0.788);
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.863);
    
}

/****** CURRENT WEATHER SECTION ******/

.current-weather-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom-left-radius: 50% 15%;
    border-bottom-right-radius: 50% 15%;
    height: 100vh;
    /*min-height: 60vh;*/
}

.current-weather {
    display: flex;
    flex-direction: column;
    width: 800px;
    padding: 4em;
    padding-bottom: 7em;
}

.main-icon-main-temp-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 5em;
}

.main-icon img {
    width: 200px;
}

.main-temp, .city-name, p {
    color: white;
}

.main-temp {
    font-size: 6em;
    margin:  1rem 0;
    font-family: 'Helvetica', sans-serif;
}

.city-name {
    font-size: 3em;
    margin: 1rem 0;
}

.weather-type {
    padding: 0;
    margin: 1rem 0;
}

p {
    font-size: 2.2em;
    margin: 1rem 0;
}

.rise-set {
    display: flex;
    justify-content: space-between;
    padding: 0;
}

.sunrise {
    margin: 1rem 0;
}

.sunset {
    margin: 1rem 0;
}

.rise-set img {
    padding-left: 1.5rem;
    width: 4rem;
}

#upcomingWeather {

display: flex;
flex-direction: column;
font-size: 3rem;
width: 80%;
margin: auto;
margin-bottom: 10%;
margin-top: 3rem;

}

#upcomingWeather img {
    width: 5rem;

}

/*when we know fonts, we should make different font size for desktops/tablets/mobiles*/
.each-day {

display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
/* margin-left: 2rem; */
margin-top: 0.6rem;
margin-bottom: 0.6rem;
padding: 0.7rem;
background-color: rgb(255, 255, 255);
border-radius: 30px;
}

/*this makes every other forecasted weather child different background*/
.each-day:nth-child(even){
    background-color: rgba(136, 136, 136, 0.077);
}



.each-weekday {
    flex: 1;
    padding-left: 3.5rem;
}

.each-icon {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    padding-right: 2.5rem;
   
}


.each-temps {
    flex: 2;
}



.small-weather-icons {
    width: 3rem;
    
}

.errormsg {
    color: rgb(252, 252, 252);
    font-size: 2.5rem;
    margin:auto;
    text-align: center;
    
}

footer {
    font-size: 1.3rem;
    padding: 3rem;
    background-color: rgba(128, 128, 128, 0.26);
    color: rgba(0, 0, 0, 0.418);
    text-align: center;
}

@media (max-width:667px) {
    .current-weather-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom-left-radius: 50% 10%;
        border-bottom-right-radius: 50% 10%;
        min-height: 480px;
        max-height: 80vh;
    }
    .current-weather {
        width: 800px;
        padding: 3rem;
        padding-bottom: 4rem;
    }
    .main-icon-main-temp-container {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        padding-top: 4rem;
    }
    .main-temp {
        font-size: 3rem;
    }
    .main-icon img {
        width: 125px;
    }
    .city-name {
        font-size: 1.5rem;
    }
    p {
        font-size: 1.2rem;
    }
    .rise-set img {
        display: none;
    }
    
    form {
    justify-content: space-between;
    gap: 0.5rem;
    /* flex-direction: column; */
    }

    form input {
        flex: 2;
        margin: 0;
        font-size: 1rem;
    }

    form img {
        display:none
    }

    form button {
        flex: 1;
        margin-right: 0;
        font-size: 1rem;
        padding: 1rem 1rem;
    }

    #upcomingWeather{
        font-size: 1.2rem;
        
    }
    .each-weekday{
        padding-left: 0.1rem;
    }
    .small-weather-icons{
        width: 40px;
    }
}

@media (min-width:668px) and (max-width:1000px) {
    .current-weather-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom-left-radius: 50% 10%;
        border-bottom-right-radius: 50% 10%;
        min-height: 700px;
        max-height: 80vh;
    }
    .current-weather {
        width: 700px;
        padding: 0;
        padding-bottom: 4em;
    }
    .main-icon img {
        width: 200px;
    }
}

/*media query for desktop*/
@media (min-width:1400px) {

    .current-weather {
        width: 900px;
        padding: 0;
        padding-bottom: 5em;
    }
    .main-icon img {
        width: 300px;
    }
}



/*Animation for the tablet and desktop size (main weather icon moving)*/
@media (min-width:668px){
    .main-icon img {
        animation-name: moveInLeft;
        animation-duration: 5s;
        animation-timing-function: ease-out;
    }
    @keyframes moveInLeft {
        0% {
          opacity: -5;
          transform: translateX(-20rem);
        }
        50% {
          opacity: 1;
          transform: translate(0);
        }
        100% {
          opacity: 2;
          transform: translate(0);
        }
      }

}