style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');
*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}
 body{
    background: #222;
 }
 .header {
   position: fixed;
   top: 0;
   width: 100%;
   padding: 30px;
   background: rgba(0, 0, 0, .1);
   backdrop-filter: blur(50px);
   /* display: flex; */
   /* justify-content: space-between; */
   /* align-items: center; */
   z-index: 90;
   color: #fff;
}
.header.sticky {
   border-bottom: .1rem solid rgba(231, 25, 234, 0.2);
}
.logo {
   font-size: 2rem;
   color: #fff;
   font-weight: 600;
   /* cursor: default; */
   /* align-items: center;
   width: 100%; */

}

.card{
    width: 90%;
    max-width: 470px;
    background: linear-gradient(135deg, #cbff46, rgb(40, 166, 82));
    color: #fff;
    margin: 150px auto 0;
    border-radius: 20px;
    padding: 27px 25px;
    text-align: center;
 }
 .search{
    padding: 10px 20px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

 }
 .search input{
    border: 0;
    outline: 0;
    background: #ebfffc;
    color: #555;
    padding: 10px 25px;
    height: 60px;
    border-radius: 30px;
    flex: 1;
    margin-right: 16px;
    font-size: 18px;
 }
 .search button{
    border: 0;
    outline: 0;
    background: #ebfffc;
    border-radius: 50%;
    width: 55px;
    height: 55px;
    cursor: pointer;
 }
 .weather-icon{
   width: 170px;
   margin-top: 10px;
 }
 .weather h1{
   font-size: 70px;
   font-weight: 500;
   margin-top: -20px;
 }
 .weather h2{
   font-size: 40px;
   font-weight: 400;
   margin-top: -10px;
 }
 .details{
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: -10 20px;
   margin-top: 50px;
 }
 .col{
   display: flex;
   align-items: center;
   text-align: left;
 }
 .col img{
   width: 40px;
   margin-right: 10px;
 }
 .humidity, .wind{
   font-size: 25px;
   margin-top: -6px;
 }
 .weather{
   display: none;
 }
 .error{
   text-align: left;
   margin-left: 10px;
   font-size: 14px;
   margin-top: 10px;
   display: none;
 }