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

body{
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to top right , #4facfe , #00f2fe);
}

section{
    width: 80%;
    display: flex;
    min-height: 80%;
    padding: 8px 0px;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 2em;
    border: 2px solid black;
}


.search-container{
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid;
    border-radius: 8px;
    overflow: hidden;
    width: 80%;
    padding-left: 3px;
    
}
.search-container input{
    outline: none;
    width: 100%;
    border-style:none;
    color: black;
    font-size: large;
    background: none;
}

input::placeholder{
    color: black;
}

.search-container button{
    outline: none;
    border: none;
    background: none;
    cursor: pointer;
    padding: 3px 5px;
    font-size: large;
    background: rgba(192, 192, 192, 0.452)
}

.error {
    display: none;
    text-align: center;
}

.state{
    display: flex;
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    font-size: large;
}

.state h6 , .state h5{
    text-align: center;
    font-size: large;
}

.state img{
    width: 70%;
    height: 70%;
    padding: 0px;
    overflow: hidden;
    object-position: center;
    object-fit: cover;
}

.flex{
    display: flex;
    width: 80%;
}

hr{
    border-color: black;
    border: 0.1em solid black;
}

.wind-info{
    display: flex;
    display: none;
    flex:1;
    justify-content: space-between;
}

.wind-info p{
    white-space:pre-line;
}

/* .loading{
    background: rgba(0, 255, 255, 0.568);
    width: 100%;
    height: 100%;
    position: fixed;
    display: flex;
    display: none;
    justify-content: center;
    align-items: center;
    text-align: center;
    
} */

.loading h2{
    animation: type 3s steps(100,end)  infinite alternate forwards;
    overflow: hidden;
}

@keyframes type {
    from{width:0%;}
    to{width: 12%;}
}


h5,h6 , h4{
    font-size: larger;
}