:root {
   --matrix: #00ff7f;
   --purple: #394edb;
   --light: #d83f87;
   --xeno: #060709;
   --gorgeous: #86c232;
   --sun: #e1b514;
}

body {
   font-family: "Source Code Pro", monospace;
   transition: all 0.2s ease-in;
   cursor: default;
   user-select: none;
}

h1 {
   font-size: 30px;
   font-weight: 600;
}

.current-length,
.current-mode {
   font-weight: 600;
   padding: 0 12px;
   /* border-radius: 4px; */
}
#color-modes-section {
   left: 50%;
   transform: translateX(-50%);
}

.great {
   border: 4px solid var(--matrix);
}
.good {
   border: 4px solid #ffeb3b;
}
.okay {
   border: 4px solid #ff9800;
}
.bad {
   border: 4px solid #f44336;
}
#test-result {
   color: #fff;
}
/* =================== Words Container =================== */
#words-container {
   font-family: "JetBrains Mono", monospace;
   height: 140px;
   overflow: hidden;
   outline: none;
   border: none;
}
.colors {
   transition: all 0.08s ease-in;
   cursor: pointer;
}
#words {
   line-height: 48px;
   white-space: pre-wrap;
   word-wrap: break-word;
}

.correct {
   color: green;
}

.incorrect {
   color: red;
}

.underline {
   text-decoration: underline;
   text-decoration-color: red;
}

/* =================== Focus Error =================== */
#focus-error {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-size: 18px;
   font-family: "Montserrat";
   font-weight: 500;
   display: flex;
   color: white;
}

#words-container:focus-within #focus-error {
   display: none;
}
.hide-cursor {
   cursor: none;
}
#test-modes-menu > ul > li {
   transition: all 0.4s ease;
}
/* =================== Result & Caret =================== */
#result-board {
   display: flex;
}

#caret {
   transition: left 0.1s linear;
   display: none;
}
#words-container #words {
   opacity: 0.6;
   filter: blur(3px) !important;
}

#words-container:focus-within #caret {
   display: block;
}
#words-container:focus-within #words {
   opacity: 1;
   filter: none !important;
}

.caret-animation {
   animation: caretBlink 0.4s infinite;
}

@keyframes caretBlink {
   0%,
   100% {
      opacity: 100%;
   }
   50% {
      opacity: 0%;
   }
}

/* =================== Duration & Type Highlight =================== */

/* =================== Theme: dark Mode =================== */
body.matrix {
   background: #011108;
}
body.matrix h1 {
   color: var(--matrix);
}

body.matrix a {
   color: var(--matrix);
}

body.matrix #words-container #words {
   filter: none;
   color: #047a3f;
}
body.matrix .current-length {
   background: var(--matrix);
   color: black;
}
body.matrix .current-mode {
   background: var(--matrix);
   color: black;
}
body.matrix #reset,
body.matrix #wait,
body.matrix #result-page-reset,
body.matrix #result-page-restart {
   background: var(--matrix);
   color: black;
}

body.matrix .length-list {
   color: white;
}

body.matrix .correct {
   color: #f1f1f1;
}
body.matrix .incorrect {
   color: #ff2200;
}
body.matrix .underline {
   text-decoration: underline;
   text-decoration-color: #ff2200;
}
body.matrix #timeleft {
   color: #fff;
}
body.matrix #caret {
   background: #fff;
}
body.matrix #colors-menu {
   color: #047a3f;
}
body.matrix .current-color-mode {
   color: var(--matrix);
}
body.matrix #result-box-wrapper {
   background: #011108;
}
body.matrix .result-titles {
   color: #fff;
}
body.matrix .result-data {
   color: var(--matrix);
   font-weight: 600;
}
body.matrix #restart-button {
   background: var(--matrix);
}
body.matrix #volume-btn {
   color: var(--matrix);
}
body.matrix #mobile-nav {
   background: #011108;
}
body.matrix #mobile-nav nav a {
   color: var(--matrix);
}
body.matrix #mobile-menu-open-btn {
   color: var(--matrix);
}
body.matrix #volume-btn-mobile {
   color: var(--matrix);
}
body.matrix #mobile-menu-close-btn {
   color: var(--matrix);
}
body.matrix #test-modes-menu,
body.matrix #test-length-menu {
   /* border: 1px solid #047a3f; */
   color: #047a3f;
}
body.matrix .feedback-btn {
   background: var(--matrix);
   color: #011108;
}
body.matrix #test-result {
   background: #011108;
}
body.matrix #test-result {
   color: #fff;
}
/* ===============================quantum mode======================================= */

body.quantum {
   background: #0e081b;
}
body.quantum h1 {
   color: var(--purple);
}
body.quantum h1 span {
   color: #fff;
}
body.quantum a {
   color: var(--purple);
}

body.quantum #words-container #words {
   filter: none;
   color: var(--purple);
}
body.quantum .current-length {
   background: var(--purple);
   color: black;
}
body.quantum #reset,
body.quantum #wait {
   background: var(--purple);
   color: black;
}
body.quantum .length-list {
   color: white;
}
body.quantum #words {
   color: var(--dark-words-color);
}
body.quantum .correct {
   color: #f1f1f1;
}
body.quantum .incorrect {
   color: #ff5900;
}
body.quantum .underline {
   text-decoration: underline;
   text-decoration-color: #ff5900;
}
body.quantum #timeleft {
   color: #fff;
}
body.quantum #caret {
   background: #fff;
}
body.quantum #colors-menu {
   color: #243187;
}
body.quantum .current-color-mode {
   color: var(--purple);
}
body.quantum #result-box-wrapper {
   background: #0e081b;
}
body.quantum .result-titles {
   color: #fff;
}
body.quantum .result-data {
   color: var(--purple);
   font-weight: 600;
}
body.quantum #restart-button {
   background: var(--purple);
}
body.quantum #volume-btn {
   color: var(--purple);
}
body.quantum #mobile-nav {
   background: #0e081b;
}
body.quantum #mobile-nav nav a {
   color: var(--purple);
}
body.quantum #mobile-menu-open-btn {
   color: var(--purple);
}
body.quantum #volume-btn-mobile {
   color: var(--purple);
}
body.quantum #mobile-menu-close-btn {
   color: var(--purple);
}
body.quantum #test-modes-menu,
body.quantum #test-length-menu {
   color: var(--purple);
}
body.quantum .current-mode {
   background: var(--purple);
   color: #0e081b;
}
body.quantum #test-result {
   color: #fff;
}
body.quantum .feedback-btn {
   background: var(--purple);
   color: #0e081b;
}
/* =================================================================================== */
/* ===============================ghostline mode======================================= */

body.ghostline {
   background: #d8d8d8;
}
body.ghostline h1 {
   color: #454444;
}
body.ghostline h1 span {
   color: #454444;
}
body.ghostline a {
   color: #686868;
   font-weight: 500;
}

body.ghostline #words-container #words {
   filter: none;
   color: #767676;
}
body.ghostline .current-length {
   background: #000;
   color: #eae7dc;
}
body.ghostline #reset,
body.ghostline #wait {
   background: #000;
   color: #eae7dc;
}
body.ghostline .length-list {
   color: black;
   font-weight: 500;
}
body.ghostline .correct {
   color: #434343;
}
body.ghostline .incorrect {
   color: #ff0000;
}
body.ghostline .underline {
   text-decoration: underline;
   text-decoration-color: #ff0000;
}
body.ghostline #timeleft {
   color: #686868;
}
body.ghostline #caret {
   background: #000;
}
body.ghostline #colors-menu {
   color: #898686;
}
body.ghostline .current-color-mode {
   color: #000;
}
body.ghostline #result-box-wrapper {
   background: #d8d8d8;
}
body.ghostline .result-titles {
   color: #000;
   font-weight: 600;
}
body.ghostline .result-data {
   color: #000;
   font-weight: 600;
}
body.ghostline #focus-error {
   color: #000;
}
body.ghostline #restart-button {
   background: #000;
   color: #fff;
}
body.ghostline #volume-btn {
   color: #686868;
}
body.ghostline #mobile-nav nav a {
   color: #686868;
}
body.ghostline #mobile-menu-open-btn {
   color: #686868;
}
body.ghostline #volume-btn-mobile {
   color: #686868;
}
body.ghostline #test-modes-menu,
body.ghostline #test-length-menu {
   color: #000;
}
body.ghostline .current-mode {
   background: #000;
   color: #fff;
}
body.ghostline #test-result {
   color: #000;
}
body.ghostline .feedback-btn {
   background: #000;
   color: #d8d8d8;
}

/* =================================================================================== */
/* ===============================void mode======================================= */

body.void {
   background: var(--xeno);
}
body.void h1 {
   color: #d6e3ff;
}
body.void h1 span {
   color: #fff;
}
body.void a {
   color: #d6e3ff;
   font-weight: 500;
}
body.void #words-container #words {
   filter: none;
   color: #444d51;
}
body.void .current-length {
   background: #d6e3ff;
   color: var(--xeno);
}
body.void #reset,
body.void #wait {
   background: #d6e3ff;
   color: var(--xeno);
}
body.void .length-list {
   color: #d6e3ff;
   font-weight: 500;
}
body.void .correct {
   color: #d6e3ff;
}
body.void .incorrect {
   color: red;
}
body.void .underline {
   text-decoration: underline;
   text-decoration-color: red;
}
body.void #timeleft {
   color: #d6e3ff;
}
body.void #caret {
   background: #d6e3ff;
}
body.void #colors-menu {
   color: #757d8d;
}
body.void .current-color-mode {
   color: #d6e3ff;
}
body.void #result-box-wrapper {
   background: var(--xeno);
}
body.void .result-titles {
   color: #fff;
   font-weight: 600;
}
body.void .result-data {
   color: #fff;
   font-weight: 600;
}
body.void #restart-button {
   background: #fff;
   color: #000;
}
body.void #volume-btn {
   color: #d6e3ff;
}
body.void #mobile-nav {
   background: var(--xeno);
}
body.void #mobile-nav nav a {
   color: #d6e3ff;
}
body.void #mobile-menu-open-btn {
   color: #d6e3ff;
}
body.void #volume-btn-mobile {
   color: #d6e3ff;
}
body.void #mobile-menu-close-btn {
   color: #d6e3ff;
}
body.void #test-modes-menu,
body.void #test-length-menu {
   color: #d6e3ff;
}
body.void .current-mode {
   background: #d6e3ff;
   color: #000;
}
body.void #test-result {
   color: #fff;
}
body.void .feedback-btn {
   background: #d6e3ff;
   color: var(--xeno);
}
/* =================================================================================== */

/* ===============================sun mode======================================= */

body.suncode {
   background: #292929;
}
body.suncode h1 {
   color: var(--sun);
}
body.suncode h1 span {
   color: #fff;
}
body.suncode a {
   color: #fff;
   font-weight: 500;
}

body.suncode #words-container #words {
   filter: none;
   color: rgb(91, 91, 91);
}
body.suncode .current-length {
   background: var(--sun);
   color: #fff;
}
body.suncode #reset,
body.suncode #wait {
   background: var(--sun);
   color: #fff;
}
body.suncode .length-list {
   color: var(--sun);
   font-weight: 500;
}
body.suncode .correct {
   color: #fff;
}
body.suncode .incorrect {
   color: red;
}
body.suncode .underline {
   text-decoration: underline;
   text-decoration-color: red;
}
body.suncode #timeleft {
   color: var(--sun);
}
body.suncode #caret {
   background: var(--sun);
}
body.suncode #colors-menu {
   color: #665209;
}
body.suncode .current-color-mode {
   color: var(--sun);
}
body.suncode #result-box-wrapper {
   background: #292929;
}
body.suncode .result-titles {
   color: #fff;
}
body.suncode .result-data {
   color: var(--sun);
   font-weight: 600;
}
body.suncode #restart-button {
   background: var(--sun);
}
body.suncode #volume-btn {
   color: #fff;
}
body.suncode #mobile-nav {
   background: #292929;
}
body.suncode #mobile-nav nav a {
   color: #fff;
}
body.suncode #mobile-menu-open-btn {
   color: var(--sun);
}
body.suncode #volume-btn-mobile {
   color: var(--sun);
}
body.suncode #mobile-menu-close-btn {
   color: var(--sun);
}
body.suncode #test-modes-menu,
body.suncode #test-length-menu {
   color: var(--sun);
}
body.suncode .current-mode {
   background: var(--sun);
   color: #fff;
}
body.suncode #test-result {
   color: #fff;
}
body.suncode .feedback-btn {
   background: var(--sun);
   color: #292929;
}
/* =================================================================================== */