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

.container {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

}

.vids{
   
    height: 100vh;
    width: 100vw;
    background-color: rgb(50, 36, 241);
    display: flex;
    justify-content: center;
    align-items: center;

}

.outerbox{
    height: 98vh;
    width: 98vw;
    /* background-color: rgb(50, 36, 241); */
    display: flex;
    align-items: center;
    flex-direction: column;

}

.areaOne{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 95%;
    justify-content: center;
    background-color: transparent;
}

#locc{
    background-color: transparent;
    height: 25px;
    margin: 10px;
    text-align: center;
    color: #fff;


}


#idinpt{
    height: 40px;
    flex: 1;
}

.locationIcon{
    width: 20px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}






.outerbox input{
    height: 20px;
    width: 74%;
    border: 1px solid black;
    border-radius: 5px;
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    padding: 5px;
    font-size: 14px;



}

.outerbox button{
    width: 50px;
    border-radius: 5px;
   



}

.areaTwo{
    max-height: 300px;
    width: 95%;
    display: flex;
    flex-direction: column;
}

.iimg{
    height: 40vw;
    margin: 10px;
    background-color: brown;
    background: url(./img/weather-Clear.png);
    background-size:contain;
    background-repeat: no-repeat;
    background-position: center;



}

.areaTwo h1{
   text-align: center;
   color: #fff;
}

.areaTwo p{
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
 }

 .footl1 i,p{
    color: #000;
    padding: 3px;
    font-weight: 700;

 }

 .footr1 i,p{
    color: #000;

 }

.humwin{
    width: 100%;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 7px;
} 



.humwin p{
    display: inline-block;
    font-size: 16px;
} 




.clr{
    color: #000;
}

.weatherConditions{
    height: 100px;
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 7px;
    margin: 7px;
    background-color: #fff;
    border-radius: 10px;
}

/* .one{
    
    background-image: url('https://static.vecteezy.com/system/resources/previews/021/349/645/original/humidity-icon-for-your-website-mobile-presentation-and-logo-design-free-vector.jpg');
    background-blend-mode: darken;
    background-size: cover;
}

.two{
    
    background-image: url('https://static.vecteezy.com/system/resources/previews/022/962/714/original/cold-and-hot-icon-temperature-illustration-sign-thermometer-symbol-heat-logo-vector.jpg');
    background-blend-mode: darken;
    background-size: cover;
}

.three{
    
    background-image: url('https://img.freepik.com/premium-vector/thermometer-icon-temperature-symbol-emblem-vector-illustration_231786-4661.jpg');
    background-blend-mode: darken;
    background-size: cover;
}

.four{
    
    background-image: url('https://www.pngitem.com/pimgs/m/65-653478_pre-icons-download-for-free-in-png-and.png');
    background-blend-mode: darken;
    background-size: cover;
}

.five{
    
    background-image: url('https://cdn.vectorstock.com/i/preview-1x/19/40/wind-icon-vector-1541940.jpg');
    background-blend-mode: darken;
    background-size: cover;
}

.six{
   
    background-image: url('https://w7.pngwing.com/pngs/43/145/png-transparent-compass-rose-wind-degree-north-bearing-wind-angle-text-meteorology-thumbnail.png');
    background-blend-mode: darken;
    background-size: cover;
}

.seven{
    
    background-image: url('https://thumbs.dreamstime.com/b/visibility-icon-vector-isolated-white-background-your-web-mobile-app-design-visibility-logo-concept-visibility-icon-133828657.jpg');
    background-blend-mode: darken;
    background-size: cover;
}

.eight{
    
    background-image: url('https://asset.brandfetch.io/idt3n8W3ef/idgEzuzwRW.png');
    background-blend-mode: darken;
    background-size: cover;
} */