:root {
  /* custom vars */
  --theme-bg-stripe-color: #434653;
  --theme-bg-stripe-opacity: 0.1;
  --theme-accent-stripe-color: #bf8200;
  --current-color: var(--text-color);
}

.colorfulMode {
  --current-color: var(--main-color);
}

button:not(.accountButtonAndMenu *),
.button:not(.accountButtonAndMenu *),
[data-ui-element="testConfig"] {
  --roundness: 5em; /* overwriting default roundness to make it softer */
}

/* Notepad style overlay */
body {
  position: relative;
}

body::before,
body::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  opacity: var(--theme-bg-stripe-opacity);
  display: block;
  z-index: -9999;
}

body::after {
  left: 0;
  width: 100%;
  background-image: linear-gradient(
    0deg,
    var(--theme-bg-stripe-color) 0.1em,
    transparent 0.1em,
    transparent 100%
  );
  background-size: 1em 2em;
}

body::before {
  left: 10vw;
  width: 0.1em;
  background: var(--theme-accent-stripe-color);
}

#commandLine .modal {
  --roundness: 0; /* making command line sharp */
}

/* restyling error displays to be strike-through instead of underlined */
#wordsWrapper .word.error {
  border-bottom: none;
}

#words .word.error {
  text-shadow: none;
}

#words:not(.blind).colorfulMode .word letter.incorrect:not(.extra),
#words:not(.blind) .word letter.incorrect:not(.extra) {
  color: var(--current-color);
}

#words:not(.blind) .word.error letter:not(.correct):not(.incorrect)::after {
  background: var(--sub-color);
}

#words:not(.blind) .word letter.incorrect,
#words:not(.blind).colorfulMode .word letter.incorrect {
  text-decoration: line-through;
  text-decoration-color: var(--error-color);
  text-decoration-thickness: 2px;
}