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

body{
    font-family: verdana, sans-serif;
}

.container{
    width : 75%;
    max-width: 700px ;
    min-height: 500px;
    padding: 40px 20px;
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: lavenderblush;
    border-radius: 15px;
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.3) ;
}

h1 {
    width: 100%;
    margin-bottom: 40px;
    font-size: clamp(1.2em, 4vw, 2em);
    text-align: center;
}

.input_area {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    padding: 0 20px;
    gap: 50px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

#city_input{
    padding: 5px;
    width: 70%;
    max-width: 300px;
    font-size: clamp(0.9em, 2.5vw, 1.3em);
    text-align: center;
    border: none;
    border-radius: 10px;
    box-shadow: 1px 1px 10px  rgba(0, 0, 0, 0.2);
}

#submit_btn{
    border: none;
    background-color: rgb(27, 203, 203);
    border-radius: 15px;
    font-size: clamp(0.8em, 2vw, 1.1em);
    box-shadow: 0 0 10px gray;
    cursor: pointer;
    color: #fff;
    padding: 5px 15px;
    transition: all 0.2s ease;
}

#submit_btn:hover{
    background-color: rgb(16, 188, 188);
    transform: scale(105%);
}

#submit_btn:active{
    background-color: rgb(5, 109, 109) !important;
    transform: scale(96%) !important;
}

#msg{
    font-size: clamp(1.4em, 3vw, 1.8em);
    font-weight: bold;
    display: none;
    letter-spacing: 2px;
    color: rgb(27, 203, 203);
}

.weather_info{
    margin-top: 20px;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    flex-wrap: wrap;
    gap: 50px;
    width: 100%;

}

.main_content{
    padding: 20px;
    padding-bottom: 40px;
    height: fit-content;
    width: fit-content;
    background-color: rgb(160, 223, 248);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    text-align: center;
}

#temp_dis{
    font-size: clamp(2em, 4vw, 3em);
    color: #fff;
    margin: 15px 0;
}

#city_name{
    font-size: clamp(1em, 2vw, 1.4em);
    color: rgb(255, 255, 255);
    margin-bottom: 5px;
    font-weight: 600;
    letter-spacing: 2px;
}

#date,
#time{
    font-size: clamp(0.8em, 1.7vw, 1.1em);
    margin-bottom: 5px;
    color: #fff;
    font-weight: 550;
}

#weather_container{
    display: flex;
    margin: 10px 5px;
    flex-wrap: wrap;
    color: #fff;
    gap: 10px;
    font-size: clamp(0.9em, 1.9vw, 1.3em);
    font-weight: 550;
    justify-content: center;
    align-items: center;
}

#weather_emoji{
    font-size: clamp(2em, 3vw, 5em );
}

.details{
    display: flex;
    flex-direction: column;
    background-color: rgb(120, 255, 210);
    align-items: center;
    border-radius: 15px;
    height: fit-content;
    width: fit-content;
    padding: 10px 40px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    justify-content: space-around;
}

.details p:nth-child(odd) {
    font-size: clamp(0.8em, 1.7vw, 1.1em);
    color: rgb(0, 0, 0);
    margin: 5px 10px;
}

.details p:nth-child(even) {
    font-size: clamp(1em, 2vw, 1.4em);
    color: #6056b9;
    font-weight: bold;
    margin: 5px 10px;
}

@media (hover : none){
    #submit_btn:hover{
        transform: none;
        background-color: rgb(27, 203, 203);
    }
}