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

body {
  font-family: "Pridi", serif;
  font-weight: 200;
  letter-spacing: 0.1ch;
  font-size: clamp(0.5rem, 0.4rem + 1vw, 1.1rem);
}

/* Fonts */
.location__info {
  font-size: 1rem;
}

.section__title,
.current__weather,
.info-label,
.hourly__dayTime__day,
.daily__weather {
  font-weight: 700;
  letter-spacing: 0.2ch;
}

.section__title {
  font-size: 1.5rem;
}

.current__weather,
.current__temp {
  font-size: clamp(1rem, 0.172rem + 4.138vw, 2.5rem);
}

/* Layout */
main {
  margin: auto;
  padding: 2rem;
  width: 100%;
  max-width: 1000px;
}

body.day {
  background-color: rgba(0, 255, 255, 0.331);
  color: rgb(57, 55, 55);
}

body.night {
  background-color: rgb(57, 55, 55);
  color: rgb(225, 221, 221);
}

/* Location info Section */

.location__info {
  display: flex;
  justify-content: space-between;
  align-content: center;
}

.location__info div {
  margin-bottom: 0.25rem;
}

.section__title {
  text-align: left;
  margin: 2rem 0;
}

/* Current Section */
.current--wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.current--left {
  display: flex;
  align-items: center;
  text-align: center;
  height: fit-content;
}

.current__icon > img {
  --img-size: clamp(8rem, 4.138rem + 19.31vw, 15rem);
  width: var(--img-size);
  height: var(--img-size);
}

.current__data--wrapper div {
  margin-bottom: 0.25rem;
}

.current__highLow--wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.current--right {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 2rem;
}

@media (min-width: 700px) {
  .current--wrapper {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    min-height: 20rem;
  }

  .current--left {
    flex-direction: column;
    position: relative;
    width: 50%;
  }
  .current__icon {
    margin-top: -7rem;
  }

  .current__data--wrapper {
    position: absolute;
    top: 10%;
  }

  .current--right {
    width: 50%;
    justify-content: flex-start;
  }
}

/* Daily Section */

.daily {
  margin: auto;
}

.daily--wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 1rem;
}

.daily__day--wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  width: 250px;
  padding: 0.5rem;
  border: 2px solid rgb(57, 55, 55);
  border-radius: 0.5rem;
  box-shadow: 7px 5px 5px rgba(57, 55, 55, 0.5);
}

body.night .daily__day--wrapper {
  border: 2px solid rgb(225, 221, 221);
  box-shadow: 7px 5px 5px rgba(225, 221, 221, 0.5);
}

.daily__day--icon img {
  --img-size: clamp(3rem, -0.759rem + 13.793vw, 7rem);
  width: var(--img-size);
  height: var(--img-size);
}

.daily__day--wrapper div {
  margin-bottom: 0.25rem;
}

.daily__temp--wrapper {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

@media (max-width: 600px) {
}

/* Hourly Section */

.hourly {
  overflow-x: scroll;
}

.hourly__table {
  width: 100%;
}

.hourly__hour {
  display: flex;
  text-align: center;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  margin-bottom: 1rem;
  padding: 1rem;
}

body.day .hourly__hour:nth-child(odd) {
  background-color: rgba(154, 234, 234, 0.331);
}

body.night .hourly__hour:nth-child(odd) {
  background-color: rgba(74, 75, 75, 0.331);
}

.hourly__weather {
  min-width: 200px;
}

.hourly__weather--icon {
  --img-size: 3.5rem;
  width: var(--img-size);
  height: var(--img-size);
  margin: auto;
}

.good {
  color: green;
}

.unhealthy {
  color: orange;
}

.hazardous {
  color: red;
}

/* Module */

.module {
  display: grid;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 999;
  background-image: url("../images/image.jpg"),
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
  width: 100%;
  height: 100vh;
  background-image: url("../images/clouds.jpg"),
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
  background-blend-mode: overlay;
  overflow: hidden;
}

.module__window {
  width: 50vw;
  min-width: 300px;
  height: 200px;
  background-color: rgba(255, 255, 255, 0.734);
  border-radius: 0.4rem;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);

  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 2rem 0;
}

.module__header {
  font-weight: 700;
}

.module__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.module__input {
  border: 1px solid rgba(70, 67, 67, 0.71);
  border-radius: 0.4rem;
  padding: 0.3rem;
}

.module__input::placeholder {
  font-size: 0.75em;
}

@media (min-width: 600px) {
  .module__form {
    flex-direction: row;
  }
}