#footer {
  font-size: 0.95em;
  display: grid;
  justify-content: space-evenly;
  gap: 0.4rem;

  @media (width < 600px) {
    font-size: 0.9em;
  }
  @media (width < 450px) {
    justify-content: space-between;
  }

  &.logged-in {
    grid-template-areas:
      "welcome leaderboard-link github"
      "welcome leaderboard dark-mode";

    @media (width < 750px) {
      grid-template-areas:
        "welcome github"
        "leaderboard-link github"
        "leaderboard dark-mode";

      #github .bx {
        font-size: 1.8em;
      }
    }
  }

  &:not(.logged-in) {
    grid-template-areas:
      "leaderboard-link github"
      "leaderboard dark-mode";

    #welcome,
    #login {
      display: none;
    }
  }

  &.leaderboard-page {
    display: flex;

    #welcome,
    #leaderboard {
      display: none;
    }
  }

  #welcome {
    grid-area: welcome;
  }
  #leaderboard {
    grid-area: leaderboard;
  }
  #dark-mode {
    grid-area: dark-mode;
  }
  #github {
    grid-area: github;
  }
  #leaderboard-link {
    grid-area: leaderboard-link;
  }

  > * {
    margin: auto;
  }

  #welcome {
    max-width: 400px;
    white-space: nowrap;
    overflow: hidden;

    @media (width <900px) {
      max-width: 300px;
    }
  }

  #leaderboard {
    position: relative;
  }

  #github .bx {
    color: #04442c;
    font-size: 1.65em;
  }

  .toggle-container {
    display: flex;
    align-items: center;

    label {
      &:has(.toggle) {
        position: relative;
        display: inline-block;
        width: 2.75rem;
        height: 1.5rem;
      }

      .toggle {
        display: none;

        &:checked + .slider {
          background-color: #04442c;

          &::before {
            -webkit-transform: translateX(1rem);
            -ms-transform: translateX(1rem);
            transform: translateX(1rem);
          }
        }
      }

      .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 2rem;
        background-color: #ccc;
        -webkit-transition: 0.4s;
        transition: 0.4s;

        &::before {
          position: absolute;
          content: "";
          height: 1rem;
          width: 1rem;
          left: 0.25rem;
          bottom: 0.25rem;
          border-radius: 50%;
          background-color: white;
          -webkit-transition: 0.4s;
          transition: 0.4s;
        }
      }
    }
  }
}

@media print {
  footer {
    display: none;
  }
}