@import url("https://fonts.googleapis.com/css2?family=Fira+Code&family=IBM+Plex+Sans:wght@600&family=Inconsolata&family=Roboto+Mono&family=Source+Code+Pro&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat&family=Roboto&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Oxygen&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Itim&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Comfortaa&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Coming+Soon&display=swap");

:root {
  --roundness: 0.25rem;
  --font: "Roboto Mono";
  // scroll-behavior: smooth;
  scroll-padding-top: 2rem;
}

::placeholder {
  color: var(--sub-color);
  opacity: 1;
  /* Firefox */
}

html {
  @extend .ffscroll;
}

.ffscroll {
  scrollbar-width: thin;
  scrollbar-color: var(--sub-color) transparent;
}

a {
  display: inline-block;
}

input {
  outline: none;
  border: none;
  border-radius: var(--roundness);
  background: rgba(0, 0, 0, 0.1);
  color: var(--text-color);
  padding: 0.5rem;
  font-size: 1rem;
  line-height: 1rem;
  font-family: var(--font);
}

input[type="range"] {
  -webkit-appearance: none;
  padding: 0;
  width: 100%;
  height: 1rem;
  border-radius: var(--roundness);
  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    padding: 0;
    width: 2rem;
    height: 1rem;
    border-radius: var(--roundness);
    background-color: var(--main-color);
  }
}

input[type="color"] {
  -webkit-appearance: none;
  padding: 0;
  width: 100%;
  // height: 32px;
  height: 1.8rem;
  overflow: hidden;
  border-radius: var(--roundness);
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

input[type="color"]::-webkit-color-swatch {
  border: none;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

.colorPicker {
  text-align: center;
  will-change: transform;
  transition: transform 0.2s ease-in-out;
  overflow: hidden;
  border-radius: var(--roundness);

  & label {
    position: absolute;
    width: 100%;
    // height: 32px;
    line-height: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: auto;
    color: var(--bg-color);
    cursor: pointer;
  }

  & [for="--bg-color"] {
    color: var(--text-color);
  }

  & #--bg-color {
    border: 1px solid var(--sub-color);
  }
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--text-color);
  overflow-x: hidden;
  background: var(--bg-color);
}

.customBackground {
  content: "";
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: -999;
}

html {
  overflow-y: scroll;
}

.select2-dropdown {
  background-color: var(--bg-color);
  color: var(--text-color);
  outline: none;
}

.select2-selection {
  background: rgba(0, 0, 0, 0.1);
  height: fit-content;
  height: -moz-fit-content;
  padding: 5px;
  border-radius: var(--roundness);
  color: var(--text-color);
  font: var(--font);
  border: none;
  outline: none;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  color: var(--text-color);
  outline: none;
}

.select2-container--default
  .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--sub-color);
  color: var(--text-color);
}

.select2-container--default .select2-results__option--selected {
  background-color: var(--main-color);
  color: var(--bg-color);
}

.select2-container--open .select2-dropdown--below {
  border-color: rgba(0, 0, 0, 0.1);
  background: var(--bg-color);
  color: var(--sub-color);
  border-radius: var(--roundness);
}

.select2-container--default .select2-selection--single {
  color: var(--text-color);
  background: rgba(0, 0, 0, 0.1);
  outline: none;
  border: none;
  height: auto;
}

.select2-selection:focus {
  height: fit-content;
  height: -moz-fit-content;
  padding: 5px;
  border-radius: var(--roundness);
  color: var(--text-color);
  font: var(--font);
  border: none;
  outline: none;
}
.select2-selection:active {
  height: fit-content;
  height: -moz-fit-content;
  padding: 5px;
  border-radius: var(--roundness);
  color: var(--text-color);
  font: var(--font);
  border: none;
  outline: none;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  height: 35px;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__arrow
  b {
  border-color: var(--main-color) transparent transparent transparent;
}

.select2-container--default.select2-container--open
  .select2-selection--single
  .select2-selection__arrow
  b {
  border-color: var(--main-color) transparent;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border-color: rgba(0, 0, 0, 0.1);
  background: var(--bg-color);
  color: var(--text-color);
  border-radius: var(--roundness);
}

/* width */
::-webkit-scrollbar {
  width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--sub-color);
  transition: 0.25s;
  border-radius: 2px !important;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--main-color);
}

::-webkit-scrollbar-corner {
  background: var(--sub-color);
}

a {
  color: var(--sub-color);
  transition: 0.25s;
}

a:hover {
  color: var(--text-color);
}

.merchBanner {
  background-color: var(--main-color);
  padding: 0.5rem;
  text-align: center;
  color: var(--bg-color);
  a:hover {
    color: var(--bg-color);
  }
  .closeButton {
    transition: 0.25s;
    margin-left: 1rem;
    &:hover {
      color: var(--text-color);
      cursor: pointer;
    }
  }
}

.notification {
  position: fixed;
  background: var(--main-color);
  color: var(--bg-color);
  padding: 0.5rem 1rem;
  border-radius: var(--roundness);
  left: 50%;
  z-index: 9999;
  transform: translateX(-50%);
  top: -5rem;
}

#backgroundLoader {
  height: 3px;
  position: fixed;
  width: 100%;
  background: var(--main-color);
  animation-name: loader;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.38, 0.16, 0.57, 0.82);
  z-index: 9999;
}

@keyframes loader {
  0% {
    width: 0;
    left: 0;
  }

  50% {
    width: 100%;
    left: 0;
  }

  100% {
    width: 0;
    left: 100%;
  }
}

#leaderboardsWrapper {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: grid;
  justify-content: center;
  align-items: center;
  padding: 5rem 0;

  #leaderboards {
    width: 85vw;
    height: calc(100vh - 10rem);
    background: var(--bg-color);
    border-radius: var(--roundness);
    padding: 2rem;
    display: grid;
    gap: 2rem;
    grid-template-rows: 3rem auto;
    grid-template-areas:
      "title buttons"
      "tables tables";
    grid-template-columns: 1fr 1fr;

    .mainTitle {
      font-size: 3rem;
      line-height: 3rem;
      grid-area: title;
    }

    .title {
      font-size: 2rem;
      line-height: 2rem;
      margin-bottom: 0.5rem;
    }

    .tables {
      grid-area: tables;
      display: grid;
      gap: 1rem;
      grid-template-columns: 1fr 1fr;
      margin-bottom: 2rem;
      font-size: 0.8rem;

      .sub {
        opacity: 0.5;
      }

      .alignRight {
        text-align: right;
      }

      .titleAndTable {
        display: grid;

        .title {
          grid-area: 1/1;
        }

        .subtitle {
          grid-area: 1/1;
          align-self: center;
          justify-self: right;
          color: var(--sub-color);
        }
      }

      .globalTableWrapper,
      .dailyTableWrapper {
        height: calc(100vh - 22rem);
        @extend .ffscroll;
        overflow-y: scroll;
        overflow-x: hidden;
      }

      table {
        width: 100%;
        border-spacing: 0;
        border-collapse: collapse;

        tr td:first-child {
          text-align: center;
        }

        td {
          padding: 0.5rem 0.5rem;

          &.me {
            color: var(--main-color);
            font-weight: 900;
          }
        }

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

          td {
            padding: 0.5rem;
            background: var(--bg-color);
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            z-index: 99;
          }
        }

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

          tr:nth-child(odd) td {
            background: rgba(0, 0, 0, 0.1);
          }
        }

        tfoot {
          td {
            padding: 0.5rem;
            position: -webkit-sticky;
            position: sticky;
            bottom: 0;
            background: var(--bg-color);
            color: var(--sub-color);
            z-index: 4;
          }
        }

        tr {
          td:first-child {
            padding-left: 1rem;
          }
          td:last-child {
            padding-right: 1rem;
          }
        }
      }
    }

    .buttons {
      grid-area: buttons;
      display: -ms-grid;
      display: grid;
      gap: 1rem;
      grid-template-columns: 1fr 1fr;
      align-self: center;

      .buttonGroup {
        display: grid;
        grid-auto-flow: column;
        gap: 1rem;
        grid-area: 1/2;
      }
    }
  }
}

.wrapper {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: grid;
  justify-content: center;
  align-items: center;
  padding: 5rem 0;

  #tagsEdit {
    background: var(--bg-color);
    border-radius: var(--roundness);
    padding: 2rem;
    display: grid;
    gap: 1rem;
    overflow-y: scroll;
  }

  #presetEdit {
    background: var(--bg-color);
    border-radius: var(--roundness);
    padding: 2rem;
    display: grid;
    gap: 1rem;
    overflow-y: scroll;
  }
}

#customTextPopupWrapper {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: grid;
  justify-content: center;
  align-items: center;
  padding: 5rem 0;

  #customTextPopup {
    background: var(--bg-color);
    border-radius: var(--roundness);
    padding: 2rem;
    display: grid;
    gap: 1rem;
    width: 60vw;

    .wordfilter {
      width: 33%;
      justify-self: right;
    }

    textarea {
      background: rgba(0, 0, 0, 0.1);
      padding: 1rem;
      color: var(--main-color);
      border: none;
      outline: none;
      font-size: 1rem;
      font-family: var(--font);
      width: 100%;
      border-radius: var(--roundness);
      resize: vertical;
      height: 200px;
      color: var(--text-color);
      overflow-x: hidden;
      overflow-y: scroll;
    }

    .inputs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      align-items: center;
      justify-items: left;
    }

    .randomInputFields {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      text-align: center;
      align-items: center;
    }
  }
}

label.checkbox {
  span {
    display: block;
    font-size: 0.76rem;
    color: var(--sub-color);
    margin-left: 1.5rem;
  }

  input {
    margin: 0 !important;
    cursor: pointer;
    width: 0;
    height: 0;
    display: none;

    & ~ .customTextCheckbox {
      width: 12px;
      height: 12px;
      background: rgba(0, 0, 0, 0.1);
      border-radius: 2px;
      box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
      display: inline-block;
      margin: 0 0.5rem 0 0.25rem;
      transition: 0.25s;
    }

    &:checked ~ .customTextCheckbox {
      background: var(--main-color);
    }
  }
}

#wordFilterPopupWrapper {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: grid;
  justify-content: center;
  align-items: center;
  padding: 5rem 0;

  #wordFilterPopup {
    color: var(--sub-color);
    background: var(--bg-color);
    border-radius: var(--roundness);
    padding: 2rem;
    display: grid;
    gap: 1rem;
    width: 400px;

    input {
      width: 100%;
    }

    .group {
      display: grid;
      gap: 0.5rem;
    }

    .lengthgrid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto 1fr;
      column-gap: 1rem;
    }

    .tip {
      color: var(--sub-color);
      font-size: 0.8rem;
    }

    .loadingIndicator {
      justify-self: center;
    }
  }
}

#simplePopupWrapper {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: grid;
  justify-content: center;
  align-items: center;
  padding: 5rem 0;

  #simplePopup {
    background: var(--bg-color);
    border-radius: var(--roundness);
    padding: 2rem;
    display: grid;
    gap: 1rem;
    width: 400px;

    .title {
      font-size: 1.5rem;
      color: var(--sub-color);
    }

    .inputs {
      display: grid;
      gap: 1rem;
    }

    .text {
      font-size: 1rem;
      color: var(--text-color);
    }
  }
}

#customWordAmountPopupWrapper,
#customTestDurationPopupWrapper {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: grid;
  justify-content: center;
  align-items: center;
  padding: 5rem 0;

  #customWordAmountPopup,
  #customTestDurationPopup {
    background: var(--bg-color);
    border-radius: var(--roundness);
    padding: 2rem;
    display: grid;
    gap: 1rem;
    width: 400px;

    .title {
      font-size: 1.5rem;
      color: var(--sub-color);
    }

    .tip {
      font-size: 0.75rem;
      color: var(--sub-color);
    }
  }

  #customTestDurationPopup {
    .preview {
      font-size: 0.75rem;
      color: var(--sub-color);
    }
  }
}

#customThemeShareWrapper {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: grid;
  justify-content: center;
  align-items: center;
  padding: 5rem 0;

  #customThemeShare {
    width: 50vw;
    background: var(--bg-color);
    border-radius: var(--roundness);
    padding: 2rem;
    display: grid;
    gap: 1rem;
    overflow-y: scroll;
  }
}

#quoteSearchPopupWrapper {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: grid;
  justify-content: center;
  align-items: center;
  padding: 5rem 0;

  #quoteSearchPopup {
    background: var(--bg-color);
    border-radius: var(--roundness);
    padding: 2rem;
    display: grid;
    gap: 1rem;
    width: 1000px;
    height: 80vh;
    grid-template-rows: auto auto auto 1fr;

    #extraResults {
      text-align: center;
      color: var(--sub-color);
    }
    .title {
      font-size: 1.5rem;
      color: var(--sub-color);
    }
    #quoteSearchResults {
      display: grid;
      gap: 0.5rem;
      height: auto;
      overflow: scroll;

      .searchResult {
        display: grid;
        grid-template-columns: 1fr 1fr 3fr 0fr;
        grid-auto-rows: auto;
        width: 100%;
        gap: 0.5rem;
        transition: 0.25s;
        padding: 1rem;
        box-sizing: border-box;
        user-select: none;
        cursor: pointer;
        height: min-content;

        .text {
          grid-column-start: 1;
          grid-column-end: 4;
          grid-row-start: 1;
          grid-row-end: 2;
          overflow: visible;
          color: var(--text-color);
        }
        .id {
          grid-column-start: 1;
          grid-column-end: 2;
          grid-row-start: 2;
          grid-row-end: 3;
          font-size: 0.8rem;
          color: var(--sub-color);
        }
        .length {
          grid-column-start: 2;
          grid-column-end: 3;
          grid-row-start: 2;
          grid-row-end: 3;
          font-size: 0.8rem;
          color: var(--sub-color);
        }
        .source {
          grid-column-start: 3;
          grid-column-end: 4;
          grid-row-start: 2;
          grid-row-end: 3;
          font-size: 0.8rem;
          color: var(--sub-color);
        }
        .resultChevron {
          grid-column-start: 4;
          grid-column-end: 5;
          grid-row-start: 1;
          grid-row-end: 3;
          display: flex;
          align-items: center;
          justify-items: center;
          color: var(--sub-color);
          font-size: 2rem;
        }
        .sub {
          opacity: 0.5;
        }
      }
      .searchResult:hover {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 5px;
      }
    }
  }
}
#settingsImportWrapper {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: grid;
  justify-content: center;
  align-items: center;
  padding: 5rem 0;

  #settingsImport {
    width: 50vw;
    background: var(--bg-color);
    border-radius: var(--roundness);
    padding: 2rem;
    display: grid;
    gap: 1rem;
    overflow-y: scroll;
  }
}

#resultEditTagsPanelWrapper {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: grid;
  justify-content: center;
  align-items: center;
  padding: 5rem 0;

  #resultEditTagsPanel {
    background: var(--bg-color);
    border-radius: var(--roundness);
    padding: 2rem;
    display: grid;
    gap: 1rem;
    overflow-y: scroll;
    width: 500px;

    .buttons {
      display: grid;
      gap: 1rem;
      grid-template-columns: 1fr 1fr 1fr;
    }
  }
}

#versionHistoryWrapper {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: grid;
  justify-content: center;
  align-items: start;
  padding: 5rem 0;

  #versionHistory {
    width: 75vw;
    height: 100%;
    background: var(--bg-color);
    border-radius: var(--roundness);
    padding: 2rem;
    display: grid;
    gap: 1rem;
    @extend .ffscroll;
    overflow-y: scroll;

    .tip {
      text-align: center;
      color: var(--sub-color);
    }

    .releases {
      display: grid;
      gap: 2rem;

      .release {
        display: grid;
        grid-template-areas:
          "title date"
          "body body";

        .title {
          grid-area: title;
          font-size: 2rem;
          color: var(--sub-color);
        }

        .date {
          grid-area: date;
          text-align: right;
          color: var(--sub-color);
          align-self: center;
        }

        .body {
          grid-area: body;
          color: var(--text-color);
        }

        &:last-child {
          margin-bottom: 2rem;
        }
      }
    }
  }
}

#notificationCenter {
  width: 350px;
  z-index: 99999999;
  display: grid;
  gap: 1rem;
  position: fixed;
  right: 1rem;
  top: 1rem;
  .history {
    display: grid;
    gap: 1rem;
  }
  .notif {
    user-select: none;
    .icon {
      color: var(--bg-color);
      opacity: 0.5;
      padding: 1rem 1rem;
      align-items: center;
      display: grid;
      font-size: 1.25rem;
    }
    .message {
      padding: 1rem 1rem 1rem 0;
      .title {
        color: var(--bg-color);
        font-size: 0.75em;
        opacity: 0.5;
        line-height: 0.75rem;
      }
    }

    position: relative;
    background: var(--sub-color);
    color: var(--bg-color);
    display: grid;
    grid-template-columns: min-content auto min-content;
    border-radius: var(--roundness);
    border-width: 0.25rem;

    &.bad {
      background-color: var(--error-color);
    }

    &.good {
      background-color: var(--main-color);
    }

    &:hover {
      // opacity: .5;
      // box-shadow: 0 0 20px rgba(0,0,0,.25);
      cursor: pointer;
      &::after {
        opacity: 1;
      }
    }
    &::after {
      transition: 0.125s;
      font-family: "Font Awesome 5 Free";
      background: rgba(0, 0, 0, 0.5);
      opacity: 0;
      font-weight: 900;
      content: "\f00d";
      position: absolute;
      width: 100%;
      height: 100%;
      color: var(--bg-color);
      font-size: 2.5rem;
      display: grid;
      /* align-self: center; */
      align-items: center;
      text-align: center;
      border-radius: var(--roundness);
    }
  }
}

#supportMeWrapper {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: grid;
  justify-content: center;
  align-items: center;
  padding: 5rem 0;

  #supportMe {
    width: 900px;
    // height: 400px;
    overflow-y: scroll;
    max-height: 100%;
    background: var(--bg-color);
    border-radius: var(--roundness);
    padding: 2rem;
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 2rem;
    @extend .ffscroll;

    .title {
      font-size: 2rem;
      line-height: 2rem;
      color: var(--main-color);
    }

    .text {
      color: var(--text-color);
    }

    .subtext {
      color: var(--sub-color);
      font-size: 0.75rem;
    }

    .buttons {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 1rem;

      .button {
        display: block;
        width: 100%;
        height: 100%;
        padding: 2rem 0;
        display: grid;
        gap: 1rem;
        text-decoration: none;
        .text {
          transform: 0.25s;
        }
        &:hover .text {
          color: var(--bg-color);
        }
        .icon {
          font-size: 5rem;
          line-height: 5rem;
        }
      }
    }
  }
}

#commandLineWrapper {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: grid;
  justify-content: center;
  align-items: start;
  padding: 5rem 0;

  #commandInput {
    width: 700px;
    background: var(--bg-color);
    border-radius: var(--roundness);

    input {
      background: var(--bg-color);
      padding: 1rem;
      color: var(--main-color);
      border: none;
      outline: none;
      font-size: 1rem;
      font-family: var(--font);
      width: 100%;
      border-radius: var(--roundness);
    }

    .shiftEnter {
      padding: 0.5rem 1rem;
      font-size: 0.75rem;
      line-height: 0.75rem;
      color: var(--sub-color);
      text-align: center;
    }
  }

  #commandLine {
    width: 700px;
    background: var(--bg-color);
    border-radius: var(--roundness);

    input {
      background: var(--bg-color);
      padding: 1rem;
      color: var(--text-color);
      border: none;
      outline: none;
      font-size: 1rem;
      font-family: var(--font);
      width: 100%;
      border-radius: var(--roundness);
    }

    .separator {
      background: black;
      width: 100%;
      height: 1px;
      margin-bottom: 0.5rem;
    }

    .listTitle {
      color: var(--text-color);
      padding: 0.5rem 1rem;
      font-size: 0.75rem;
      line-height: 0.75rem;
    }

    .suggestions {
      display: block;
      @extend .ffscroll;
      overflow-y: scroll;
      max-height: calc(100vh - 10rem - 3rem);
      display: grid;
      cursor: pointer;

      .entry {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
        line-height: 0.75rem;
        color: var(--sub-color);
        display: grid;
        grid-template-columns: auto 1fr;

        div {
          pointer-events: none;
        }

        .textIcon {
          font-weight: 900;
          /* width: 1.25rem; */
          display: inline-block;
          letter-spacing: -0.1rem;
          margin-right: 0.5rem;
          text-align: center;
          width: 1.25em;
        }

        .fas {
          margin-right: 0.5rem;
        }

        &:last-child {
          border-radius: 0 0 var(--roundness) var(--roundness);
        }

        &.activeMouse {
          color: var(--bg-color);
          background: var(--text-color);
          cursor: pointer;
        }

        &.activeKeyboard {
          color: var(--bg-color);
          background: var(--text-color);
        }

        // &:hover {
        //   color: var(--text-color);
        //   background: var(--sub-color);
        //   cursor: pointer;
        // }
      }
    }
  }
}

#timerWrapper {
  opacity: 0;
  transition: 0.25s;
  z-index: -1;
  position: relative;
  z-index: 99;
}

#timer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  /*   height: 0.5rem; */
  height: 0.5rem;
  background: black;
  /*   background: #0f0f0f; */
  /*   background: red; */
  // transition: 1s linear;
  z-index: -1;
}

#largeLiveWpmAndAcc {
  font-size: 10rem;
  color: black;
  width: 100%;
  left: 0;
  text-align: center;
  z-index: -1;
  height: 0;
  line-height: 0;
  top: 5rem;
  position: relative;
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  gap: 5rem;
}

#liveWpm {
  opacity: 0;
}

#liveAcc {
  opacity: 0;
}

#liveBurst {
  opacity: 0;
}

#timerNumber {
  pointer-events: none;
  transition: 0.25s;
  height: 0;
  color: black;
  line-height: 0;
  z-index: -1;
  text-align: center;
  left: 0;
  width: 100%;
  position: relative;
  font-size: 10rem;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0 auto;
  display: grid;
  justify-content: center;
  bottom: 6rem;
  transition: none;
}

#largeLiveWpmAndAcc.timerMain,
#timerNumber.timerMain {
  color: var(--main-color);
}

#timer.timerMain {
  background: var(--main-color);
}

#largeLiveWpmAndAcc.timerSub,
#timerNumber.timerSub {
  color: var(--sub-color);
}

#timer.timerSub {
  background: var(--sub-color);
}

#largeLiveWpmAndAcc.timerText,
#timerNumber.timerText {
  color: var(--text-color);
}

#timer.timerText {
  background: var(--text-color);
}

// #liveWpm {
//   top: 6rem;

//   &.lower {
//     top: 15rem;
//   }
// }

#centerContent {
  max-width: 1000px;
  // min-width: 500px;
  // margin: 0 auto;
  display: grid;
  grid-auto-flow: row;
  min-height: 100vh;
  padding: 2rem;
  gap: 2rem;
  align-items: center;
  z-index: 999;
  grid-template-rows: auto 1fr auto;
  width: 100%;
  &.wide125 {
    max-width: 1250px;
  }
  &.wide150 {
    max-width: 1500px;
  }
  &.wide200 {
    max-width: 2000px;
  }
  &.widemax {
    max-width: unset;
  }
}

#caret {
  height: 1.5rem;
  background: var(--caret-color);
  animation-name: caretFlashSmooth;
  /* animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); */
  animation-iteration-count: infinite;
  animation-duration: 1s;
  position: absolute;
  border-radius: var(--roundness);
  // transition: 0.05s;
  transform-origin: top left;
}

#paceCaret {
  height: 1.5rem;
  // background: var(--sub-color);
  background: var(--sub-color);
  opacity: 0.5;
  position: absolute;
  border-radius: var(--roundness);
  // transition: 0.25s;
  transform-origin: top left;
  width: 2px;
}

#caret,
#paceCaret {
  &.off {
    width: 0;
  }

  &.default {
    width: 2px;
  }

  &.carrot {
    background-color: transparent;
    background-image: url("../images/carrot.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 0.25rem;
    &.size2 {
      margin-left: -0.1rem;
    }
    &.size3 {
      margin-left: -0.2rem;
    }
    &.size4 {
      margin-left: -0.3rem;
    }
  }

  &.banana {
    background-color: transparent;
    background-image: url("../images/banana.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 1rem;
    &.size2 {
      margin-left: -0.1rem;
    }
    &.size3 {
      margin-left: -0.5rem;
    }
    &.size4 {
      margin-left: -0.3rem;
    }
  }

  &.block {
    width: 0.7em;
    margin-left: 0.25em;
    border-radius: 0;
    z-index: -1;
  }

  &.outline {
    @extend #caret, .block;
    animation-name: none;
    background: transparent;
    border: 1px solid var(--caret-color);
  }

  &.underline {
    height: 2px;
    width: 0.8em;
    margin-top: 1.3em;
    margin-left: 0.3em;

    &.size125 {
      margin-top: 1.8em;
    }

    &.size15 {
      margin-top: 2.1em;
    }

    &.size2 {
      margin-top: 2.7em;
    }

    &.size3 {
      margin-top: 3.9em;
    }
    &.size4 {
      margin-top: 4.7em;
    }
  }

  &.size125 {
    transform: scale(1.25);
  }

  &.size15 {
    transform: scale(1.45);
  }

  &.size2 {
    transform: scale(1.9);
  }

  &.size3 {
    transform: scale(2.8);
  }

  &.size4 {
    transform: scale(3.7);
  }
}

@keyframes caretFlashSmooth {
  0%,
  100% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

@keyframes caretFlashHard {
  0%,
  50% {
    opacity: 1;
  }

  51%,
  100% {
    opacity: 0;
  }
}

#menu {
  font-size: 1rem;
  line-height: 1rem;
  color: var(--sub-color);
  display: grid;
  grid-auto-flow: column;
  gap: 0.5rem;
  // margin-bottom: -0.4rem;
  width: fit-content;
  width: -moz-fit-content;

  .icon-button {
    //   .icon {
    //     display: grid;
    //     align-items: center;
    //     justify-items: center;
    //     text-align: center;
    //     width: 1.25rem;
    //     height: 1.25rem;
    //   }

    .text {
      font-size: 0.65rem;
      line-height: 0.65rem;
      align-self: center;
      margin-left: 0.25rem;
    }

    //   &:hover {
    //     cursor: pointer;
    //     color: var(--main-color);
    //   }
  }

  .separator {
    width: 2px;
    height: 1rem;
    background-color: var(--sub-color);
  }
}

#top.focus #menu .icon-button.discord::after {
  background: transparent;
}

#top.focus #menu {
  color: transparent !important;
}

#top.focus #menu .icon-button {
  color: transparent !important;
}

#top {
  grid-template-areas: "logo menu config";
  line-height: 2.3rem;
  font-size: 2.3rem;
  /* text-align: center; */
  transition: 0.25s;
  padding: 0 5px;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto 1fr auto;
  z-index: 2;
  align-items: center;
  gap: 0.5rem;
  user-select: none;

  .logo {
    margin-bottom: 0.6rem;
    white-space: nowrap;
    user-select: none;

    .top {
      font-size: 0.65rem;
      line-height: 0.65rem;
      margin-bottom: -0.4rem;
      margin-left: -0.1rem;
      color: var(--sub-color);
    }

    .bottom {
      margin-left: -0.15rem;
      color: var(--main-color);
      transition: 0.25s;
      cursor: pointer;
    }
  }

  .config {
    grid-area: config;
    justify-self: right;
    display: grid;
    // grid-auto-flow: row;
    grid-template-rows: 0.7rem 0.7rem 0.7rem;
    grid-gap: 0.2rem;
    // width: min-content;
    // width: -moz-min-content;
    // transition: 0.25s;
    /*   margin-bottom: 0.1rem; */
    justify-items: self-end;

    .group {
      transition: 0.25s;

      .title {
        color: var(--sub-color);
        font-size: 0.5rem;
        line-height: 0.5rem;
        margin-bottom: 0.15rem;
      }

      .buttons {
        font-size: 0.7rem;
        line-height: 0.7rem;
        display: flex;
      }
      &.disabled {
        pointer-events: none;
        opacity: 0.25;
      }
    }

    .punctuationMode {
      margin-bottom: -0.1rem;
    }

    .numbersMode {
      margin-bottom: -0.1rem;
    }
  }

  .result {
    display: grid;
    grid-auto-flow: column;
    grid-gap: 1rem;
    width: min-content;
    width: -moz-min-content;
    transition: 0.25s;
    grid-column: 3/4;
    grid-row: 1/2;

    .group {
      .title {
        font-size: 0.65rem;
        line-height: 0.65rem;
        color: var(--sub-color);
      }

      .val {
        font-size: 1.7rem;
        line-height: 1.7rem;
        color: var(--main-color);
        transition: 0.25s;
      }
    }
  }

  //top focus
  &.focus {
    color: var(--sub-color) !important;

    .result {
      opacity: 0 !important;
    }

    .logo .bottom {
      color: var(--sub-color) !important;
    }

    .config {
      opacity: 0 !important;
    }
  }
}

#tip {
  font-size: 0.75rem;
  line-height: 0.75rem;
  color: var(--sub-color);
  text-align: center;
  /*   margin-top: 1rem; */
  align-self: center;

  margin-top: 1rem;
  opacity: 0;
  transition: 0.25s;
}

key {
  color: var(--bg-color);
  background-color: var(--sub-color);
  /* font-weight: bold; */
  padding: 0.1rem 0.3rem;
  margin: 3px 0;
  border-radius: 0.1rem;
  display: inline-block;
  font-size: 0.7rem;
  line-height: 0.7rem;
}

#bottom {
  position: relative;
  text-align: center;
  line-height: 1rem;
  font-size: 0.75rem;
  color: var(--sub-color);
  // transition: 0.25s;
  padding: 0 5px;

  // margin-bottom: 2rem;
  .keyTips {
    margin-bottom: 2rem;
  }

  #supportMeButton {
    transition: 0.25s;
    &:hover {
      color: var(--text-color);
      cursor: pointer;
    }
  }

  .leftright {
    display: grid;
    grid-template-columns: auto auto;
    gap: 1rem;
    a {
      text-decoration: none;
    }
    .left {
      text-align: left;
      display: grid;
      grid-auto-flow: column;
      width: fit-content;
      gap: 1rem;
      width: -moz-fit-content;
    }
    .right {
      text-align: right;
      display: grid;
      grid-auto-flow: column;
      width: fit-content;
      width: -moz-fit-content;
      justify-self: right;
      gap: 1rem;
      // align-items: center;
      .current-theme {
        transition: 0.25s;
        text-decoration: none;
        &:hover {
          color: var(--text-color);
          cursor: pointer;
        }
      }
      .discordLink {
        transition: 0.25s;
        text-decoration: none;
        &:hover {
          color: var(--text-color);
          cursor: pointer;
        }
      }
    }
  }

  .version {
    opacity: 0;
    transition: 0.25s;
    &:hover {
      cursor: pointer;
      color: var(--text-color);
    }
  }
}

#bottom.focus {
  opacity: 0 !important;
}

#result {
  display: grid;
  // height: 200px;
  gap: 1rem;
  // grid-template-columns: auto 1fr;
  // justify-content: center;
  align-items: center;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "stats chart"
    "morestats morestats";
  // "wordsHistory wordsHistory"
  // "buttons buttons"
  // "login login"
  // "ssw ssw";

  .buttons {
    display: grid;
    grid-auto-flow: column;
    gap: 1rem;
    justify-content: center;
    // grid-area: buttons;
    grid-column: 1/3;
  }

  .ssWatermark {
    // grid-area: ssw;
    grid-column: 1/3;
  }

  #resultWordsHistory,
  #resultReplay {
    // grid-area: wordsHistory;
    color: var(--sub-color);
    grid-column: 1/3;
    .heatmapLegend {
      display: inline-grid;
      grid-template-columns: auto auto auto;
      gap: 1rem;
      font-size: 0.75rem;
      color: var(--sub-color);
      width: min-content;
      .boxes {
        display: flex;
        .box {
          width: 1rem;
          height: 1rem;
        }
        .box:nth-child(1) {
          background: var(--colorful-error-color);
          border-radius: var(--roundness) 0 0 var(--roundness);
        }
        .box:nth-child(2) {
          background: var(--colorful-error-color);
          filter: opacity(0.6);
        }
        .box:nth-child(3) {
          background: var(--sub-color);
        }
        .box:nth-child(4) {
          background: var(--main-color);
          filter: opacity(0.6);
        }
        .box:nth-child(5) {
          background: var(--main-color);
          border-radius: 0 var(--roundness) var(--roundness) 0;
        }
      }
    }
    .title {
      user-select: none;
    }
    .words {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      align-content: flex-start;
      user-select: none;
      .word {
        position: relative;
        margin: 0.18rem 0.6rem 0.15rem 0;
        letter.correct {
          color: var(--text-color);
        }
        letter.incorrect {
          color: var(--error-color);
        }
        letter.incorrect.extra {
          color: var(--error-extra-color);
        }
        &.heatmap-0 letter {
          color: var(--colorful-error-color);
        }
        &.heatmap-1 letter {
          color: var(--colorful-error-color);
          filter: opacity(0.6);
        }
        &.heatmap-2 letter {
          color: var(--sub-color);
        }
        &.heatmap-3 letter {
          color: var(--main-color);
          filter: opacity(0.6);
        }
        &.heatmap-4 letter {
          color: var(--main-color);
        }
      }
      &.rightToLeftTest {
        //flex-direction: row-reverse; // no need for hacking 😉, CSS fully support right-to-left languages
        direction: rtl;
        .word {
          //flex-direction: row-reverse;
          direction: rtl;
        }
      }
      &.withLigatures {
        letter {
          display: inline;
        }
      }
    }
  }

  .chart {
    grid-area: chart;
    width: 100%;

    canvas {
      width: 100% !important;
      height: 100%;
    }

    max-height: 200px;
    height: 200px;

    .title {
      color: var(--sub-color);
      margin-bottom: 1rem;
    }
  }

  .loginTip {
    grid-column: 1/3;
    text-align: center;
    color: var(--sub-color);
    // grid-area: login;
    grid-column: 1/3;
  }

  .stats {
    grid-area: stats;
    display: grid;
    // column-gap: 0.5rem;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    // grid-template-areas:
    //   "wpm acc"
    //   "wpm key"
    //   "raw time"
    //   "consistency consistency"
    //   "source source"
    //   "leaderboards leaderboards"
    //   "testType infoAndTags";
    // grid-template-areas:
    //   "wpm acc key consistency testType leaderboards source"
    //   "wpm raw time nothing infoAndTags leaderboards source";
    grid-template-areas:
      "wpm"
      "acc"
      "burst";

    &.morestats {
      display: grid;
      grid-auto-flow: column;
      grid-template-areas: none;
      align-items: flex-start;
      justify-content: space-between;
      column-gap: 2rem;
      grid-area: morestats;

      // grid-template-areas: "raw consistency testType infoAndTags leaderboards source"
      //   "key time testType infoAndTags leaderboards source";
      .subgroup {
        display: grid;
        gap: 0.5rem;
      }
    }

    .group {
      // margin-bottom: 0.5rem;

      .top {
        color: var(--sub-color);
        font-size: 1rem;
        line-height: 1rem;
      }

      .bottom {
        color: var(--main-color);
        font-size: 2rem;
        line-height: 2rem;
      }

      &.time {
        .afk,
        .timeToday {
          color: var(--sub-color);
          font-size: 0.75rem;
          line-height: 0.75rem;
          margin-left: 0.2rem;
        }
      }
    }

    // .infoAndTags {
    //   display: grid;
    //   gap: 0.5rem;
    //   align-self: baseline;
    //   // grid-area: infoAndTags;
    //   color: var(--sub-color);

    //   .top {
    //     font-size: 1rem;
    //     line-height: 1rem;
    //   }

    //   .bottom {
    //     font-size: 1rem;
    //     line-height: 1rem;
    //   }
    // }

    .info,
    .tags,
    .source {
      .top {
        font-size: 1rem;
        line-height: 1rem;
      }

      .bottom {
        font-size: 1rem;
        line-height: 1rem;
      }
    }

    .source {
      width: 25vw;
    }

    .tags .bottom .fas {
      margin-left: 0.5rem;
    }

    .wpm {
      grid-area: wpm;

      .top {
        font-size: 2rem;
        line-height: 1.5rem;
        display: flex;
        // margin-top: -0.5rem;

        // .crownWrapper {
        //   width: 1.7rem;
        //   overflow: hidden;
        //   height: 1.7rem;
        //   margin-left: 0.5rem;
        //   // margin-top: 0.98rem;
        //   margin-top: -0.5rem;

        .crown {
          height: 1.7rem;
          width: 1.7rem;
          margin-left: 0.5rem;
          margin-top: -0.2rem;
          font-size: 0.7rem;
          line-height: 1.7rem;
          background: var(--main-color);
          color: var(--bg-color);
          border-radius: 0.6rem;
          text-align: center;
          align-self: center;
          width: 1.7rem;
          height: 1.7rem;
        }
        // }
      }

      .bottom {
        font-size: 4rem;
        line-height: 4rem;
      }
    }

    .testType,
    .leaderboards {
      .bottom {
        font-size: 1rem;
        line-height: 1rem;
        .lbChange .fas {
          margin-right: 0.15rem;
        }
      }
    }

    .acc {
      grid-area: acc;

      .top {
        font-size: 2rem;
        line-height: 1.5rem;
      }

      .bottom {
        font-size: 4rem;
        line-height: 4rem;
      }
    }

    .burst {
      grid-area: burst;

      .top {
        font-size: 2rem;
        line-height: 1.5rem;
      }

      .bottom {
        font-size: 4rem;
        line-height: 4rem;
      }
    }

    // .key {
    //   grid-area: key;
    // }

    // .time {
    //   grid-area: time;
    // }

    // .raw {
    //   grid-area: raw;
    // }
  }
}

#capsWarning {
  background: var(--main-color);
  color: var(--bg-color);
  display: table;
  position: absolute;
  left: 50%;
  // top: 66vh;
  transform: translateX(-50%) translateY(-50%);
  padding: 1rem;
  border-radius: var(--roundness);
  /* margin-top: 1rem; */
  transition: 0.25s;
  z-index: 999;
  pointer-events: none;

  i {
    margin-right: 0.5rem;
  }
}

#wordsInput {
  height: 0;
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  display: block;
}

#wordsTitle {
  color: var(--sub-color);
  margin-left: 0.25rem;
  margin-top: 1rem;
  display: none;
}

#words {
  height: fit-content;
  height: -moz-fit-content;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-content: flex-start;
  user-select: none;
  padding-bottom: 1em;

  .newline {
    width: inherit;
  }

  letter {
    border-bottom-style: solid;
    border-bottom-width: 0.05em;
    border-bottom-color: transparent;
    &.dead {
      border-bottom-width: 0.05em;
      border-bottom-color: var(--sub-color);
    }
    &.tabChar,
    &.nlChar {
      margin: 0 0.25rem;
      opacity: 0.2;
    }
  }

  /* a little hack for right-to-left languages */
  &.rightToLeftTest {
    //flex-direction: row-reverse; // no need for hacking 😉, CSS fully support right-to-left languages
    direction: rtl;
    .word {
      //flex-direction: row-reverse;
      direction: rtl;
    }
  }
  &.withLigatures {
    letter {
      display: inline;
    }
  }
  &.blurred {
    opacity: 0.25;
    filter: blur(4px);
    -webkit-filter: blur(4px);
  }

  &.flipped {
    .word {
      color: var(--text-color);

      & letter.dead {
        border-bottom-color: var(--sub-color) !important;
      }

      & letter.correct {
        color: var(--sub-color);
      }

      & letter.corrected {
        color: var(--sub-color);
        border-bottom: 2px dotted var(--main-color);
      }

      & letter.extraCorrected {
        border-right: 2px dotted var(--main-color);
      }
    }
  }

  &.colorfulMode {
    .word {
      & letter.dead {
        border-bottom-color: var(--main-color) !important;
      }

      & letter.correct {
        color: var(--main-color);
      }

      & letter.corrected {
        color: var(--main-color);
        border-bottom: 2px dotted var(--text-color);
      }

      & letter.extraCorrected {
        border-right: 2px dotted var(--text-color);
      }

      & letter.incorrect {
        color: var(--colorful-error-color);
      }

      & letter.incorrect.extra {
        color: var(--colorful-error-extra-color);
      }
    }
  }

  &.flipped.colorfulMode {
    .word {
      color: var(--main-color);

      & letter.dead {
        border-bottom-color: var(--sub-color) !important;
      }

      & letter.correct {
        color: var(--sub-color);
      }

      & letter.corrected {
        color: var(--sub-color);
        border-bottom: 2px dotted var(--main-color);
      }

      & letter.extraCorrected {
        border-right: 2px dotted var(--main-color);
      }

      & letter.incorrect {
        color: var(--colorful-error-color);
      }

      & letter.incorrect.extra {
        color: var(--colorful-error-extra-color);
      }
    }
  }
}

#words.flipped.colorfulMode .word.error,
#words.colorfulMode .word.error {
  border-bottom: 2px solid var(--colorful-error-color);
}

.pageTest #resultExtraButtons {
  opacity: 0;
  display: grid;
  grid-auto-flow: column;
  gap: 1rem;
}

#restartTestButton,
#showWordHistoryButton,
#saveScreenshotButton,
#restartTestButtonWithSameWordset,
#nextTestButton,
#practiseMissedWordsButton,
#watchReplayButton {
  position: relative;
  border-radius: var(--roundness);
  padding: 1rem 2rem;
  width: min-content;
  width: -moz-min-content;
  color: var(--sub-color);
  transition: 0.25s;
  cursor: pointer;

  &:hover,
  &:focus {
    color: var(--main-color);
    outline: none;
  }

  &:focus {
    background: var(--sub-color);
  }
}

#replayWords {
  cursor: pointer;
}

#replayStopwatch {
  color: var(--main-color);
  display: inline-block;
}

#restartTestButton {
  margin: 0 auto;
  margin-top: 1rem;
}

#middle {
  .pageTest {
    #memoryTimer {
      background: var(--main-color);
      color: var(--bg-color);
      padding: 1rem;
      border-radius: var(--roundness);
      /* width: min-content; */
      text-align: center;
      width: max-content;
      /* justify-self: center; */
      left: 50%;
      position: absolute;
      transform: translateX(-50%);
      top: -6rem;
      user-select: none;
      pointer-events: none;
      opacity: 0;
    }
    .outOfFocusWarning {
      text-align: center;
      height: 0;
      line-height: 150px;
      z-index: 999;
      position: relative;
      user-select: none;
      pointer-events: none;
    }

    #testModesNotice {
      display: grid;
      grid-auto-flow: column;
      gap: 1rem;
      color: var(--sub-color);
      text-align: center;
      margin-bottom: 1.25rem;
      height: 1rem;
      line-height: 1rem;
      transition: 0.125s;
      justify-content: center;
      user-select: none;

      .fas {
        margin-right: 0.5rem;
      }
    }
    #miniTimerAndLiveWpm {
      height: 0;
      margin-left: 0.37rem;
      display: flex;
      font-size: 1rem;
      line-height: 1rem;
      margin-top: -1.5rem;
      position: absolute;
      color: black;

      .time {
        margin-right: 2rem;
      }

      .wpm,
      .acc {
        margin-right: 2rem;
      }

      .time,
      .wpm,
      .acc,
      .burst {
        opacity: 0;
      }

      &.timerMain {
        color: var(--main-color);
      }

      &.timerSub {
        color: var(--sub-color);
      }

      &.timerText {
        color: var(--text-color);
      }

      &.size125 {
        margin-top: -1.75rem;
        font-size: 1.25rem;
        line-height: 1.25rem;
      }
      &.size15 {
        margin-top: -2rem;
        font-size: 1.5rem;
        line-height: 1.5rem;
      }
      &.size2 {
        margin-top: -2.5rem;
        font-size: 2rem;
        line-height: 2rem;
      }
      &.size3 {
        margin-top: -3.5rem;
        font-size: 3rem;
        line-height: 3rem;
      }
      &.size4 {
        margin-top: -4.5rem;
        font-size: 4rem;
        line-height: 4rem;
      }
    }
  }

  &.focus .pageTest {
    #testModesNotice {
      opacity: 0 !important;
    }
  }
}

#showWordHistoryButton {
  opacity: 1;
}

.word {
  margin: 0.25rem;
  color: var(--sub-color);
  font-variant: no-common-ligatures;
  // display: flex;
  // transition: 0.25s
  /*   margin-bottom: 1px; */
  border-bottom: 2px solid transparent;
  line-height: 1rem;
  letter {
    display: inline-block;
  }

  &.lastbeforenewline::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    content: "\f107";
    margin-left: 0.5rem;
    opacity: 0.25;
  }

  // transition: .25s;
  .wordInputAfter {
    opacity: 1;
    position: absolute;
    background: var(--sub-color);
    color: var(--bg-color);
    /* background: red; */
    padding: 0.5rem;
    /* left: .5rem; */
    margin-left: -0.5rem;
    // margin-top: -1.5rem;
    border-radius: var(--roundness);
    // box-shadow: 0 0 10px rgba(0,0,0,.25);
    transition: 0.25s;
    text-shadow: none;
    top: -0.5rem;
    z-index: 10;
    cursor: text;
    .speed {
      font-size: 0.75rem;
    }
  }
}

#words.size125 .word {
  line-height: 1.25rem;
  font-size: 1.25rem;
  margin: 0.31rem;
}

#words.size15 .word {
  line-height: 1.5rem;
  font-size: 1.5rem;
  margin: 0.37rem;
}

#words.size2 .word {
  line-height: 2rem;
  font-size: 2rem;
  margin: 0.5rem;
}

#words.size3 .word {
  line-height: 3rem;
  font-size: 3rem;
  margin: 0.75rem;
}

#words.size4 .word {
  line-height: 4rem;
  font-size: 4rem;
  margin: 1rem;
}

#words.nospace {
  .word {
    margin: 0.5rem 0;
  }
}

.word.error {
  /*   margin-bottom: 1px; */
  border-bottom: 2px solid var(--error-color);
  text-shadow: 1px 0px 0px var(--bg-color),
    // 2px 0px 0px var(--bg-color),
    -1px 0px 0px var(--bg-color),
    // -2px 0px 0px var(--bg-color),
    0px 1px 0px var(--bg-color),
    1px 1px 0px var(--bg-color), -1px 1px 0px var(--bg-color);
}

#words.noErrorBorder {
  .word.error {
    text-shadow: none;
  }
}
// .word letter {
// transition: .1s;
// height: 1rem;
// line-height: 1rem;
/* margin: 0 1px; */
// }

.word letter.correct {
  color: var(--text-color);
}

.word letter.corrected {
  color: var(--text-color);
  border-bottom: 2px dotted var(--main-color);
}

.word letter.extraCorrected {
  border-right: 2px dotted var(--main-color);
}

.word letter.incorrect {
  color: var(--error-color);
  position: relative;
}

.word letter.incorrect hint {
  position: absolute;
  bottom: -1em;
  color: var(--text-color);
  line-height: initial;
  font-size: 0.75em;
  text-shadow: none;
  padding: 1px;
  left: 0;
  opacity: 0.5;
  text-align: center;
  width: 100%;
}

.word letter.incorrect.extra {
  color: var(--error-extra-color);
}

.word letter.missing {
  opacity: 0.5;
}

.pageLoading {
  display: grid;
  justify-content: center;
  .preloader {
    font-size: 2rem;
    justify-self: center;
    color: var(--main-color);
  }
}

.pageTest {
  position: relative;

  .ssWatermark {
    font-size: 1.25rem;
    color: var(--sub-color);
    line-height: 1rem;
    text-align: right;
  }
}

.pageLogin {
  display: flex;
  grid-auto-flow: column;
  gap: 1rem;
  justify-content: space-around;
  align-items: center;

  .side {
    display: grid;
    gap: 0.5rem;
    justify-content: center;

    &.login {
      grid-template-areas:
        "title forgotButton"
        "form form";

      .title {
        grid-area: title;
      }

      #forgotPasswordButton {
        grid-area: forgotButton;
        font-size: 0.75rem;
        line-height: 0.75rem;
        height: fit-content;
        height: -moz-fit-content;
        align-self: center;
        justify-self: right;
        padding: 0.25rem 0;
        color: var(--sub-color);
        cursor: pointer;
        transition: 0.25s;

        &:hover {
          color: var(--text-color);
        }
      }

      form {
        grid-area: form;
      }
    }
  }

  form {
    display: grid;
    gap: 0.5rem;
    width: 100%;
  }

  .preloader {
    position: fixed;
    left: 50%;
    top: 50%;
    font-size: 2rem;
    transform: translate(-50%, -50%);
    color: var(--main-color);
    transition: 0.25s;
  }
}

.pageAbout {
  display: grid;
  gap: 2rem;

  .created {
    text-align: center;
    color: var(--sub-color);
    a {
      text-decoration: none;
    }
  }

  .section {
    display: grid;
    gap: 0.25rem;

    .title {
      font-size: 2rem;
      line-height: 2rem;
      color: var(--sub-color);
      margin: 1rem 0;
    }

    .contactButtons,
    .supportButtons {
      margin-top: 1rem;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 1rem;
      .button {
        text-decoration: none;
        font-size: 1.5rem;
        padding: 2rem 0;
        .fas,
        .fab {
          margin-right: 1rem;
        }
      }
    }

    .supporters,
    .contributors {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 0.25rem;
      color: var(--text-color);
    }

    h1 {
      font-size: 1rem;
      line-height: 1rem;
      color: var(--sub-color);
      margin: 0;
      font-weight: 300;
    }

    p {
      margin: 0;
      padding: 0;
      color: var(--text-color);
    }
  }
}

.pageSettings {
  display: grid;
  // grid-template-columns: 1fr 1fr;
  gap: 2rem;

  .tip {
    color: var(--sub-color);
  }

  .sectionGroupTitle {
    font-size: 2rem;
    color: var(--sub-color);
    line-height: 2rem;
    cursor: pointer;
    transition: 0.25s;

    &:hover {
      color: var(--text-color);
    }

    .fas {
      margin-left: 0.5rem;

      &.rotate {
        transform: rotate(-90deg);
      }
    }
  }

  .sectionSpacer {
    height: 1.5rem;
  }

  .settingsGroup {
    display: grid;
    gap: 2rem;
    &.quickNav .links {
      display: flex;
      justify-content: space-between;
      a {
        text-decoration: none;
        // opacity: 0.5;
        &:hover {
          opacity: 1;
        }
      }
    }
  }

  .section {
    display: grid;
    // gap: .5rem;
    grid-template-areas:
      "title title"
      "text buttons";
    grid-template-columns: 2fr 1fr;
    column-gap: 2rem;
    align-items: center;

    .button.danger {
      box-shadow: 0px 0px 0px 2px var(--error-color);
      color: var(--text-color);
      &:hover {
        background: var(--text-color);
        color: var(--bg-color);
      }
    }

    .inputAndSave {
      display: grid;
      grid-template-columns: 8fr 1fr;
      gap: 0.5rem;
      margin-bottom: 0.5rem;
      input {
        // grid-column: 1/3;
      }

      .save {
        // grid-column: 3/4;
        height: auto;

        .fas {
          margin-right: 0rem;
          vertical-align: sub;
        }
      }
    }

    &.customBackgroundFilter {
      .groups {
        grid-area: buttons;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        margin-top: 2rem;
        .group {
          display: grid;
          grid-template-columns: 1fr auto 2fr;
          gap: 1rem;
          .title,
          .value {
            color: var(--text-color);
          }
        }
      }
      .saveContainer {
        grid-column: -1/-3;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1rem;
      }
      .fas {
        margin-right: 0rem;
      }
    }

    &.customTheme {
      grid-template-columns: 1fr 1fr 1fr 1fr;
      justify-items: stretch;
      gap: 0.5rem 2rem;

      & p {
        grid-area: unset;
        grid-column: 1 / span 4;
      }

      & .spacer {
        grid-column: 3 / 5;
      }
    }

    h1 {
      font-size: 1rem;
      line-height: 1rem;
      color: var(--sub-color);
      margin: 0;
      grid-area: title;
      font-weight: 300;
    }

    p {
      grid-area: text;
      color: var(--sub-color);
      margin: 0;
    }

    & > .text {
      align-self: normal;
      color: var(--text-color);
      grid-area: text;
    }

    .buttons {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
      gap: 0.5rem;
      grid-area: buttons;
    }

    &.discordIntegration {
      .info {
        grid-area: buttons;
        text-align: center;
        color: var(--main-color);
      }

      #unlinkDiscordButton {
        margin-top: 0.5rem;
        font-size: 0.75rem;
        color: var(--sub-color);
        &:hover {
          color: var(--text-color);
        }
      }

      .howto {
        margin-top: 1rem;
        color: var(--text-color);
      }
    }

    &.tags {
      .tagsListAndButton {
        grid-area: buttons;
      }

      .tag {
        grid-template-columns: 6fr 1fr 1fr 1fr;
        margin-bottom: 0.5rem;
      }

      .addTagButton {
        margin-top: 0.5rem;
        color: var(--text-color);
        cursor: pointer;
        transition: 0.25s;
        padding: 0.2rem 0.5rem;
        border-radius: var(--roundness);

        background: rgba(0, 0, 0, 0.1);
        text-align: center;
        -webkit-user-select: none;
        display: grid;
        align-content: center;
        height: min-content;
        height: -moz-min-content;

        &.active {
          background: var(--main-color);
          color: var(--bg-color);
        }

        &:hover,
        &:focus {
          color: var(--bg-color);
          background: var(--text-color);
          outline: none;
        }
      }
    }

    &.presets {
      .presetsListAndButton {
        grid-area: buttons;
      }

      .preset {
        grid-template-columns: 7fr 1fr 1fr;
        margin-bottom: 0.5rem;
      }

      .addPresetButton {
        margin-top: 0.5rem;
        color: var(--text-color);
        cursor: pointer;
        transition: 0.25s;
        padding: 0.2rem 0.5rem;
        border-radius: var(--roundness);

        background: rgba(0, 0, 0, 0.1);
        text-align: center;
        -webkit-user-select: none;
        display: grid;
        align-content: center;
        height: min-content;
        height: -moz-min-content;

        &.active {
          background: var(--main-color);
          color: var(--bg-color);
        }

        &:hover,
        &:focus {
          color: var(--bg-color);
          background: var(--text-color);
          outline: none;
        }
      }
    }

    &.fontSize .buttons {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    &.themes {
      .tabContainer {
        position: relative;
        grid-area: buttons;

        .tabContent {
          overflow: revert;
          height: auto;

          &.customTheme {
            margin-top: 0.5rem;
            .colorText {
              color: var(--text-color);
            }
          }

          .text {
            align-self: center;
          }
        }
      }

      .theme.button {
        display: grid;
        grid-template-columns: auto 1fr auto;
        .text {
          color: inherit;
        }
        .activeIndicator {
          overflow: hidden;
          width: 1.25rem;
          transition: 0.25s;
          opacity: 0;
          color: inherit;
          .far {
            margin: 0;
          }
          &.active {
            width: 1.25rem;
            opacity: 1;
          }
        }
        .favButton {
          overflow: hidden;
          width: 1.25rem;
          transition: 0.25s;
          opacity: 0;
          .far,
          .fas {
            margin: 0;
            pointer-events: none;
          }
          &:hover {
            cursor: pointer;
          }
          &.active {
            width: 1.25rem;
            opacity: 1;
          }
        }
        &:hover {
          .favButton {
            width: 1.25rem;
            opacity: 1;
          }
        }
        &.active {
          .activeIndicator {
            opacity: 1;
          }
        }
      }
    }

    &.themes {
      grid-template-columns: 2fr 1fr;
      grid-template-areas:
        "title tabs"
        "text text"
        "buttons buttons";
      column-gap: 2rem;
      // row-gap: 0.5rem;

      .tabs {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: 0.5rem;
        grid-area: tabs;

        .tab {
          will-change: color;
          transition: 0.2s ease-in-out color;
          outline: 0;
          cursor: pointer;
          padding: 0;
          font-size: 1rem;
          color: var(--sub-color);
          text-align: left;
          border: 0;
          background: 0;
          font-family: var(--font);

          &:first-child {
            margin-right: 0.5rem;
          }

          &.active,
          &:hover {
            color: var(--main-color);
          }
        }
      }

      .buttons {
        margin-left: 0;
        grid-auto-flow: dense;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 0.5rem;
        margin-top: 0.5rem;
      }
    }

    &.fullWidth {
      grid-template-columns: 2fr 1fr;
      grid-template-areas:
        "title tabs"
        "text text"
        "buttons buttons";
      column-gap: 2rem;
      // row-gap: 0.5rem;

      .buttons {
        margin-left: 0;
        grid-auto-flow: dense;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 0.5rem;
        margin-top: 1rem;
      }
    }

    &.randomTheme .buttons {
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }
  }
}

.buttons div.theme:hover {
  transform: scale(1.1);
}

.signOut {
  font-size: 1rem;
  line-height: 1rem;
  justify-self: end;
  // background: var(--sub-color);
  color: var(--sub-color);
  width: fit-content;
  width: -moz-fit-content;
  padding: 0.5rem;
  border-radius: var(--roundness);
  cursor: pointer;
  transition: 0.25s;
  float: right;

  &:hover {
    color: var(--text-color);
  }

  .fas {
    margin-right: 0.5rem;
  }
}

.pageAccount {
  display: grid;
  gap: 1rem;

  .content {
    display: grid;
    gap: 2rem;
  }

  .topFilters .buttons {
    display: flex;
    justify-content: space-evenly;
    gap: 1rem;
    .button {
      width: 100%;
    }
  }

  .miniResultChartWrapper {
    // pointer-events: none;
    z-index: 999;
    display: none;
    height: 15rem;
    background: var(--bg-color);
    width: 45rem;
    position: absolute;
    border-radius: var(--roundness);
    padding: 1rem;
    // box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
  }

  .miniResultChartBg {
    display: none;
    z-index: 998;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25);
    position: fixed;
    left: 0;
    top: 0;
  }

  .preloader {
    font-size: 2rem;
    justify-self: center;
    color: var(--main-color);
  }

  .doublegroup {
    display: grid;
    grid-auto-flow: column;
    gap: 1rem;
    .titleAndTable {
      .title {
        color: var(--sub-color);
      }
    }
  }

  .triplegroup {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;

    .text {
      align-self: center;
      color: var(--sub-color);
    }
  }

  .group {
    &.noDataError {
      margin: 20rem 0;
      // height: 30rem;
      // line-height: 30rem;
      text-align: center;
    }

    &.createdDate {
      text-align: center;
      color: var(--sub-color);
    }

    &.history {
      .active {
        animation: flashHighlight 4s linear 0s 1;
      }

      .loadMoreButton {
        background: rgba(0, 0, 0, 0.1);
        color: var(--text-color);
        text-align: center;
        padding: 0.5rem;
        border-radius: var(--roundness);
        cursor: pointer;
        -webkit-transition: 0.25s;
        transition: 0.25s;
        -webkit-user-select: none;
        display: -ms-grid;
        display: grid;
        -ms-flex-line-pack: center;
        align-content: center;
        margin-top: 1rem;

        &:hover,
        &:focus {
          color: var(--bg-color);
          background: var(--text-color);
        }
      }
    }

    .title {
      color: var(--sub-color);
    }

    .val {
      font-size: 3rem;
      line-height: 3rem;
    }

    &.chart {
      position: relative;

      .above {
        display: flex;
        justify-content: center;
        margin-bottom: 1rem;
        color: var(--sub-color);
        flex-wrap: wrap;

        .group {
          display: flex;
          align-items: center;
        }

        .fas,
        .punc {
          margin-right: 0.25rem;
        }

        .spacer {
          width: 1rem;
        }
      }

      .below {
        text-align: center;
        color: var(--sub-color);
        margin-top: 1rem;
        display: grid;
        grid-template-columns: auto 300px;
        align-items: center;
        .text {
          height: min-content;
        }
        .buttons {
          display: grid;
          gap: 0.5rem;
        }
      }
      .chartPreloader {
        position: absolute;
        width: 100%;
        background: rgba(0, 0, 0, 0.5);
        height: 100%;
        display: grid;
        align-items: center;
        justify-content: center;
        font-size: 5rem;
        text-shadow: 0 0 3rem black;
      }
    }
  }

  table {
    border-spacing: 0;
    border-collapse: collapse;
    color: var(--text-color);

    td {
      padding: 0.5rem 0.5rem;
    }

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

    tbody tr:nth-child(odd) td {
      background: rgba(0, 0, 0, 0.1);
    }

    td.infoIcons span {
      margin: 0 0.1rem;
    }
    .miniResultChartButton {
      opacity: 0.25;
      transition: 0.25s;
      cursor: pointer;
      &:hover {
        opacity: 1;
      }
    }
  }

  #resultEditTags {
    transition: 0.25s;
    &:hover {
      cursor: pointer;
      color: var(--text-color);
      opacity: 1 !important;
    }
  }
}

.pageAccount {
  .group.filterButtons {
    gap: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;

    .buttonsAndTitle {
      height: fit-content;
      height: -moz-fit-content;
      display: grid;
      gap: 0.25rem;
      color: var(--sub-color);
      line-height: 1rem;
      font-size: 1rem;

      &.testDate .buttons,
      &.languages .buttons,
      &.layouts .buttons,
      &.funbox .buttons,
      &.tags .buttons {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-flow: unset;
      }
    }

    .buttons {
      display: grid;
      grid-auto-flow: column;
      gap: 1rem;

      .button {
        background: rgba(0, 0, 0, 0.1);
        color: var(--text-color);
        text-align: center;
        padding: 0.5rem;
        border-radius: var(--roundness);
        cursor: pointer;
        transition: 0.25s;
        -webkit-user-select: none;
        display: grid;
        align-content: center;

        &.active {
          background: var(--main-color);
          color: var(--bg-color);
        }

        &:hover {
          color: var(--bg-color);
          background: var(--main-color);
        }
      }
    }
  }
}

.devIndicator {
  position: fixed;
  font-size: 3rem;
  color: var(--sub-color);
  opacity: 0.25;
  z-index: -1;

  &.tl {
    top: 2rem;
    left: 2rem;
  }

  &.tr {
    top: 2rem;
    right: 2rem;
  }

  &.bl {
    bottom: 2rem;
    left: 2rem;
  }

  &.br {
    bottom: 2rem;
    right: 2rem;
  }
}

* {
  box-sizing: border-box;
}

.hidden {
  display: none !important;
}

.button {
  color: var(--text-color);
  cursor: pointer;
  transition: 0.25s;
  padding: 0.4rem;
  border-radius: var(--roundness);

  background: rgba(0, 0, 0, 0.1);
  text-align: center;
  -webkit-user-select: none;
  // display: grid;
  align-content: center;
  height: min-content;
  height: -moz-min-content;
  line-height: 1rem;

  &:hover {
    color: var(--bg-color);
    background: var(--text-color);
    outline: none;
  }
  &:focus {
    color: var(--text-color);
    background: rgba(0, 0, 0, 0.1);
    outline: none;
  }

  &.active {
    background: var(--main-color);
    color: var(--bg-color);
    &:hover {
      // color: var(--text-color);
      background: var(--text-color);
      outline: none;
    }
    &:focus {
      color: var(--bg-color);
      background: var(--main-color);
      outline: none;
    }
  }

  &.disabled {
    opacity: 0.5;
    cursor: default;
    &:hover {
      color: var(--sub-color);
      background: rgba(0, 0, 0, 0.1);
      outline: none;
    }
  }

  &.disabled.active {
    opacity: 0.5;
    cursor: default;
    &:hover {
      color: var(--bg-color);
      background: var(--main-color);
      outline: none;
    }
  }
}

.text-button {
  transition: 0.25s;
  color: var(--sub-color);
  cursor: pointer;
  margin-right: 0.25rem;
  cursor: pointer;
  outline: none;

  &.active {
    color: var(--main-color);
  }

  &:hover,
  &:focus {
    color: var(--text-color);
  }
}

.icon-button {
  display: grid;
  grid-auto-flow: column;
  align-content: center;
  transition: 0.25s;
  padding: 0.5rem;
  border-radius: var(--roundness);
  cursor: pointer;

  &:hover {
    color: var(--text-color);
  }
  &:focus {
    // background: var(--sub-color);
    color: var(--sub-color);
    border: none;
    outline: none;
  }
}

.scrollToTopButton {
  bottom: 2rem;
  right: 2rem;
  position: fixed;
  font-size: 2rem;
  width: 4rem;
  height: 4rem;
  text-align: center;
  line-height: 4rem;
  background: var(--bg-color);
  border-radius: 99rem;
  z-index: 99;
  cursor: pointer;
  color: var(--sub-color);
  transition: 0.25s;
  &:hover {
    color: var(--text-color);
  }
}

#commandLineMobileButton {
  display: none;
  top: -4rem;
  left: 0;
  position: absolute;
  font-size: 1rem;
  width: 3rem;
  height: 3rem;
  text-align: center;
  line-height: 3rem;
  background: var(--main-color);
  border-radius: 99rem;
  z-index: 99;
  cursor: pointer;
  color: var(--bg-color);
  transition: 0.25s;
}

.keymap {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  justify-content: center;
  white-space: nowrap;
  // height: 140px;
  gap: 0.25rem;
  margin-top: 1rem;
}

.row {
  height: 2rem;
  gap: 0.25rem;
}

.keymap-key {
  display: flex;
  background-color: transparent;
  color: var(--sub-color);
  border-radius: var(--roundness);
  border: 0.05rem solid;
  border-color: var(--sub-color);
  text-align: center;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  position: relative;

  .bump {
    width: 0.75rem;
    height: 0.05rem;
    background: var(--sub-color);
    position: absolute;
    border-radius: var(--roundness);
    // margin-top: 1.5rem;
    bottom: 0.15rem;
  }

  &.active-key {
    color: var(--bg-color);
    background-color: var(--main-color);
    border-color: var(--main-color);

    .bump {
      background: var(--bg-color);
    }
  }

  &#KeySpace {
    &:hover {
      cursor: pointer;
      color: var(--main-color);
    }
  }

  &#KeySpace,
  &#KeySpace2 {
    width: 100%;
  }

  &#KeySpace2 {
    opacity: 0;
  }

  &.flash {
    animation-name: flashKey;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-fill-mode: forwards;
  }
}

@keyframes flashKey {
  from {
    color: var(--bg-color);
    background-color: var(--main-color);
    border-color: var(--main-color);
  }

  to {
    color: var(--sub-color);
    background-color: var(--bg-color);
    border-color: var(--sub-color);
  }
}

.hidden-key,
.hide-key {
  opacity: 0;
}

#monkey {
  width: 308px;
  height: 0;
  margin: 0 auto;
  animation: shake;
  animation-duration: 0s;
  animation-iteration-count: infinite;
  div {
    height: 200px;
    width: 308px;
    position: fixed;
  }
  .up {
    background-image: url("../images/monkey/m3.png");
  }
  .left {
    background-image: url("../images/monkey/m1.png");
  }
  .right {
    background-image: url("../images/monkey/m2.png");
  }
  .both {
    background-image: url("../images/monkey/m4.png");
  }
  .fast {
    .up {
      background-image: url("../images/monkey/m3_fast.png");
    }
    .left {
      background-image: url("../images/monkey/m1_fast.png");
    }
    .right {
      background-image: url("../images/monkey/m2_fast.png");
    }
    .both {
      background-image: url("../images/monkey/m4_fast.png");
    }
  }
}

@keyframes shake {
  0% {
    transform: translate(4px, 0) rotate(0deg);
  }
  50% {
    transform: translate(-4px, 0) rotate(0deg);
  }
  100% {
    transform: translate(4px, 0) rotate(0deg);
  }
}

.keymap {
  .keymap-split-spacer,
  .keymap-stagger-split-spacer,
  .keymap-matrix-split-spacer {
    display: none;
  }
}

.r1 {
  display: grid;
  grid-template-columns: 0fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.r2 {
  display: grid;
  grid-template-columns: 0.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1rem;
}

.r3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.r4 {
  display: grid;
  grid-template-columns: 0.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2.75fr;
}

.r5 {
  display: grid;
  grid-template-columns: 3.5fr 6fr 3.5fr;
  font-size: 0.5rem;
  // &.matrixSpace {
  //   // grid-template-columns: 6.75fr 1.9fr 6.75fr;
  //   grid-template-columns: 6.9fr 4.6fr 6.9fr; // wider spacebar
  // }
  // &.splitSpace {
  //   // grid-template-columns: 6.75fr 1.9fr 6.75fr;
  //   grid-template-columns: 4fr 7.5fr 4fr;
  // }
}

#nitropay_ad_left,
#nitropay_ad_right {
  margin-top: 1rem;
}

.keymap {
  &.matrix {
    .r1,
    .r2,
    .r3 {
      grid-template-columns: 1.125fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }

    .r4 {
      grid-template-columns: 0fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }

    .r5 {
      grid-template-columns: 3.25fr 5fr 2fr 1fr;
    }

    .r1,
    .r2,
    .r3 {
      :nth-child(13) {
        opacity: 0;
      }

      :nth-child(14) {
        opacity: 0;
      }
    }
  }
  &.split {
    .keymap-split-spacer {
      display: block;
    }
    .keymap-stagger-split-spacer {
      display: block;
    }

    .r1 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1.5fr;
    }

    .r2 {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }

    .r3 {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1.5fr;
    }

    .r4 {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
    }
    .r5 {
      grid-template-columns: 5fr 3fr 1fr 3fr 4.5fr;
    }
    #KeySpace2 {
      opacity: 1;
    }
  }
  &.split_matrix {
    .keymap-split-spacer {
      display: block;
      width: 2rem;
      height: 2rem;
    }
    .keymap-stagger-split-spacer {
      display: none;
    }
    .keymap-matrix-split-spacer {
      display: block;
      width: 2rem;
      height: 2rem;
    }
    .r1,
    .r2,
    .r3 {
      grid-template-columns: 1.125fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }

    .r4 {
      grid-template-columns: 0fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }

    .r5 {
      grid-template-columns: 3.225fr 3fr 1fr 3fr 2fr;
    }
    #KeySpace2 {
      opacity: 1;
    }

    .r1 {
      :nth-child(12) {
        opacity: 0;
      }
    }

    .r1,
    .r2,
    .r3 {
      :nth-child(13) {
        opacity: 0;
      }

      :nth-child(14) {
        opacity: 0;
      }
    }
  }
}

@keyframes flashHighlight {
  0% {
    background-color: var(--bg-color);
  }
  10% {
    background-color: var(--main-color);
  }
  40% {
    background-color: var(--main-color);
  }
  100% {
    background-color: var(--bg-color);
  }
}
