:root {
    font-size: 62.5%;
}

body,
html {
    width: 100%;
    height: 100%;
}

body {
    font-size: 1.6rem;
background-color:black;
;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/*-----------------------------------MAIN - BODY-------------------------------------------------------------------------------------------------------*/
.main-body{
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    
}
.card{
    width:420px;

    background:#D3D3D3; 
    background-image: linear-gradient(to bottom, #87CEEB, #00BFFF);
    border:0px solid black;
    border-radius:1em;
    display: flex;
    flex-direction:column;
    gap:2em;
    align-items:center;
    
}
.weather-search{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:16px;
    gap:1em;
    
}
input[type='text']{
    width:320px;
    font-family:'hammersmith one';
    padding:0.6em;
    padding-left:1em;
    outline:none;
    border:0px solid black;
    border-radius:10px;
    box-shadow:0px 0px 5px black;
}
.fa-magnifying-glass{
    background:white;
    color:black;
    padding: 0.5em;
    border:0px solid black;
    border-radius:50%;
    box-shadow:0px 0px 5px black;
}

#degree{
    font-family:'roboto condensed';
    font-size:8rem;
    letter-spacing:0em;
}
#location{
    font-family:'hammersmith one';
}
.climate{
    display:flex;
    flex-direction:row;
    font-family:poppins;
    gap:4em;
    margin-top:10px;
  
}
.humidity img{
    width:50px;

}
.items{
    display:flex;
    flex-direction:column;
margin-top:-12px;
}
.main-container{
    display:flex;
gap:1em;
}
.deg{
    margin-top:-10px;
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items:center;
}
.deg img{
    width:160px;
}
.date{
    font-family:hammersmith one;
}
.forecast{
    width:420px;

    background:#D3D3D3; 
    background-image: linear-gradient(to bottom, #87CEEB, #00BFFF);
    border:0px solid black;
    border-radius:1em;
    display: flex;
    flex-direction:column;
    gap:2em;
    align-items:center;
    
}
@media(max-width:436px){
    .card{
        width:350px;
    }
    input[type='text']{
        width:280px;
    }
    .humidity img{
        width:30px;
    }
    #desc{
        font-size:1.7rem;
    }
}
@media(max-width:363px){
    .card{
        width:300px;
    }
    input[type='text']{
        width:230px;
    }
    .humidity img{
        width:30px;
    }
    #desc{
        font-size:1.7rem;
    }
}