@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap");

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

body {
  width: 100%;
  height: 100%;
  font-family: "Quicksand", sans-serif;
  background: linear-gradient(
    #3498db,
    #2ecc71,
    #f39c12,
    #ecf0f1 
  );
}

header{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


.navbar{
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
}

.search-location{
  margin: 1rem;
  background: #f73efd;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  padding: 5px 8px;
  border-radius: 5px;
}

.location-input{
  height: 2rem;
  width: 12rem;
  font-size: 15px;
  font-weight: 500;
  outline: none;
  border: 0;
}

.current-conditions{
  max-width: 720px;
  width: 50rem;
  height: 20rem;
  margin: 8rem 1rem 4rem 1rem ;
  border-radius: 1rem;
  /* background-image: url(Images/dark-clouds-during-rainy-weather.jpg); */
  background-image: url(Images/18309129_SL-042221-42420-09.jpg);
  /* background-image: url(Images/nature-colorful-landscape-dusk-cloud.jpg); */
  background-position: center;
  background-size: cover;
}

.top-border{
  width: 100%;
  height: 3rem;
  background: #212121;
  border-radius: 1rem 1rem 0 0;
  opacity: .7;
}

.weather-conditions{
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;

}

.weather-icon{
  height: 8rem;
  margin: 0 2rem;
}

.weather-type{
  font-size: 30px;
  font-weight: 600;
  color: #8eff7f;
}

.client-location{
  font-size: 16px;
  color: #afafaf;
  font-weight: 500;
}

.temperature-value{
  font-size: 100px;
  font-weight: 900;
  color: #52b657;
}

.max-min-temp{
  font-size: 18px;
  font-weight: 500;
  color: #61e94f;
}

main{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.extraWeatherParameters{
  max-width: 720px;
  width: 50rem;
  height: 20rem;
  background-color: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 2px 10px #696969;
  padding: 1rem;
}


.weather-attributes img{
  width: 1.8rem;
}

.parameters{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  padding: 1rem 2rem;
}

.inner-container{
  width: 50%;
}

.feels-like-temp-value{
  margin: .5rem 0;
  display: block;
  font-size: 40px;
  font-weight: 800;
  color: #252525;
}

.weather-attributes{
  display: grid;
  grid-template-columns: 3rem 8rem 3rem;
  grid-template-rows: repeat(4, 2.5rem);
  align-items: center;
  text-align: center;
}

.attribute-value{
  justify-self: end;
}


.hourlyForecast{
  height: auto;
  max-width: 720px;
  width: 50rem;
  background-color: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 2px 10px #696969;
  padding: 1rem;
  margin: 2rem 0;
}


.forecasts{
  width: 100%;
  border: 1px solid #bababa;
  margin: 10px 0;
  border-radius: .5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.forecast-container{
  width: 100%;
  height: 3rem;
  display: grid;
  grid-template-columns: 5rem 5rem 25rem 8rem ;
  grid-template-rows: 100%;
  overflow: hidden;
  place-items: center;
}

.forecast-time{
  font-size: 15px;
  font-weight: 400;
}

.forecast-temp{
  font-size: 18px;
  font-weight: 600; 
}

.forecast-weather{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.forecast-weather-type{
  font-size: 15px;
  font-weight: 400;
  align-self: center;
}

.cloud-icon{
  height: 2rem;
}

.rain-forecast{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.rain-icon{
  height: 2rem;
}

@media (max-width: 720px) {
  .navbar{
    justify-content: center;
  }

  header{
    justify-content: center;
    align-items: center;
  }

  .current-conditions{
    width: 30rem;
  }

  .mainLeftContainer{
    justify-content: center;
    align-items: center;
  }

  main{
    justify-content: center;
    align-items: center;
  }

  .extraWeatherParameters{
    width: 30rem;
    height: auto;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    background-color: #d16bb8;  }

  .parameters{
    flex-direction: column;
    align-items: flex-start;
  }

  .inner-container{
    position: relative;
    width: 20rem;
  }

  .hourlyForecast{
    width: 30rem;
  }

  .forecast-container{
    height: 3rem;
    grid-template-columns: 4rem 3rem 14rem 6rem ;
  }

}


@media (max-width: 530px){
  .current-conditions{
    width: 20rem;
    box-sizing: border-box;
    margin: 3rem;
  }

  .weather-conditions{
    padding: 1rem;
  }

  .weather-icon{
    display: none;
  }

  .extraWeatherParameters{
    width: 20rem;
  }

  .weather-attributes{
    grid-template-columns: 3rem  7rem 4rem;
  }

  .hourlyForecast{
    width: 20rem;
  }

  .forecast-container{
    height: 6rem;
    padding: .5rem;
    grid-template-rows: 2.5rem 2.5rem;
    grid-template-columns: 11rem 5rem;
    align-items: center;
    justify-items: start;
    column-gap: 15px;
  }

  .forecast-temp{
    margin: 0 ;
  }

  .forecast-weather-type{
    text-overflow: ellipsis;
  }

} 
