:root {
  --bg-color: #dadbdc;
  --main-color: #ae185e;
  --caret-color: #384693;
  --sub-color: #3846b1;
  --sub-alt-color: #bec1d2;
  --text-color: #414141;
  --error-color: #ae185e;
  --error-extra-color: #93335c;
  --colorful-error-color: #80a053;
  --colorful-error-extra-color: #306230;
}

nav {
  gap: 0.5rem;
}

header.focus nav > .textButton {
  background: var(--bg-color);
  size: 1rem;
}

header.focus nav > .textButton:nth-child(1) {
  background: #e34c6c;
}

header.focus nav:before,
header.focus nav:after {
  background: var(--sub-color);
}

nav > .textButton {
  border-radius: 10rem !important;
  color: var(--bg-color);
  background: var(--main-color);
}

body.crtmode nav > .textButton {
  box-shadow: 3px 0 1px var(--crt-main-color-glow),
    -3px 0 var(--crt-main-color-glow), 0 0 3px;
}

body.crtmode header.focus nav > .textButton,
body.crtmode nav > .textButton:hover {
  box-shadow: none;
}

body.crtmode header.focus nav > .textButton:nth-child(1) {
  box-shadow: 3px 0 1px color-mix(in srgb, #e34c6c 20%, transparent),
    -3px 0 color-mix(in srgb, #e34c6c 30%, transparent), 0 0 3px;
}
