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

body {
  width: 100%;
  height: 100vh;
  background-color: black;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  width: 28rem;
  height: min-content;
  background-color: white;
  color: black ;
padding: 10px;
  border: solid 2px black;
  border-radius: 20px;
}

.container .search-box{
    width: 100%;
    height: min-content;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.container .search-box input{
width: 84%;
font-size: 1.7rem;
font-weight: 700;
padding: 20px;
background-color: rgba(107, 99, 99, 0.823);
border-radius: 2rem;
}

.container .search-box input::placeholder{
    color: black;
}

.container .search-box button{
    font-size: 1.5rem;
    background-color: crimson;
    padding:20px ;
    border-radius: 50%;
    transition: 0.3s;
    cursor: pointer;
}

.container .search-box button:hover{
    box-shadow: 0,-5px, 5px, black;
    background-color: rgb(250, 2, 52);
}

/* #########################################################
                  weather body 
############################################################*/

.weather-body{
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-block: 10px;
}

.weather-body .location{
    font-size: 3rem;
    color: crimson;
    font-weight: 700;
    text-transform: capitalize;
}
.weather-body img{
    width: 60%;
    margin-bottom: 15px;
}
.location-error{
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
}
.location-error .error-msg{
   
   
    font-size: 2rem;
    font-weight: 700;

    margin: 2rem;
    color: red;
  
}

.location-error img{
    height: 200px;
    width: 300px;
}





.weather-box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
    font-size: large;
}

.weather-box .temperature{
    font-size: 3rem;
    font-weight: 700;
    color: black;
   
}

.weather-box .text{
    font-size: 2rem;
    color: rgba(0, 0, 0, 0.871);
    text-transform: capitalize;
}
.box{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.box .humidity-wind{
    
    width: 84%;
    display: flex;
    justify-content:space-between;
    align-items: center;
    font-size: large;
    margin-bottom: 20px;
}

.humidity-wind .humidity{
    display: flex;
   
    justify-content: space-between;
    align-items: center;
    width:36% ;


}

.humidity-wind .humidity .text #humidity{
    font-size: 2rem;
    font-weight: 700;
}
.humidity-wind .humidity .text p{
    font-size: 1.5rem;
    color: rgba(0, 0, 0, 0.871);
}

.humidity-wind .wind{
    display: flex;
    width: 45%;
    align-items: center;
    justify-content: space-between;
}

.humidity-wind .wind .humidity-des #wind-speed{
    font-size: 2rem;
    font-weight: 700;
}

.humidity-wind .wind .humidity-des div{
    font-size: 1.5rem;
    color: rgba(0, 0, 0, 0.871);
}