.main {
  justify-content: normal;
}

.weather-globe {
  --weather-globe-background-color: var(--box-bg-color);
  --weather-globe-border: 2px solid var(--secondary-color);
  --weather-globe-border-radius: 15px;

  h2 {
    text-align: center;
  }

  #weather-details {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-template-areas:
      "current    title title title"
      "current    .     .     .    "
      "three-hour .     .     .    "
      "three-hour .     .     .    "
      "tomorrow   .     .     .    "
      "tomorrow   .     .     .    ";
    gap: 1em;
    margin: 1em 0;
    padding: 1em;
    align-items: center;
    text-align: center;
    border: var(--weather-globe-border);
    border-radius: var(--weather-globe-border-radius);
    background-color: var(--weather-globe-background-color);

    @media (orientation: portrait) {
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(7, 1fr);
      grid-template-areas:
        "title      title title"
        "current    .     .    "
        "current    .     .    "
        "three-hour .     .    "
        "three-hour .     .    "
        "tomorrow   .     .    "
        "tomorrow   .     .    ";
    }

    &:empty {
      display: none;
    }

    .wd-title {
      grid-area: title;
      font-size: calc(var(--content-font-size) * 1.25);
      font-style: italic;
    }

    .wd-item-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5em;
      padding: 0.75em 0;
      border: var(--weather-globe-border);
      border-radius: var(--weather-globe-border-radius);
      background-color: var(--secondary-color);
      color: var(--header-color);

      svg {
        width: var(--content-font-size);
        height: var(--content-font-size);

        path {
          stroke: var(--header-color);
          stroke-width: 7px;
          fill: none;
        }
      }

      &.wd-big-item-current {
        grid-area: current;
      }

      &.wd-big-item-three-hour {
        grid-area: three-hour;
      }

      &.wd-big-item-tomorrow {
        grid-area: tomorrow;
      }

      .wd-big-item-container {
        display: flex;
        align-items: center;
        margin: auto;
      }

      .wd-big-item-image {
        height: calc(var(--content-font-size) * 2);
        width: calc(var(--content-font-size) * 2);
      }

      .wd-big-item-description {
        font-size: calc(var(--content-font-size) * 0.5);
        font-style: italic;
      }
    }
  }

  .info {
    display: none;
    text-align: center;
    font-style: italic;
    border: var(--weather-globe-border);
    border-radius: var(--weather-globe-border-radius);
    background-color: var(--weather-globe-background-color);
    padding: 1em;
  }

  #weather-details:empty + .info {
    display: block;
  }

  #globe-wrapper {
    width: 80vw;
    height: 50vh;
    margin: 0 auto;
    border: var(--weather-globe-border);
    border-radius: var(--weather-globe-border-radius);
    position: relative;
    overflow: hidden;

    #globe {
      width: 100%;
      height: 100%;
    }
  }

  .btn-container {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 1em;
    max-width: 100%;
    padding: 1em 0;
  }

  button {
    background-color: var(--secondary-color);
    color: var(--header-color);
    font-size: var(--content-font-size);
    padding: 0.2em 0.5em;
    cursor: pointer;
    border-radius: var(--weather-globe-border-radius);
  }

  #how-this-works {
    font-size: calc(var(--content-font-size) * 0.75);
    h2 {
      text-align: left;
    }
    @media (orientation: portrait) {
      max-width: 80%;
    }
  }
}