body{
    /* background-color: #1e2329;   */
    background-color: #030311;     
    margin: 0;
    font-family: 'Quicksand', sans-serif;
}
html{
    /* box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5); */
    min-height: 100vh;
}
 
 #search-container{
  display: flex;
  justify-content: center;
  margin: 0 auto;
  margin-top: 2em;
  border-style: none;
  width: 33vw;
 }
 #search-bar{
  background-color: rgba(255, 255, 255, 0.17);
  border-style: none;
  font-size: 18px;
  border-radius: 16px;
  color: white;
  text-align: center;
 }
 .search-image-icon{
  width: 1.5em;
  padding: .5em;
 }
 #search-button{
  background-color: rgba(255, 255, 255, 0.17);
  border-style: none;
  border-radius: 16px;
  margin-left: .5em;
 }

 
#city-name{
    color: white;
    text-align: center;
    font-size: 25px;
    margin-top: 20px;
    font-weight: 700;
 }
 .location-icon{
  margin: 5px;
 }

 #weather-icon{
  display: block;
  margin: 0 auto;
  width: 18rem;
 }
 .temperature-container{
   display: flex;
   justify-content: center;
 }
 .temperature-container-2{
   display: flex;
   justify-content: center;
   padding: 1.3em 0 0 1.3em;
 }
 .temperature-container-3{
   display: flex;
   justify-content: center;
   padding: 0 0 0 1.3em;
 }
 #temperature-2{
   font-size: 2em;
   display: flex;
 }
 .degree-sign{
   padding-top: 15px;
   color: #eda329;
 }
 .degree-sign-2{
   color: #eda329;
 }
 #temp-high, #temp-low{
   margin: 0;
   margin-left: 10px;
 }
 .weather-details{
    color: #bec3c5;
    list-style: none;
    text-align: center;
    padding: 0;
    margin-top: 20px;
 }
 #temperature{
    font-size: 6rem;
    font-weight: 900;
 }
 #type-of-weather{
    font-size: 25px;
    font-weight: 500;
    text-align: center;
    color: white;
 }
.weather-information{
    display: flex;
    justify-content: space-evenly;
    color: #bec3c5;
    width: 90%;
    margin: 0 auto;
    margin-top: 45px;
    padding: 5px 0;
}
.list-of-weather-details{
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: center;
  }
 .wind-icon{
    width: 2em;
    display: block;
    margin: 0 auto;
 }
 .fog-icon{
    width: 2.3em;
    display: block;
    margin: 0 auto;
 }
 .humidity-icon{
    width: 1.2em;
    display: block;
    margin: 0 auto;
 }
 #wind, #humidity, #rain{
    font-weight: 900;
    margin: 3px;
    font-size: 17px;
 }
 .forecast-weather{
   width: 1.5em;
 }