#home-page {
  display: flex;
  justify-content: space-between;

  min-height: calc(100vh - 4rem);
  @media (width < 600px) {
    min-height: calc(100vh - 3.5rem);
  }
  @media (width < 450px) {
    min-height: calc(100vh - 3rem);
  }

  > .app-title {
    display: none;
  }

  .app-title {
    font-size: 2rem;
    @media (width < 600px) {
      font-size: 1.75rem;
    }
    margin-top: 1rem;
    margin-bottom: 1rem;
    white-space: nowrap;

    .username {
      color: hsl(150, 100%, 20%);
    }

    span:not(:has(.username)) + .bx {
      display: none;
    }
  }

  form {
    max-width: 375px;
    @media (width < 600px) {
      max-width: 358px;
    }
    @media (width < 450px) {
      max-width: 341px;
    }

    > div {
      margin-bottom: 1.6rem;

      @media (width < 600px) {
        margin-bottom: 1.55rem;
      }

      @media (width < 450px) {
        margin-bottom: 1.5rem;
      }
    }

    label:has(input:disabled) :is(span, b),
    select:disabled {
      color: gray;
    }

    #exam-selection {
      margin-top: 2rem;
      &:not(.visible) + #module-selection {
        margin-top: 2.5rem;
      }
      @media (width < 600px) {
        margin-top: 1.75rem;
        &:not(.visible) + #module-selection {
          margin-top: 2.25rem;
        }
      }

      margin-bottom: 0.55rem;
      @media (width < 600px) {
        margin-bottom: 0.5rem;
      }
      @media (width < 450px) {
        margin-bottom: 0.55rem;
      }

      display: flex;
      align-items: center;
      ul {
        margin-left: 0.5rem;
        display: flex;
        width: 50%;
        justify-content: space-between;
      }

      input + span {
        text-transform: capitalize;
      }
    }

    #module-selection {
      white-space: nowrap;

      #coverage {
        color: gray;
      }

      &:not(:has(.coverage.visible)) {
        #coverage {
          display: none;
        }
      }

      #modules-header {
        display: flex;
        justify-content: space-between;
      }

      li {
        display: flex;
        justify-content: space-between;

        .coverage {
          margin-left: 0.5rem;
          margin-right: 0.15rem;
          border-radius: 15%;
          padding: 0.15rem 0.25rem 0 0.25rem;
        }
      }

      &:not(:has(.ongoing.visible)) .ongoing {
        display: none;
      }
      .ongoing {
        color: hsl(0, 100%, 45%);
      }
    }

    #behavior {
      &:not(:has(.visible)) {
        display: none;
      }
      @media (width >= 450px) {
        white-space: nowrap;
      }
    }

    margin-bottom: 2.5rem;
  }

  #leaderboard-empty {
    font-size: 1.2rem;
  }

  &:has(.app-title .username) #leaderboard-empty {
    display: none !important;
  }
}