*
{
    margin: 0%;
    padding: 0%;
    font-family: sans-serif;
}
.container
{
    width: 100%;
    height: 100vh;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;


}
.container::before
{
    content: "";
    height: 100%;
    width: 100%;
    background-image: url(./cool-background.png) ;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0.4;
}
.weather
{
   
    z-index: 2;
    color: white;
    display: flex;
    align-items: center;
}
.weather1
{
    font-size: 4rem;
}
.weather>p
{
    font-size: 2rem;
}
.weather2>span
{
    font-size: 1.77rem;
}
.weather3>span
{
    margin: 0.3rem;
}
.weather3>img
{
    width: 2rem;
}
.weather>div
{
    margin: 0.625rem;
}
nav
{
    height: 100px;
    width: 100%;
    box-shadow: 0 0 25px rgba(0,0,0,1.8);
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 0;
    border-radius: 100px 100px 0 0;
}
nav form
{
    width: 70%;
    grid-template-columns: 5fr 1fr;
    display: grid;

}
.searchField
{
    outline: none;
    color: white;
    font-size: 1.1rem;
    background-color: transparent;
    padding: 1rem 0;
    border-bottom: 2px solid white;
    width: 98%;
}
nav form button
{
    background-color: rgb(216, 140, 41);
    border-radius: 0 25px 25px 0;
    font-size: 1.1rem;
    color: white;
    outline: none;
    cursor: pointer;

}