.pageLeaderboards {
  .content {
    display: grid;
    gap: 2rem;
    grid-template-areas: "buttons table";
    grid-template-columns: 20rem 1fr;

    // grid-template-areas: "table buttons";
    // grid-template-columns: 1fr 15rem;
    height: 100%;

    .bigtitle {
      font-size: 2em;
      margin-bottom: 1em;
      .text {
        grid-area: text;
      }
      .subtext {
        grid-area: subtext;
        color: var(--sub-color);
        font-size: 1rem;
        display: flex;
        gap: 1em;
        align-items: center;
        .divider {
          height: 1.75em;
          width: 0.25em;
          background: var(--sub-alt-color);
          border-radius: calc(var(--roundness) / 2);
        }
        button {
          // font-size: 0.75em;
          margin-left: -0.5em;
          padding: 0.25em 0.5em;
        }
      }
    }

    .tableAndUser {
      grid-area: table;
      font-size: 1rem;

      & > .divider {
        height: 0.25rem;
        width: 100%;
        background: var(--sub-alt-color);
        border-radius: calc(var(--roundness) / 2);
        margin-bottom: 1em;
      }

      .titleAndButtons {
        align-items: center;
        font-size: 1em;
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-content: space-between;
        button {
          width: 3em;
        }
        .title {
          font-size: 1rem;
          color: var(--sub-color);
        }
        .jumpButtons {
          justify-self: end;
          display: grid;
          grid-auto-flow: column;
          gap: 0.5em;
          align-items: center;
          .updating {
            font-size: 1.5em;
            color: var(--sub-color);
            margin-left: 0.5em;
          }
        }
      }

      & > .title {
        font-size: 1.25rem;
        color: var(--sub-color);
      }

      .narrow {
        display: none;
      }

      .bigUser {
        // color: var(--main-color);
        font-size: 1em;
        margin-bottom: 2em;
        margin-top: 2em;
        background: var(--sub-alt-color);
        padding: 1em 2em;
        border-radius: var(--roundness);
        display: flex;
        align-items: center;
        gap: 2em;
        // .rank {
        // width: 7ch;
        // text-align: left;
        // }

        .warning {
          padding: 0.5em 0;
          text-align: center;
          grid-column: 1 / -1;
          color: var(--sub-color);
          width: 100%;
        }

        .userInfo {
          flex-grow: 1;
        }

        .stat {
          text-align: right;
          .title {
            font-size: 0.75em;
            color: var(--sub-color);
          }
          .sub {
            opacity: 0.5;
          }
          &:last-child {
            text-wrap-mode: nowrap;
          }
        }
        .date {
          font-size: 0.75em;
          // color: var(--sub-color);
          .sub {
            font-size: 0.75em;
            color: var(--sub-color);
          }
        }
        &.you {
          .userInfo {
            .bottom {
              font-size: 0.75em;
              color: var(--sub-color);
            }
          }
          //   font-size: 1rem;
          //   .stat .title {
          //     font-size: 0.8em;
          //   }
        }
      }
      table {
        width: 100%;
        border-spacing: 0;
        border-collapse: collapse;

        --padding: 1em 1.5rem;

        .sub {
          opacity: 0.5;
        }

        td {
          padding: var(--padding);
        }

        .globalRank {
          i {
            display: none;
          }
          span {
            display: inline;
          }
        }
        &.friendsOnly {
          td:first-child {
            display: table-cell;
          }
          .globalRank {
            i {
              display: inline;
            }
            span {
              display: none;
            }
          }
        }
        td:first-child {
          display: none;
        }
        td:first-child,
        td:nth-child(2) {
          // padding: 0;
          width: 0;
          text-align: center;
        }

        thead {
          color: var(--sub-color);
          font-size: 0.75em;

          td {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            z-index: 99;
            &.stat {
              width: 15ch;
              text-align: right;
            }
            &.date {
              width: 1px;
              text-align: right;
            }
          }
        }

        .avatarNameBadge {
          display: grid;
          grid-template-columns: max-content max-content auto;
          gap: 0.5em;
          place-items: center left;
          .avatar .userIcon {
            color: var(--sub-color);
          }
          .entryName {
            text-decoration: none;
            color: var(--text-color);
            cursor: pointer;
          }
          .avatar {
            --size: 1.125em;
            grid-row: 1/2;
            grid-column: 1/2;
          }
          .badge {
            font-size: 0.75em;
          }
          .flagsAndBadge {
            display: flex;
            gap: 0.5em;
            color: var(--sub-color);
            place-items: center;
          }
        }

        tbody {
          color: var(--text-color);

          tr.me {
            color: var(--main-color);
            a {
              color: var(--main-color) !important;
            }
          }

          td.stat {
            text-align: right;
          }

          td.date {
            text-wrap-mode: nowrap;
            text-align: right;
            font-size: 0.75em;
          }

          tr:nth-child(odd) td {
            background: var(--sub-alt-color);
          }
          td:nth-child(1) {
            border-radius: calc(var(--roundness) / 2) 0 0
              calc(var(--roundness) / 2);
          }
          td:last-child {
            border-radius: 0 calc(var(--roundness) / 2)
              calc(var(--roundness) / 2) 0;
          }
        }
      }
      & > .loading {
        display: grid;
        place-items: center;
        font-size: 3em;
        color: var(--sub-color);
        padding: 1em;
      }
    }
    .error {
      display: grid;
      grid-auto-flow: column;
      gap: 2rem;
      place-content: center;
      align-items: center;
      font-size: 2em;
      color: var(--sub-color);
      padding: 1em;
    }
    .sideButtons {
      align-content: start;
      align-items: start;
      grid-area: buttons;
      display: grid;
      gap: 1em;
      align-content: start;
      background: var(--sub-alt-color);
      height: max-content;
      border-radius: var(--roundness);
      padding: 1rem;
      button {
        justify-content: start;
        padding-left: 0.75em;
      }
      .divider {
        background: var(--bg-color);
        width: 100%;
        height: 0.25em;
        border-radius: var(--roundness);
      }
      .buttonGroup {
        display: grid;
        gap: 1em;
      }
    }
  }
}
