body{

    background : url(bkg.png);
    background-size: cover;

}

.container{
    position: absolute;

    margin-left: 70px;
    margin-top: 150px;

    width: fit-content;

    justify-content: center;
    align-items: center;
    text-align: center;
    
    border: 3px solid rgb(255, 255, 255);
    border-radius: 9px;

    transition: 2s;
}


.container:hover{

    background-color: rgba(250, 207, 207, 0.925);
    box-shadow: rgb(0, 0, 0) 3px 6px 15px;
}

.location{

    font-size: 4.4em;
    
    color: #f19d01;
    font-variant-caps: all-petite-caps;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}

.weather-icon{

    align-items: center;
}

.temperature-description{
    
    font-size: 4.4em;
    
    color: rgb(108, 3, 134);
    font-variant-caps: all-petite-caps;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
 
}

.temperature-value{

    font-size: 4.8em;

    color: rgba(248, 3, 3, 0.774);
    font-variant-caps: all-petite-caps;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}

.latitude{

    font-size: 2.9em;

    color: rgb(7, 122, 3);
    font-style: italic;
    font-variant-caps: all-petite-caps;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.longetude{
    
    font-size: 2.9em;
    
    color: rgb(0, 214, 0);
    font-size: 2.9em;
    font-style: italic;
    font-variant-caps: all-petite-caps;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

@media(max-width:650px)

{
    .container{
    
        width: 80%;
        margin-left: 10%; 
    
    }

}

@media(max-width:450px)

{

    .location{

        font-size: 3.4em;

    }

    .temperature-description{
        
        font-size: 3em;

    }

    .temperature-value{

        font-size: 3.8em;

    }

    .latitude{

        font-size: 2.4em;

    }

    .longetude{
        
        font-size: 2.4em;
    }

}

@media(max-width:300px)
{

    .location{

        font-size: 2.4em;

    }

    .temperature-description{
        
        font-size: 2.4em;

    }

    .latitude{

        font-size: 2em;

    }

    .longetude{
        
        font-size: 2em;
    }


}

@media(max-height:1000px)
{
    .container{
        margin-top: 70px;
    }

}






/*
.latitude{
    margin-left: 100px;
}
.presure{
    margin-left: 1000px;
}
.wind-speed{
    margin-left: 1000px;
}
.humedity{
    margin-left: 1000px;
}
.longetude{
    margin-left: 100px;
}

*/