/*inspired by GMK MOONLIGHT*/
:root {
  --bg-color: #191f28;
  --main-color: #c69f68;
  --caret-color: #8f744b;
  --sub-color: #4b5975;
  --sub-alt-color: #141a22;
  --text-color: #ccccb5;
  --error-color: #b81b2c;
  --error-extra-color: #84131f;
  --colorful-error-color: #b81b2c;
  --colorful-error-extra-color: #84131f;
}

nav {
  gap: 0.5rem;
}

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

nav > .textButton:nth-child(1),
nav > .textButton:nth-child(2),
nav > .textButton:nth-child(3),
nav > .textButton:nth-child(4) {
  border-radius: rem !important;
  color: #191f28 !important;
  background: #c69f68;
}

nav > .textButton:nth-child(1):hover,
nav
  > .textButton:nth-child(2):hover
  nav
  > .textButton:nth-child(3):hover
  nav
  > .textButton:nth-child(4):hover {
  border-radius: rem !important;
  color: #4b5975 !important;
  transition: 0.25s;
}

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

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

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