*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    width: 100%;
    /* aspect-ratio: 1; */
    height: 100vh;
    background-color: rgb(54, 53, 57);
    display: grid;
    /* flex-direction: row; */
    place-items: center;
}
.weather_search {
  position: relative;
}
input {
  border: none;
  background: #1e1e1e;
  color: #fff;
  outline: none;
  padding: 1rem 8rem;
  border-radius: 5px;
  box-shadow: rgba(100, 100, 111, 0.2) 10px 7px 29px 0px;
}

.weather_search i {
  position: absolute;
  left: 10px;
  top: 10px;
  font-size: 15px;
  color:white;
}
.weather{
    width: 80vw;
    height: 100%;
    background-color: azure;
    box-shadow: -5px 8px 10px 10px whitesmoke;
    & .fa-search{
        font-size: 40px;
    }
   & input{
    font-size: 40px;
   }
    /* position: relative; */ 
}



.weather_body{
    display: grid;
    place-items: center;
    /* position: abs/olute; */
   & h1{
   font-size: 60px;
   margin-top: 50px;
   margin-bottom: 20px;
    }
    & .weather_date_time{
        font-size: 40px;
    }
    & .weather_data{
        & .weather_icon img{
    width: 500px;}
    & .weather_forecast{
        text-align: center;
      font-size: 80px;
      margin: 2rem;
     
    }
    }
    & .weather_temperature{
        font-size: 40px;
        margin: 2rem;
    }
    & .weather_minmax{
        /* width:100%; */
        height: auto;
        margin: 2rem;

        font-size: 40px;
        display: grid;
        place-items: center;

  grid-template-columns: repeat(2, 1fr); /* ✅ Responsive layout */
gap: 10rem;
}
}
.weather_info{
    font-size: 50px;
    display: grid;
    place-items:right;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); /* ✅ Auto responsive grid */



& .weather_card{
    background-color:rgb(213, 224, 224);
    margin: 1rem;
    height:220px;
 }
}

@media (width<=1000px){
    .weather{
        width: auto;
        height: auto;
    }
      .weather_data .weather_icon img {
    max-width: 500px;
  }

  .weather_data .weather_forecast {
    font-size: 2rem;
  }
    .weather_temperature,
  .weather_minmax,
  .weather_info {
    font-size: 3rem;
  }
  .weather_info{
        grid-template-columns: repeat(auto-fit, minmax(391px, 1fr));
  }
} 


@media (width<=768px) {
  /* .weather_search input {
    padding: 1rem 2rem;
  } */
 & .weather_search i{
    font-size: 5px;
  }

  .weather_body h1 {
    font-size: 3rem;
  }
  
  /* & .weather_minmax {
    font-size: 0px;
  } */

  .weather_data .weather_forecast {
    font-size: 1.5rem;
  }
}

 
@media (width<=600px) {
  /* .weather_search input {
    padding: 1rem 2rem;
  } */
 .weather {
    & .fa-search {
        font-size: 20px;
    }
}
  .weather_search input{
    font-size: 13.5px;
  }
  .weather_body h1 {
    font-size: 3rem;
  }
  .weather_date_time{
    width: 70%;
  }

  .weather_data .weather_forecast {
    font-size: 1rem;
  }
  & .weather_minmax{
    .weather_max{
    font-size:20px;
    }
       .weather_min{
    font-size:20px;
    }
  }
}