*{
    margin: 0px;
    padding: 0px;
}

body{
display: flex;
justify-content: center;
align-items: center;
width:100% ;
background:  linear-gradient(to bottom, rgba(179, 179, 179, 0.995), rgba(94, 191, 212, 0.614)),url("img/images.jpg");
background-size:cover;
background-repeat: no-repeat;
min-height:100vh;
background-position: center;
}

.container{
    box-sizing: border-box;
    transition: 0.6s ease-out ;
}
.d2{
    transition: 0.6s ease-in-out ;
}
.d3{
    box-sizing: border-box;
    transition: 0.6s ease-out ;
}

.detail{
display: flex;
justify-content: center;
    width: 100%;

}
.detail img{
    width: 80%;
    height: 200px;
}
.cont , .weak-cont{
    flex-wrap: wrap;
    max-width: 100%;
    display: flex;
    justify-content:space-around;
    align-items: center;
}
.cont div , .weak-cont div{
    display: flex;
    align-items:last baseline;
    justify-content: center;
}
.cont div i , .weak-cont div i{
    font-size:22px ;
}
.weak-cont div i{
    font-size:15px ;
}
 .weak-cont div i{
    font-size:15px ;
}

.cont div .humidity , div .wind,.weak-cont div .weak-humidity , div .weak-wind{
    font-weight:500;
    margin-left:10px;
font-size: 22px;
}
.weak-cont div .weak-humidity , div .weak-wind{
    font-weight:500;
    margin-left:10px;
font-size: 15px;
}
.tem ,.weak-tem {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
font-size: 22px;
margin-top: 20px;
}
.input{
    display: flex;
    justify-content: center;
    align-items: center;
}
.input input {
height:30px;
color: #06283d;
border-radius: 20px;
font-weight: 500;
outline: none;
border:none;
padding-left: 20px;
text-transform: uppercase;
}
.input input::placeholder{
    color: #06283d;
    text-transform: capitalize;
}


.input button {
margin-left:10px;
    width: 30px;
    height:30px;
border-radius: 20px;
outline: none;
border:1px solid rgb(207, 207, 207);
text-transform: capitalize;
transition: 0.5s;
}
.input button:hover{
    background-color: #06283d;
    color: white;
}
#update{
    color: #06283d;
    font-size: 15px;
    align-items: center;
    display: flex;
    justify-content: space-between;
}
#weak-img{
    display: flex;
    justify-content: center;
   flex-direction: column;
   align-items: center;
    width: 100%;
}
#weak-img img{
    width: 50%;
    height: 100px;
 
}

#show::-webkit-scrollbar {
    width: 8px;
  }
  
  #show::-webkit-scrollbar-track {
    background-color: #f1f1f1;
  }
  
  #show::-webkit-scrollbar-thumb {
    background-color: #06283d;
    border-radius: 4px;
  }
  
  #show::-webkit-scrollbar-thumb:hover {
    background-color: #555;
  
  }
@media screen and (max-width: 600px) {
    #show {
      display: block !important;
      overflow: hidden !important;
    }
    body{
        background: none;
        color: #06283d;
        height:auto ;
    }
    div{
        color: #06283d;
    }
  }