@media only screen and (max-width: calc(1024px + 5rem)) {
  #mediaQueryDebug {
    background: #9ccc65;
    &::before {
      content: "green";
    }
  }
  .content-grid {
    --content-max-width: 768px;
  }
  #testConfig {
    font-size: 0.7rem;
    --horizontalPadding: 0.6em;
  }
  #bannerCenter {
    font-size: 0.85rem;
    .banner .container {
      .closeButton {
        padding: 0.4em;
      }
    }
  }
  header {
    #logo {
      .text {
        font-size: 1.5rem;
        .top {
          display: none;
        }
      }
    }
    nav {
      .textButton.view-account {
        gap: 0.5em;
      }
    }
  }
  .pageAccountSettings .main {
    gap: 2rem;
    .right .tab .section {
      grid-template-columns: 1fr;
      grid-template-areas:
        "title"
        "text" "buttons";
      &.discordIntegration .info {
        height: 8rem;
        display: grid;
        align-content: center;
      }
    }
  }
  .pageTest {
    #result .wrapper .stats.morestats {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr;
    }
    #liveStatsTextTop,
    #liveStatsTextBottom {
      font-size: 7rem;
    }
  }
  .pageAbout {
    .section {
      .contactButtons {
        grid-template-columns: 1fr 1fr;
      }
    }
  }
  .pageSettings {
    .section {
      grid-template-columns: 1fr 1fr;

      &[data-config-name="customBackgroundFilter"] {
        .groups {
          grid-template-columns: 1fr;
        }
      }
    }
    .settingsGroup.quickNav .links {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    }
  }
  .pageAccount {
    .group.resultBatches {
      gap: 1rem;
      grid-template-areas: "bar" "button" "text";
      grid-template-columns: 1fr;
    }
    .group.topFilters {
      .buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        button[filter="all"] {
          grid-column: span 2;
        }
        &.filterGroup {
          margin-top: 2rem;
        }
      }
    }
    .group.chart .below {
      grid-template-columns: 1fr;
      .buttons {
        grid-template-columns: 1fr 1fr 1fr 1fr;
      }
    }
    .triplegroup.stats {
      .val {
        font-size: 2rem;
      }
    }
    .group.history {
      font-size: 0.75rem;
    }
    .group.history table thead td:nth-child(6),
    .group.history table tbody td:nth-child(6) {
      display: none;
    }
    // .group.history table thead td:nth-child(8),
    // .group.history table thead td:nth-child(9),
    // .group.history table tbody td:nth-child(8),
    // .group.history table tbody td:nth-child(9) {
    //   display: none;
    // }
  }
  .profile .pbsWords,
  .profile .pbsTime {
    font-size: 1rem;
  }
  .profile {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "info"
      "leaderboards"
      "pbsTime"
      "pbsWords";
    .leaderboardsPositions {
      grid-template-areas: "title title" "t15 t60";
    }
  }
  .profile {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "info"
      "leaderboards"
      "pbsTime"
      "pbsWords";
    .details .bioAndKeyboard {
      height: 100%; //dumb safari fix
    }
    .details.soc {
      grid-template-columns: 1.25fr auto 1fr auto auto;
      .typingStats {
        font-size: 0.5rem;
        grid-template-columns: 1fr;
      }
    }
    .details.bioAndKey {
      grid-template-columns: 1.25fr auto auto auto 1fr;
      .typingStats {
        grid-template-columns: 1fr;
      }
    }
    .details.both {
      grid-template-columns: 1.25fr auto 1.25fr auto;
      grid-template-areas:
        "avAndName sep2 bioAndKey bioAndKey"
        "typingStats typingStats typingStats socials";
      .sep1,
      .sep3 {
        display: none;
      }
      .typingStats {
        grid-template-columns: 1fr 1fr 1fr;
        width: 100%;
      }
      .socials {
        justify-content: start;
        .title {
          display: block;
        }
        .value {
          grid-auto-flow: column;
        }
      }
    }
    .details.none {
      grid-template-columns: 1fr auto 1fr;
      .typingStats {
        grid-template-columns: 1fr;
        // grid-template-areas:
        //   "avAndName"
        //   "typingStats";
        // grid-template-columns: 1fr;
        // .separator {
        //   display: none;
        // }
      }
    }
    .leaderboardsPositions {
      grid-template-areas: "title title" "t15 t60";
    }
  }
  footer {
    .leftright {
      .left {
        display: grid;
        grid-template-columns: repeat(4, auto);
      }
      .right {
        display: grid;
        grid-template-columns: 1fr;
      }
    }
  }
  #leaderboardsWrapper #leaderboards {
    .tables {
      grid-template-columns: 1fr;
      height: 100%;
      .titleAndTable .title {
        font-size: 1rem;
      }
      .rightTableWrapper,
      .leftTableWrapper {
        height: calc(50vh - 9rem);
      }
    }
    .leaderboardsTop {
      .buttons .timeRange {
        font-size: 0.75rem;
      }
      // grid-template-columns: 1fr 1fr;
      // grid-template-areas: "title title" "subtitle yesterday" "buttons buttons";
      .mainTitle {
        font-size: 1.5rem;
      }

      // .buttons .timeRange {
      //   font-size: 0.75rem;
      //   grid-template-columns: 1fr 1fr 1fr;
      //   .languageSelect {
      //     grid-column: span 1;
      //   }
      // }
    }
  }
  #customTextModal {
    .modal {
      grid-template-areas:
        "topButtons topButtons"
        "textArea textArea"
        "checkboxes checkboxes"
        "ok ok";
      grid-template-columns: 1fr 1fr;
      .inputs {
        grid-template-columns: 1fr 1fr;
      }
    }
  }
  #supportModal {
    .modal {
      .buttons {
        grid-template-columns: 1fr 1fr;
      }
    }
  }
  #testActivity {
    --box-size: 0.7em;
    .wrapper {
      grid-template-areas:
        "top top"
        "chart chart"
        "month month";
    }
    .days {
      display: none;
    }
    // .activity div,
    // .legend div {
    //   width: 0.9em;
    //   height: 0.9em;
    //   border-radius: 0.2em;
    // }
  }
}
