@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(--text-color);
  padding: .5rem;
  font-size: 1rem;
  line-height: 1rem;
  font-family: "Roboto Mono";
}

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

html { overflow-y: scroll; }

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

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

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--sub-color);
  transition: .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: .5rem 1rem;
  border-radius: var(--roundness);
  left: 50%;
  z-index: 9999;
  transform: translateX(-50%);
  top: -5rem;
}


#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;
    .button{
      color: var(--text-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(--main-color);
        color: var(--bg-color);
      }
      &:hover,&:focus{
        color: var(--bg-color);
        background: var(--main-color);
        outline: none;
      }
    }
  }
}


#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;
          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: 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;
      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: 1000px;
  min-width: 600px;
  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;
}

#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: var(--main-color);
        border-radius: 1rem;
        top: .25rem;
        right: .25rem;
        border: 2px solid var(--bg-color);
      }
      &.dotHidden::after{
        background: transparent;
        border-color: transparent;
      }
    }
    &: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 {
  font-size: .65rem;
  line-height: .65rem;
  align-self: center;
  margin-left: .25rem;
}

/* #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;
  color: var(--main-color);
  transition: .25s;
}


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

#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"
                         "tags 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;
      }
    }
    .tags{
      align-self: baseline;
      grid-area: tags;
      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;
}

#words.flipped{
  .word{
    color: var(--text-color);
    & letter.correct{
      color: var(--sub-color);
    }
  }
}

#words.extraColor{
  .word{
    & letter.correct{
      color: var(--main-color);
    }
    & letter.incorrect{
      color: var(--extra-error-color);
    }
    & letter.incorrect.extra{
      color: var(--extra-error-extra-color);
    }
  }
}

#words.flipped.extraColor{
  .word{
    color: var(--main-color);
    & letter.correct{
      color: var(--sub-color);
    }
    & letter.incorrect{
      color: var(--extra-error-color);
    }
    & letter.incorrect.extra{
      color: var(--extra-error-extra-color);
    }
  }
}

#words.flipped.extraColor .word.error,
#words.extraColor .word.error
{
  border-bottom: 2px solid var(--extra-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);
  }
}

#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;
  // transition: .25s;
  .wordInputAfter{
    opacity: 1;
    position: absolute;
    background: var(--sub-color);
    color: var(--bg-color);
    /* background: red; */
    padding: .5rem;
    /* left: .5rem; */
    margin-left: -.5rem;
    margin-top: -.5rem;
    border-radius: var(--roundness);
    // box-shadow: 0 0 10px rgba(0,0,0,.25);
    transition: .25s;
    text-shadow:  none;
  }
  // &::after{
  //   content: attr(input);
  //   opacity: 0;
  //   position: absolute;
  //   background: var(--sub-color);
  //   color: var(--bg-color);
  //   /* background: red; */
  //   padding: .5rem;
  //   /* left: .5rem; */
  //   margin-left: -.5rem;
  //   margin-top: -.5rem;
  //   border-radius: var(--roundness);
  //   // box-shadow: 0 0 10px rgba(0,0,0,.25);
  //   transition: .25s;
  // }
  // &:hover::after{
  //   opacity: 1;
  // }
  // &:hover{
  //   color: var(--bg-color);
  // }
  
}



#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 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{
  .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;
    &.login{
      grid-template-areas: "title forgotButton"
                              "form form";
      .title{
        grid-area: title;
      }
      #forgotPasswordButton{
        grid-area: forgotButton;
        font-size: .5rem;
        line-height: .5rem;
        height: fit-content;
        align-self: center;
        justify-self: right;
        padding: .25rem 0;
        color: var(--sub-color);
        cursor: pointer;
        transition: .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;
            & ~ .customCheckbox{
              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 ~ .customCheckbox{
              background: var(--main-color);
            }
          }
        }
      }
    }
  }
  form{
    display: grid;
    gap: .5rem;
    width: 100%;
    .button{
      color: var(--text-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;
      i{
        margin-right: .5rem;
      }
      &.active{
        background: var(--main-color);
        color: var(--bg-color);
      }
      &:hover,&:focus{
        color: var(--bg-color);
        background: var(--main-color);
        outline: none;
      }
    }
  }
  .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;
      color: var(--text-color);
    }
  }
}

.pageSettings{
  display: grid;
  // grid-template-columns: 1fr 1fr;
  gap: 2rem;
  .tip{
    color: var(--sub-color);
  }
  .sectionGroupTitle{
    font-size: 1.5rem;
    color: var(--sub-color);
    line-height: 1.5rem;
  }
  .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;
    h1{
      font-size: 1rem;
      line-height: 1rem;
      color: var(--sub-color);
      margin: 0;
      grid-area: title;
      font-weight: 300;
    }
    p{
      grid-area: text;
    }
    .text{
      align-self: normal;
      color: var(--text-color);
    }
    .buttons{
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
      gap: .5rem;
      grid-area: buttons;
      .button{
        color: var(--text-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(--main-color);
          color: var(--bg-color);
        }
        &:hover,&:focus{
          color: var(--bg-color);
          background: var(--main-color);
          outline: none;
        }
      }
    }
    &.tags{
      .tagsList{
        display: grid;
        gap: .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: .5rem;
        color: var(--text-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(--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{
      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, .layout{
          color: var(--text-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(--main-color);
            color: var(--bg-color);
          }
          &:hover,&:focus{
            color: var(--bg-color);
            background: var(--main-color);
          }
        }
      }
    }
  }
}

.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: .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;
    .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,.1);
        color: var(--text-color);
        text-align: center;
        padding: .5rem;
        border-radius: var(--roundness);
        cursor: pointer;
        -webkit-transition: .25s;
        transition: .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: .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(--text-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(--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;
      }
    }
  }
}



* {
  box-sizing: border-box;
}

.hidden {
  display: none !important;
}