@import url('https://fonts.googleapis.com/css2?family=Lacquer&family=Playfair+Display&family=Playwrite+GB+S:ital,wght@0,100..400;1,100..400&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:wght@300..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Rubik+Wet+Paint&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: "poppins", sans-serif;
    }

 body{
    background: url('resources/images/e9.jpg');
    width: 100%;
    height: 100dvh;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;

 }   

 body::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100dvh;
    background:rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
 }

 h4{
   font-weight: 400;
 }
 .main-container{
    border: none;
    width: 500px;
    height: 500px;
    z-index: 1;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.15),
     rgba(255, 255, 255, 0.15));
    border-radius: 12px; 
    padding: 20px;
    margin-top: 50px;
 }

/*search input and button*/
.input-container{
   position: relative;
   margin-bottom: 25px
  
 }
 .city-input{
   width: 100%;
   padding: 15px 20px;
   border-radius: 99px;
   border: 3px solid transparent;
   background: rgb(255, 255, 255, 0.15);
   outline: none;
   font-weight: 500;
   transition: 0.25s border;
   padding-right: 45px;

 }

 .city-input:focus{
    border: 3px solid rgb(255, 255, 255, 0.75);
 }

 .city-input::placeholder{
    color: rgb(255, 255, 255, 0.75);
 } 

 .search-btn{
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background: none;
    display: flex;
    border: none;
    cursor: pointer;
 }

 /*weather info*/

.weather-info{
   display: flex;
   flex-direction: column;
   gap: 15px;
}
.location-date{
   display: flex;
   align-items: center;
   justify-content: space-between;
   align-items: center;
   color: rgb(255, 255, 255, 0.9);
}

.location{
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-size: 18px;
   gap: 5px;
  
}

.weather-details-container{
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-size: 19px; 
   color: rgb(255, 255, 255,0.9);  
}

.weather-img{
   width: 120px;
   height: 120px;
}

.condition{
   text-align: end;
}
.temperature{
   text-align: end;
}

.condition-type{
   font-size: 15px;
   font-weight: 400;
}

.weather-condition-container{
   display: flex;
   justify-content: space-between;
   color: rgb(255, 255, 255, 0.9);
}

.condition-item{
   display: flex;
   align-items: center;
   gap: 6px;
}

.condition-item span{
   font-size: 30px;
}
.forecast-item-container{
   display: flex;
   gap: 10px;
   overflow: scroll;
   color: rgb(255, 255, 255, 0.9);
}

.forecast-item-container::-webkit-scrollbar {
   display: none;
}
.forecast-item{
   min-width: 90px;
   background: rgb(255, 255, 255, 0.1);
   display: flex;
   flex-direction: column;
   gap: 6px;
   padding: 10px;
   align-items: center;
   border-radius: 8px;

}
.forecast-item img{
   width: 70px;
   height: 70px;
}

.forecast-item:hover{
   transform: scale(1.05);
   background: rgb(255, 255, 255, 0.2);
}

footer{
   text-align: center;
   color: rgb(255, 255, 255, 0.9);
   font-size: 14px;
}
footer a {
   color: #007bff;
   text-decoration: none;
}