/* Change this palette to create a new color variant. Layout stays in midnight.css. */
:root {
  --theme-bg: #101010;
  --theme-panel: #202020;
  --theme-control: #303030;
  --theme-hover: #404040;
  --theme-border: var(--theme-hover);
  --theme-accent: #ed6868;
  --theme-accent-hover: #ff8a8a;
  --theme-text: #f5f5f5;
  --theme-secondary: #d0d0d0;
  --theme-muted: #a0a0a0;

  color-scheme: dark;
  --ui-surface-0: var(--theme-bg);
  --ui-surface-1: var(--theme-panel);
  --ui-surface-2: var(--theme-control);
  --ui-surface-hover: var(--theme-hover);
  --ui-border: var(--theme-border);
  --ui-border-strong: var(--theme-border);
  --ui-accent: var(--theme-accent);
  --ui-accent-soft: var(--theme-control);
  --ui-accent-text: var(--theme-accent-hover);
  --body-background-color: var(--theme-bg) !important;
  --body-color: var(--theme-text);
  --body-background-image: none;
  --content-wrap-background-image: none !important;
  --header-wrap-background-image: none;
  --topy-header-background-image: none;
  --logo-background-image: none;
  --footer-background-image: none;
  --top-head-background-image: none;
  --navi-back-background-image: none;
  --bg-base: var(--theme-bg);
  --bg-panel: var(--theme-panel);
  --bg-control: var(--theme-control);
  --bg-raised: var(--theme-hover);
  --accent: var(--theme-accent);
  --accent-hover: var(--theme-accent-hover);
  --border: var(--theme-border);
  --text-primary: var(--theme-text);
  --text-secondary: var(--theme-secondary);
  --text-muted: var(--theme-muted);
}

body {
  background-color: var(--theme-bg);
  color: var(--theme-text);
}

body #header_wrap {
  background: var(--theme-bg);
  border-color: var(--theme-border);
}

body #topy_header {
  width: 100%;
  max-width: 1200px;
  background: none;
}

body #logo {
  position: relative;
  inset: auto;
  width: min(560px, calc(100% - 48px));
  height: 182px;
  margin: 0 auto;
  background: none;
}

body #logo > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.blacklisted-header-banner {
  display: block;
  width: 100%;
  max-height: 160px;
  height: auto;
  object-fit: contain;
}

body #logo_small {
  background-image: url('/assets/offline/images/blacklisted-banner.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

body #navi_back,
body #navi_back_cc,
body #footer,
body #foot_holder {
  background: var(--theme-panel);
  border-color: var(--theme-border);
}

body .content_wrap {
  background: var(--theme-panel);
  border-color: var(--theme-border);
}

body #head .menuHolder .nav > li > .top-a {
  background: var(--theme-control);
  color: var(--theme-secondary);
  border-color: var(--theme-border);
}

body #head .menuHolder .nav > li:hover > .top-a,
body #head .menuHolder .nav > li:focus-within > .top-a,
body #head .menuHolder .nav > li > .top-a[aria-expanded='true'] {
  background: var(--theme-hover);
  color: var(--theme-accent-hover);
  box-shadow: inset 0 -2px var(--theme-accent);
}

body #head .menuHolder .nav > li > div {
  background: var(--theme-panel);
  border-color: var(--theme-border);
}

body #head .menuHolder .nav > li > div a:hover {
  background: var(--theme-hover);
  color: var(--theme-accent-hover);
}

.midnight-pillars::before,
.midnight-pillars::after {
  background: linear-gradient(transparent, var(--theme-accent), transparent) 0 -150px / 100% 150px no-repeat, var(--theme-control);
  box-shadow: 0 0 14px color-mix(in srgb, var(--theme-accent) 12%, transparent);
}

body :is(button, input[type='submit'], input[type='button'], .tempel-button, .ps-button) {
  background-color: var(--theme-control);
  border-color: var(--theme-border);
  color: var(--theme-text);
}

body :is(button, input[type='submit'], input[type='button'], .tempel-button, .ps-button):not(:disabled):hover {
  background-color: var(--theme-hover);
  border-color: var(--theme-accent);
  color: var(--theme-text);
}

body :is(a, button, input, textarea, select, summary):focus-visible {
  outline-color: var(--theme-accent);
}

body :is(input:not([type='hidden']):not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']), textarea, select) {
  background-color: var(--theme-control);
  border-color: var(--theme-border);
  color: var(--theme-text);
}

@media (max-width: 600px) {
  body #logo {
    width: calc(100% - 32px);
  }
}

@media (max-width: 800px) {
  body #head,
  body #navi_back,
  body #head .ppnavi,
  body #pull_navi,
  body #menu_wrapper,
  body #menu_wrapper_cc {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    left: 0;
  }

  body #menu_wrapper_cc {
    position: relative;
    float: none;
  }

  body #head .menuHolder {
    width: 100%;
    margin: 0;
  }

  body #head .menuHolder > .nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
  }

  body #head .menuHolder > .nav > li {
    float: none;
  }

  body #menu_wrapper_cc .menuHolder > .nav > li {
    flex: 0 0 30px;
    width: 30px;
  }

  body #menu_wrapper_cc .top-a {
    width: 30px !important;
    min-width: 0;
    padding: 0;
  }

  body #menu_wrapper_cc .tempel-nav-icon {
    width: 28px;
    font-size: 16px;
  }

  body #logo_small {
    display: none;
  }

  body #header_wrap {
    position: relative;
    height: auto;
    margin: 0;
  }

  body #topy_header {
    height: 140px;
    margin-top: 160px;
  }

  body #logo {
    height: 140px;
  }

  body .blacklisted-header-banner {
    max-height: 120px;
  }

  body #navi_back_cc {
    position: relative;
    height: auto;
    margin: 0;
  }

  body #head_info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: auto;
    padding: 8px 12px;
  }

  body #head_info .head_date_wrap,
  body #menu_pm_wrap {
    position: static;
    float: none;
    width: auto !important;
    max-width: 100%;
    margin: 0 !important;
  }

  body #main {
    margin-top: 24px !important;
  }

  body #down_shadow {
    height: 0;
    margin: 0;
    background: none;
  }
}