nav {
  width: 100vw !important;
  height: 10vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  font-family: "Poppins", sans-serif;
  border-radius: 0 0 16px 16px;
}

nav ul.nav-list {
  height: 100%;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between !important;
  gap: 2rem;

  li {
    width: calc((100% - 60%) / 2);
    font-size: 1.6rem !important;
    gap: 3rem !important;
    transition: all 0.3s linear;
    cursor: pointer;

    a {
      color: var(--white);
      text-decoration: none;
      font-size: 1.6rem;
      font-family: "Poppins";
      font-weight: 500;
    }

    .btn-light {
      color: var(--black);
    }

    img#logo {
      width: 20%;
      z-index: 0;
    }

    button.action-btn.btn.btn-light {
      min-width: 150px;
      padding: 0.5rem 2rem !important;
      font-size: 1.6rem;
    }
  }

  .logo-container {
    width: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dark-text {
    color: var(--primary-color) !important;
  }

  .search-bar {
    position: absolute;
    border-radius: 3rem;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    transition: all 0.3s linear;

    width: 0;
  }

  .search-bar.active {
    width: 100%;
  }

  .search-bar button[type="submit"] {
    position: relative;
    font-size: 2.4rem;
    outline: none;
    border: none;
    background: transparent;
    color: var(--primary-color);
  }

  .search-bar input[type="text"] {
    height: 6rem;
    width: 100%;
    border: none;
    outline: none;
    font-size: 2rem;
    color: var(--primary-color);
    background-color: transparent;
    padding: 0 1rem;
    position: relative;
  }

  .search-bar .remove {
    color: var(--primary-color);
    position: absolute;
    width: 100%;
  }
}

main {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 5rem;

  .info-container {
    color: var(--white);
    font-size: 1.6rem;
    font-family: "Poppins", sans-serif;

    #web-title {
      font-size: calc(3.2rem + 1vw);
      margin-top: 10vh;
      font-family: "Noto Sans", sans-serif;
      font-weight: 500;

      span.grey {
        color: var(--grey);
      }
    }

    .statistics {
      background: linear-gradient(45deg, #7c7c7c2c, #ffffff18);
      color: var(--white);
      margin: 2rem 0;
      padding: 2.5rem 1.2rem;

      .btn-light {
        font-size: 1.6rem;
        font-weight: 600;

        text-align: center;
      }

      #city-input::placeholder {
        color: var(--primary-color);
      }
    }

    .risk-of-pollution {
      background: var(--secondary-color);
      color: var(--white);
      margin: 2rem 0;
      padding: 2.5rem 1.2rem;

      .btn-warning {
        width: fit-content;
        font-size: 1.6rem;
        font-weight: 600;
      }

      .learn-more {
        width: 100%;
      }
    }

    .risk-of-pollution,
    .statistics {
      .title {
        font-size: calc(1.6rem + 1vw);
        font-weight: 600;
      }

      .aqi-value {
        font-size: calc(3rem + 1vw);
        font-weight: 600;
      }

      .aqi-text {
        font-weight: 400;

        .amplitude {
          color: var(--contrast-color);
        }
      }

      .aqi-text-title {
        font-weight: 600;
        color: var(--grey);
      }
    }
  }

  .map {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    width: 50%;
    height: 80%;
    aspect-ratio: 16/9;

    border-radius: 16px;
  }
}

section.forecast {
  height: 100vh;
  position: relative;
  div.grid.weather-forecast {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid !important;
    grid-template-areas:
      "today today today today today"
      "today today today today today"
      "today today today today today"
      "hr1 hr1 hr1 hr1 hr1"
      "container container container container container"
      "hr2 hr2 hr2 hr2 hr2"
      "next next next next next"
      "next next next next next"
      "next next next next next";
    background: var(--secondary-color);
    backdrop-filter: blur(9px);
    width: 70vw;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
    margin: 2rem;
  }
  .hr1 {
    grid-area: hr1;
    width: 100%;
    height: 0.2rem;
    background-color: var(--contrast-color);
  }
  .hr2 {
    grid-area: hr2;
    width: 100%;
    height: 0.2rem;
    background-color: var(--contrast-color);
  }

  .today-info {
    position: relative;
    height: 30%;
    grid-area: today;
    display: grid;
    grid-template-areas:
      "date date "
      "date date"
      "city temp"
      "weather feel-like"
      "weather description";
    width: 50%;
    gap: 0.2rem;
    .date {
      grid-area: date;
    }
    .city {
      grid-area: city;
      font-size: 3.6rem;
      font-weight: 600;
      color: var(--contrast-color);
    }
    .temp {
      grid-area: temp;
      font-size: 3rem;
      color: var(--white);
      font-weight: 600;
    }
    img {
      grid-area: weather;
      height: 10vw;
      max-height: 10rem;
    }
    .feel-like {
      grid-area: feel-like;
      color: var(--white);
      font-size: 2.8rem;
    }
    .description {
      grid-area: description;
      color: var(--white);
      font-size: 2.8rem;
    }
  }
  .container {
    font-size: 1.5rem;
    width: 100%;
    grid-area: container;
    display: flex;
    display: grid;
    grid-template-areas:
      "intro input"
      "error error";
    justify-content: space-evenly;
    align-items: center;
    span {
      grid-area: intro;
      color: var(--contrast-color);
      font-size: 1.7rem;
      font-weight: 700;
    }
    span.error {
      grid-area: error;
      color: red;
      flex-basis: 100%;
      text-align: center;
      font-size: 2.5rem;
      font-weight: 700;
    }
    .input-container {
      grid-area: input;
      display: flex;
      gap: 0.5rem;

      input[type="text"] {
        border-radius: 9px;
        width: 90%;
        height: 2.5rem;
        padding: 2rem;
        border: var(--hcont-color) solid 1px;
        transition: all 0.3s linear;
      }
      input[type="text"]::placeholder {
        color: var(--white);
      }
      input[type="text"]:hover {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
      }
      button {
        width: 10vw;
        border-radius: 9px;
        font-size: 1.5rem;
      }
    }
  }
  .next-days-info {
    grid-area: next;
    display: flex;
    gap: 1rem;
    justify-content: center;

    h1 {
      color: var(--white);
      font-weight: 700;
      font-size: 3rem;
    }
    .day {
      background: var(--tertiary-color) transparent;
      backdrop-filter: blur(9px);
      padding: 2rem;
      border-radius: 1rem;
      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      img {
        height: 10vw;
        max-height: 10rem;
      }
      .date {
        color: var(--contrast-color);
        font-size: 2rem;
      }
      .temp {
        color: var(--white);
        font-size: 2rem;
        font-weight: 700;
      }
      .description {
        color: var(--white);
        font-size: 2rem;
      }
    }
  }
}

@media (max-width: 1024px) {
  nav ul.nav-list.d-flex.flex-row {
    height: 100%;
    padding: 1rem 2rem;
    display: flex;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between !important;
    gap: 2rem;

    li a.action-btn {
      padding: 0.5rem 1rem !important;
      width: max-content !important;
    }

    img {
      width: 50%;
    }
  }

  /* main {
    align-items: center !important;
    justify-content: center !important;
    gap: 2rem !important;
    padding: 2rem 1rem !important;
  } */
  main.d-flex.flex-row {
    flex-direction: column !important;
  }

  .info-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    order: 1;
  }

  .map-container {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 300px !important;
    margin: 2rem 0 !important;
    order: 3;
  }

  .map {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
  }

  nav ul.nav-list {
    padding: 1rem !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }

  nav ul.nav-list li {
    font-size: 1.4rem !important;
    gap: 1rem !important;
  }

  .info-container #web-title {
    font-size: calc(2.5rem + 1vw) !important;
    margin-top: 5vh !important;
  }

  .statistics,
  .risk-of-pollution {
    padding: 1.5rem 1rem !important;
    margin: 1rem 0 !important;
  }
}

@media (max-width: 425px) {
  main {
    gap: 1.5rem !important;
    padding: 1rem 0.5rem !important;
  }

  .info-container {
    padding: 0 0.5rem !important;
  }

  .info-container #web-title {
    font-size: calc(2rem + 1vw) !important;
    margin-top: 3vh !important;
  }

  .map-container {
    max-width: 100% !important;
    height: 250px !important;
    margin: 1.5rem 0 !important;
  }

  .statistics,
  .risk-of-pollution {
    padding: 1rem 0.8rem !important;
    margin: 0.8rem 0 !important;
  }

  .statistics .title,
  .risk-of-pollution .title {
    font-size: calc(1.4rem + 1vw) !important;
  }

  .statistics .aqi-value,
  .risk-of-pollution .aqi-value {
    font-size: calc(2.5rem + 1vw) !important;
  }

  .statistics .aqi-text,
  .risk-of-pollution .aqi-text {
    font-size: 1.4rem !important;
  }

  nav ul.nav-list {
    padding: 0.8rem !important;
  }

  nav ul.nav-list li {
    font-size: 1.2rem !important;
    gap: 0.8rem !important;
  }

  .btn-warning {
    font-size: 1.4rem !important;
    padding: 0.5rem 1rem !important;
  }

  .learn-more {
    font-size: 1.4rem !important;
    padding: 0.5rem 1rem !important;
  }
}

#city-aqi-container span {
  font-size: calc(3rem + 1vw);
  font-weight: 600;
}