@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap");

* {
  font-family: "Poppins", sans-serif;
  text-align: center;
}

#loader-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}

#loader-container-hourly{
  display: flex;
  justify-content: center;
  width: 100vw;
}

/* HTML: <div class="loader"></div> */
.loader {
  width: 20px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #000;
  box-shadow: 0 0 0 0 #0004;
  animation: l1 1s infinite;
}
@keyframes l1 {
  100% {
    box-shadow: 0 0 0 30px #0000;
  }
}

#weather-row,
#hourly-row {
  display: flex;
  align-content: center;
  width: 100%;

  overflow-x: scroll;
}

#weather-card,
#hour-card {
  margin: 10px;
  padding: 20px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border-radius: 10px;
  min-width: 250px;
}

#weather-card {
  cursor: pointer;
}

.weather-icon-left .material-symbols-rounded {
  margin-left: 0 !important;
}

.weather-icon-center {
  display: flex;
  align-items: center;
}

#location-alerts-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

#location-alerts {
  margin: 10px;
  padding: 20px;
  border-radius: 10px;
  width: max-content;
}

.weather-alert {
  display: flex;
  align-items: center;
  justify-content: center;

  color: red;

  cursor: help;
}

.weather-icon-center .material-symbols-rounded,
.weather-alert .material-symbols-rounded {
  margin: 10px;
  margin-right: 5px;
}

.weather-icon-small {
  display: flex;
  align-items: start;
}

.weather-icon-small .material-symbols-rounded {
  font-size: 50px !important;
}

.weather-icon-big {
  display: flex;
  justify-content: center;
}

.weather-icon-big .material-symbols-rounded {
  font-size: 100px;
}

.weather-mini-info {
  display: flex;
  align-items: center;
  justify-content: center;
}