@import url("https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap");
:root{
  --roundness: .25rem;
}

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


input{
  outline: none;
  border: none;
  border-radius: var(--roundness);
  background: rgba(0,0,0,.1);
  color: var(--main-color);
  padding: .5rem;
  font-size: 1rem;
  line-height: 1rem;
  font-family: "Roboto Mono";
}

body {
  margin: 0;
  padding: 2rem 2rem 0 2rem;
  height: 100vh;
  background: var(--bg-color);
  font-family: "Roboto Mono";
  color: var(--main-color);
}

html { overflow-y: scroll; }

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: .5rem 1rem;
  border-radius: var(--roundness);
  left: 50%;
  z-index: 9999;
  transform: translateX(-50%);
  top: -5rem;
}

#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;
    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;
        }
        &: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: 50vw;
    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: "Roboto Mono";
      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: 50vw;
    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: "Roboto Mono";
      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: grid;
      .entry {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
        line-height: 0.75rem;
        color: var(--sub-color);
        &:last-child{
          border-radius: 0 0 var(--roundness) var(--roundness);
        }
        &.active {
          color: var(--bg-color);
          background: var(--main-color);
        }
        &:hover{
          color: var(--bg-color);
          background: var(--main-color);
          cursor: pointer;
        }
      }
    }
  }
}

#resultScreenshot {
  display: none;
  position: absolute;
  width: min-content;
  width: -moz-min-content;
  white-space: nowrap;
  padding: 0.5rem;
  border-radius: 0.25rem;
  background: var(--bg-color);
  .logo {
    .top {
      color: var(--sub-color);
      font-size: 0.42rem;
      line-height: 0.42rem;
      margin-bottom: -0.3rem;
      margin-left: 0.05rem;
      margin: 0.5rem;
    }
    .bottom {
      font-size: 0.75rem;
      line-height: 0.75rem;
      color: var(--sub-color);
      padding: 0 0.5rem 0.5rem 0.5rem;
    }
  }
  .stats {
    display: grid;
    grid-auto-flow: column;
    justify-content: space-between;
    .group {
      padding: 0.5rem;
      .top {
        color: var(--sub-color);
        line-height: 1rem;
        // margin-bottom: -.25rem;
      }
      .bottom {
        font-size: 1.5rem;
        line-height: 1.5rem;
      }
    }
  }
}

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

#timer {
  position: fixed;
  top: 0;
  right: 0;
  width: 0vw;
  /*   height: 0.5rem; */
  height: 0.5rem;
  background: var(--sub-color);
  /*   background: #0f0f0f; */
  /*   background: red; */
  transition: 1s linear;
  z-index: -1;
}

#liveWpm {
  position: relative;
  // font-size: 1.7rem;
  // line-height: 1.7rem;
  // color: var(--sub-color);
  font-size: 10rem;
  color: black;
  opacity: 0;
  width: 100%;
  left: 0;
  text-align: center;
  // text-align: right;
  z-index: -1;
  // margin-top: .6rem;
  // grid-column: 3/4;
  // grid-row: 1/2;
  // opacity: 0;
  height: 0;
  transition: 0.25s;
}

#centerContent {
  max-width: 800px;
  min-width: 600px;
  margin: 0 auto;
  display: grid;
  grid-auto-flow: row;
  /* grid-template-rows: 2rem auto 1rem; */
  height: 100%;
  gap: 2rem;
  /* margin-top: 1rem; */
  /* margin-bottom: 1rem; */
  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;
}

#caret.default{
  width: 2px;
}

#caret.block{
  width: .7em;
  margin-left: 0.25em;
  border-radius: 0;
}

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

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

#caret.underline.size125{margin-top: 1.8em;}
#caret.underline.size15{margin-top: 2.1em;}
#caret.underline.size2{margin-top: 2.7em;}

#caret.size125{
  transform: scale(1.25);
}

#caret.size15{
  transform: scale(1.45);
}

#caret.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: .5rem;
  // margin-bottom: -0.4rem;
  width: fit-content;
  width: -moz-fit-content;
  /*   transition: 0.25s; */
  .button{
    display: grid;
    grid-auto-flow: column;
    align-content: center;
    transition: 0.25s;
    padding: 0.5rem;
    border-radius: var(--roundness);
    &.discord{
      position: relative;
      &::after{ 
        transition: .25s;
        width: .5rem;
        height: .5rem;
        content: "";
        position: absolute;
        background: #da3333;
        border-radius: 1rem;
        top: .25rem;
        right: .25rem;
        border: 2px solid var(--bg-color);
      }
    }
    &:focus{
      background: var(--sub-color);
      color: var(--main-color);
      border: none;
      outline: none;
    }
  }
}

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

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

#menu .button:hover {
  cursor: pointer;
  color: var(--main-color);
}

#menu .button .text {
  width: 0;
  overflow: hidden;
  /*   transition: .25s; */
}

/* #menu .button:hover .text{
  width: auto;
} */

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

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

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

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

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

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

#top .logo .bottom {
  margin-left: -0.15rem;
}

#top .config {
  display: grid;
  grid-auto-flow: row;
  grid-gap: 0.2rem;
  width: min-content;
  width: -moz-min-content;
  transition: 0.25s;
  /*   margin-bottom: 0.1rem; */
  grid-column: 3/4;
  grid-row: 1/2;
  justify-items: self-end;
}

#top .config .group {
  transition: 0.25s;
}

#top .config .punctuationMode {
  margin-bottom: -0.1rem;
}

#top .config .group .buttons {
  font-size: 0.7rem;
  line-height: 0.7rem;
  display: flex;
}

#top .config .group .buttons .button {
  transition: 0.25s;
  color: var(--sub-color);
  cursor: pointer;
  margin-right: 0.25rem;
}

#top .config .group .buttons .button:last-child {
  margin-right: 0;
}

#top .config .group .buttons .button:hover {
  color: var(--main-color);
}

#top .config .group .buttons .button.active:hover {
  cursor: default;
}

#top .config .group .buttons .toggleButton.active:hover {
  cursor: pointer;
}

#top .config .group .buttons .button.active {
  color: var(--main-color);
}

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

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

#top.focus .result {
  opacity: 0 !important;
}

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

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

#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: .1rem .3rem;
  margin: 3px 0;
  border-radius: 0.1rem;
  display: inline-block;
  font-size: .7rem;
  line-height: .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: .25s;
    &:hover{
      cursor: pointer;
      color: var(--main-color);
    }
  }
}

#top.focus {
  color: var(--sub-color) !important;
}

#top.focus .config {
  opacity: 0 !important;
}

#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;
    gap: .5rem;
    justify-content: center;
    align-items: center;
    grid-template-areas: 
                         "wpm acc"
                         "wpm key" 
                         "raw time"
                         "testType info";
    .group{
      .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;
      }
    }
    .info{
      align-self: baseline;
      grid-area: info;
      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: -.5rem;
        .crownWrapper{
          width: 1.7rem;
          overflow: hidden;
          height: 1.7rem;
          margin-left: .5rem;
          margin-top: .98rem;
          .crown{
            font-size: .7rem;
            line-height: 1.7rem;
            background: var(--main-color);
            color: var(--bg-color);
            border-radius: .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;
    }
  }
}


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

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

#words {
  height: fit-content;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-content: flex-start;
  user-select: none;
}

#restartTestButton, #showWordHistoryButton {
  position: relative;
  opacity: 0;
  border-radius: var(--roundness);
  padding: 1rem 5rem;
  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);
  }
}

#showWordHistoryButton{
  opacity: 1;
}

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

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

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

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

.word.error {
  /*   margin-bottom: 1px; */
  border-bottom: 2px solid #da3333;
  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.active {
  color: var(--sub-color);
}

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

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

.word letter.incorrect {
  color: #da3333;
}

.word letter.incorrect.extra {
  color: #791717;
}

.word letter.missing {
  opacity: 0.5;
}

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

.pageLogin{
  display: flex;
  grid-auto-flow: column;
  gap: 1rem;
  justify-content: space-around;
  align-items: center;
  .side{
    display: grid;
    gap: .5rem;
    justify-content: center;
  }
  form{
    display: grid;
    gap: .5rem;
    width: 100%;
    .button{
      border-radius: var(--roundness);
      background: var(--sub-color);
      color: var(--bg-color);
      padding: .5rem;
      font-size: 1rem;
      line-height: 1rem;
      text-align: center;
      cursor: pointer;
      transition: .25s;
      &:hover{
        background: var(--main-color);
      }
      .fas{
        margin-right: .5rem;
      }
    }
  }
  .preloader{
    position: fixed;
    left: 50%;
    top: 50%;
    font-size: 2rem;
    transform: translate(-50%, -50%);
    color: var(--main-color);
    transition: .25s;
  }
}

.pageAbout{
  display: grid;
  gap: 2rem;
  .section{
    display: grid;
    gap: .5rem;
    h1{
      font-size: 1rem;
      line-height: 1rem;
      color: var(--sub-color);
      margin: 0;
      font-weight: 300;
    }
    p{
      margin: 0;
      padding: 0;
    }
  }
}

.pageSettings{
  display: grid;
  // grid-template-columns: 1fr 1fr;
  gap: 2rem;
  .tip{
    color: var(--sub-color);
  }
  .section{
    display: grid;
    // gap: .5rem;
    grid-template-areas: "title title"
                          "text buttons";
    grid-template-columns: 2fr 1fr;
    align-items: center;
    h1{
      font-size: 1rem;
      line-height: 1rem;
      color: var(--sub-color);
      margin: 0;
      grid-area: title;
      font-weight: 300;
    }
    p{
      grid-area: text;
    }
    // .button{
    //   color: var(--sub-color);
    //   cursor: pointer;
    //   transition: .25s;
    //   padding: .2rem .5rem;
    //   border-radius: var(--roundness);
    //   &:hover{
    //     color: var(--main-color);
    //   }
    //   &.active{
    //     color: var(--main-color);
    //   }
    //   &:focus{
    //     background: var(--sub-color);
    //     color: var(--bg-color);
    //     border: none;
    //     outline: none;
    //   }
    // }
    .buttons{
      margin-left: 2rem;
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
      gap: .5rem;
      grid-area: buttons;
      .button{
        color: var(--sub-color);
        cursor: pointer;
        transition: .25s;
        padding: .2rem .5rem;
        border-radius: var(--roundness);

        background: rgba(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(--sub-color);
          color: var(--bg-color);
        }
        &:hover,&:focus{
          color: var(--sub-color);
          background: var(--main-color);
          outline: none;
        }
      }
    }
    &.fontSize .buttons{
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    &.themes, &.languages{
      grid-template-columns: 1fr;
      grid-template-areas: "title"
                            "buttons";
      gap: .5rem;
      .buttons{
        margin-left: 0;
        grid-auto-flow: dense;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: .5rem;
        .theme, .language{
          color: var(--sub-color);
        cursor: pointer;
        transition: .25s;
        padding: .2rem .5rem;
        border-radius: var(--roundness);

        background: rgba(0,0,0,.1);
        text-align: center;
        -webkit-user-select: none;
        display: grid;
        align-content: center;
        &.active{
          background: var(--sub-color);
          color: var(--bg-color);
        }
        &:hover,&:focus{
          color: var(--sub-color);
          background: var(--main-color);
        }
        }
      }
    }
  }
}

.signOut{
  font-size: 1rem;
  line-height: 1rem;
  justify-self: end;
  // background: var(--sub-color);
  color: var(--sub-color); 
  width: fit-content;
  padding: .5rem;
  border-radius: var(--roundness);
  cursor: pointer;
  transition: .25s;
  float: right;
  &:hover{
    color: var(--main-color);
  }
  .fas{
    margin-right: .5rem;
  }
}

.pageAccount{
  display: grid;
  gap: 1rem;
  .content{
    display: grid;
    gap: 1rem;
  }
  .preloader{
    font-size: 2rem;
    justify-self: center;
  }
  .triplegroup{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
  }
  .group{
    &.noDataError{
      margin: 20rem 0;
      // height: 30rem;
      // line-height: 30rem;
      text-align: center;
    }
    .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;
    td{
      padding: .5rem .25rem;
    }
    thead{
      color: var(--sub-color);
      font-size: .75rem;
    }
    tbody tr:nth-child(odd) td{
      background: rgba(0, 0, 0, 0.1); 
    }
  }
}

.pageAccount{
  .group.filterButtons{
    gap: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    .buttonsAndTitle{
      height: fit-content;
      height: -moz-fit-content;
      display: grid;
      gap: .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,.1);
        color: var(--sub-color);
        text-align: center;
        padding: .5rem;
        border-radius: var(--roundness);
        cursor: pointer;
        transition: .25s;
        -webkit-user-select: none;
        display: grid;
        align-content: center;
        &.active{
          background: var(--sub-color);
          color: var(--bg-color);
        }
        &:hover{
          color: var(--sub-color);
          background: var(--main-color);
        }
      }
      &.languages{
        grid-template-columns: repeat(4,1fr);
        grid-auto-flow: unset;
      }
    }
  }
}



* {
  box-sizing: border-box;
}

.hidden {
  display: none !important;
}