monkeytype/public/css/style.scss

@import url("https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap");

:root {
  --roundness: 0.25rem;
  --font: "Roboto Mono";
}

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

html {
  @extend .ffscroll;
}

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

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="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;
}

.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;
  background: var(--bg-color);
  font-family: var(--font);
  color: var(--main-color);
  // overflow-x: hidden;
}

html {
  overflow-y: scroll;
}

/* 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);
}

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

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

.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;

      .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.25rem 0.5rem;

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

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

          td {
            background: var(--bg-color);
            position: -webkit-sticky;
            position: sticky;
            top: 0;
          }
        }

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

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

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

    .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;
      }
    }
  }
}

#tagsWrapper {
  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;
  }
}

#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;

    textarea {
      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);
      resize: vertical;
      height: 200px;
      color: var(--text-color);
    }

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

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

        &~.customTextRandomCheckbox {
          width: 12px;
          height: 12px;
          background: rgba(0, 0, 0, .1);
          border-radius: 2px;
          box-shadow: 0 0 0 4px rgba(0, 0, 0, .1);
          display: inline-block;
          margin: 0 .5rem 0 .25rem;
          transition: .25s;
        }

        &:checked~.customTextRandomCheckbox {
          background: var(--main-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;
  }
}

#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;
        }
      }
    }
  }
}

#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);

    textarea {
      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);
      resize: vertical;
      height: 200px;
    }

    .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(--main-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(--main-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;

      .entry {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
        line-height: 0.75rem;
        color: var(--sub-color);

        .fas {
          margin-right: 0.5rem;
        }

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

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

        &.activeKeyboard {
          color: var(--bg-color);
          background: var(--main-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;
}

#liveWpm,
#timerNumber {
  position: relative;
  font-size: 10rem;
  color: black;
  opacity: 0;
  width: 100%;
  left: 0;
  text-align: center;
  z-index: -1;
  height: 0;
  transition: 0.25s;
  line-height: 0;
}

#timerNumber {
  bottom: 6rem;
  transition: none;
}

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

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

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

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

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

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

#liveWpm {
  top: 6rem;
}

#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;
}

#caret {
  height: 1.5rem;
  background: var(--caret-color);
  animation-name: caretFlash;
  /* 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;

  &.default {
    width: 2px;
  }

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

  &.outline {
    @extend #caret,
    .block;
    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;
    }
  }

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

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

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

@keyframes caretFlash {

  0%,
  100% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

#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;

  /*   transition: 0.25s; */
  .button.discord {
    &.discord {
      position: relative;

      &::after {
        transition: 0.25s;
        width: 0.5rem;
        height: 0.5rem;
        content: "";
        position: absolute;
        background: var(--main-color);
        border-radius: 1rem;
        top: 0.25rem;
        right: 0.25rem;
        border: 2px solid var(--bg-color);
      }

      &.dotHidden::after {
        background: transparent;
        border-color: transparent;
      }
    }
  }

  .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;

  .logo {
    margin-bottom: -0.12rem;
    white-space: nowrap;

    .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-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;
      }
    }

    .punctuationMode {
      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 {
  text-align: center;
  line-height: 1rem;
  font-size: 0.75rem;
  color: var(--sub-color);
  transition: 0.5s;

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

  .version {
    opacity: 0;
    transition: 0.25s;

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

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

#result {
  display: grid;
  // height: 200px;
  gap: 1rem;
  grid-template-columns: auto 1fr;
  justify-content: center;
  align-items: center;

  .chart {
    canvas {
      width: 100%;
      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);
  }

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

    .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;
      }
    }

    .testType {
      align-self: baseline;
      grid-area: testType;
      color: var(--sub-color);

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

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

    .leaderboards {
      align-self: baseline;
      grid-area: leaderboards;
      color: var(--sub-color);

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

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

    .source {
      align-self: baseline;
      grid-area: source;
      color: var(--sub-color);
      max-width: 15rem;

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

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

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

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

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

    .wpm {
      grid-area: wpm;

      .top {
        font-size: 3rem;
        line-height: 3rem;
        display: flex;
        margin-top: -0.5rem;

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

          .crown {
            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;
      }
    }

    .acc {
      grid-area: acc;
    }

    .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: .25s;
  z-index: 999;
  pointer-events: none;

  i {
    margin-right: .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;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-content: flex-start;
  user-select: none;

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

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

  &.colorfulMode {
    .word {
      & letter.correct {
        color: var(--main-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.correct {
        color: var(--sub-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,
#copyResultToClipboardButton,
#restartTestButtonWithSameWordset {
  position: relative;
  border-radius: var(--roundness);
  padding: 1rem 2rem;
  width: min-content;
  width: -moz-min-content;
  color: var(--sub-color);
  transition: 0.25s;
  margin-top: 1rem;
  cursor: pointer;

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

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

#middle {
  .pageTest {
    #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;

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

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

#showWordHistoryButton {
  opacity: 1;
}

.word {
  margin: 0.25rem;
  color: var(--sub-color);
  display: flex;
  // transition: 0.25s;
  /*   margin-bottom: 1px; */
  border-bottom: 2px solid transparent;
  line-height: 1rem;

  // 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: -0.5rem;
    border-radius: var(--roundness);
    // box-shadow: 0 0 10px rgba(0,0,0,.25);
    transition: 0.25s;
    text-shadow: none;
  }
}

#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;
}

.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);
}

// .word letter {
// transition: .1s;
// height: 1rem;
// line-height: 1rem;
/* margin: 0 1px; */
// }

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

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

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

.word letter.missing {
  opacity: 0.5;
}

.pageTest {
  position: relative;

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

  .ssWatermark {
    font-size: 1.25rem;
    color: var(--sub-color);
    position: absolute;
    bottom: 0;
    right: 0;
  }
}

.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.5rem;
        line-height: 0.5rem;
        height: fit-content;
        align-self: center;
        justify-self: right;
        padding: 0.25rem 0;
        color: var(--sub-color);
        cursor: pointer;
        transition: 0.25s;

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

      form {
        grid-area: form;

        #rememberMe {
          color: var(--sub-color);
          -moz-user-select: none;
          user-select: none;
          cursor: pointer;

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

            &~.customCheckbox {
              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~.customCheckbox {
              background: var(--main-color);
            }
          }
        }
      }
    }
  }

  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;

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

    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;
  }

  .sectionSpacer {
    height: 1.5rem;
  }

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

    &.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);
    }

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

    &.discordIntegration {
      .code {
        grid-area: buttons;
        justify-content: center;
        display: grid;

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

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

      .info {
        grid-area: buttons;
        text-align: center;
      }

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

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

      .tagsList {
        display: grid;
        gap: 0.5rem;

        .tag {
          display: grid;
          display: grid;
          grid-template-columns: auto 1fr auto auto;
          color: var(--text-color);

          .title {
            align-self: center;
          }

          .editButton,
          .removeButton,
          .active {
            display: grid;
            grid-auto-flow: column;
            align-content: center;
            transition: 0.25s;
            padding: 0 0.5rem;
            border-radius: var(--roundness);
            color: var(--sub-color);

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

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

      .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(--main-color);
          outline: none;
        }
      }
    }

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

    &.themes,
    &.languages,
    &.layouts,
    &.keymapLayout {
      grid-template-columns: 1fr;
      grid-template-areas:
        "title"
        "tabs"
        "buttons";
      gap: 0.5rem;

      .tabs {
        grid-area: tabs;
        display: flex;
        grid-template-columns: 1fr 1fr 9fr;
        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;
      }
    }
  }
}

.tabContainer {
  position: relative;

  .tabContent {
    overflow: hidden;
    height: auto;
    // max-height: 0px;
    // max-height: 100vh;

    // transition: max-height .5s ease-in-out;
    // &.reveal {
    //   max-height: 100vh;
    // }

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

.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;
  padding: 0.5rem;
  border-radius: var(--roundness);
  cursor: pointer;
  transition: 0.25s;
  float: right;

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

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

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

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

  .preloader {
    font-size: 2rem;
    justify-self: center;
  }

  .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;
    }

    &.history {
      .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(--main-color);
        }
      }
    }

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

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

    &.chart {
      position: relative;

      .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.25rem;
    }

    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;
    }
  }

  #resultEditTags {
    transition: 0.25s;
  }

  #resultEditTags:hover {
    cursor: pointer;
    color: var(--main-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;
    }

    .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);
        }
      }

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

.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;

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

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

  &:hover,
  &:focus {
    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;

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

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

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

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

@media only screen and (max-width: 800px) {
  #centerContent {
    #top {
      grid-template-areas:
        "logo config"
        "menu config";
    }

    #menu {
      gap: 0.5rem;
      font-size: 0.8rem;
      line-height: 0.8rem;

      .icon-button {
        padding: 0.25rem;
      }
    }
  }

  #commandLine,
  #commandLineInput {
    width: 500px !important;
  }
}

@media only screen and (max-width: 650px) {
  .pageSettings .section {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title title"
      "text text"
      "buttons buttons";

    .text {
      margin-bottom: 1rem;
    }
  }

  #commandLine,
  #commandLineInput {
    width: 400px !important;
  }
}

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

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

.keymap-key {
  display: flex;
  background-color: var(--bg-color);
  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;

  .bump {
    width: .75rem;
    height: .05rem;
    background: var(--sub-color);
    position: absolute;
    border-radius: var(--roundness);
    margin-top: 1.5rem;
  }

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

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

  &#KeySpace {
    width: 100%;
  }

  &.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 {
  opacity: 0;
}

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

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

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

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

.r5 {
  display: grid;
  grid-template-columns: 4fr 7.5fr 4fr;
}