:root {
  --bg-color: #bfbec2;
  --main-color: #553d94;
  --caret-color: #523793;
  --sub-color: #9f8ad4;
  --sub-alt-color: #b5b0c2;
  --text-color: #2e2e2e;
  --error-color: #ca4754;
  --error-extra-color: #7e2a33;
  --colorful-error-color: #ca4754;
  --colorful-error-extra-color: #7e2a33;
}

nav {
  gap: 0.5rem;
}

header.focus nav > .textButton,
header.focus nav:before,
header.focus nav:after {
  background: #99989f;
}

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

nav > .textButton:nth-child(1) {
  background: #553d94;
}

nav > .textButton:nth-child(2) {
  background: #6851a4;
}

nav > .textButton:nth-child(3) {
  background: #7962b3;
}

nav > .textButton:nth-child(4) {
  background: #8c76c3;
}

nav > .textButton:nth-child(5) {
  background: #9f8ad4;
}

nav > .textButton:nth-child(6),
nav > .textButton:nth-child(7) {
  background: #9f8ad4;
}

nav > .textButton:nth-child(8) {
  background: #a692d7;
}

header.focus nav > .textButton.discord::after {
  border-color: transparent;
}

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

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

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

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

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

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

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

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