@font-face {
  font-family: 'Intel One Mono';
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url(/static/fonts/IntelOneMono-Light.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --frost: #bff6ff;
  --frost-soft: #79dff2;
  --rune: #38a5ff;
  --gold: #d7ad5a;
  --ember: #e46654;
  --void: #03070d;
  --saronite: #071521;
  --saronite-2: #0d2635;
  --panel: rgba(5, 17, 28, 0.9);
  --panel-bright: rgba(22, 65, 82, 0.7);
  --text: #e7f8ff;
  --muted: #99b8c7;
}

html {
  min-height: 100%;
}

body {
  min-height: 100%;
  margin-top: 96px;
  color: var(--text);
  background-color: var(--void);
  background-image:
    radial-gradient(circle at 50% 0%, rgba(92, 205, 255, 0.24), transparent 34rem),
    linear-gradient(135deg, rgba(4, 14, 22, 0.4), rgba(1, 4, 9, 0.84)),
    url('/static/img/wotlk.jpg');
  background-attachment: fixed;
  background-position: center top;
  background-size: cover;
  font-family: 'Intel One Mono', 'Segoe UI', system-ui, sans-serif;
  letter-spacing: 0.01em;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(123, 226, 255, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(123, 226, 255, 0.03) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(circle at 50% 18%, black, transparent 72%);
  mask-image: radial-gradient(circle at 50% 18%, black, transparent 72%);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.58));
}

/* menu */

.navbar {
  padding: 18px 28px;
  border-bottom: 1px solid rgba(154, 231, 255, 0.42);
  background:
    linear-gradient(180deg, rgba(13, 36, 52, 0.96), rgba(3, 8, 14, 0.93)) !important;
  box-shadow:
    0 0 34px rgba(64, 184, 255, 0.25),
    inset 0 -1px 0 rgba(215, 173, 90, 0.32);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.navbar::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--frost), var(--gold), transparent);
  opacity: 0.72;
}

.navbar-brand {
  position: relative;
  top: -2px;
  display: inline-block;
  width: 200px;
  padding: 0 22px 0 0;
  color: var(--frost) !important;
  font-size: 25px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-shadow:
    0 0 12px rgba(102, 218, 255, 0.95),
    0 0 26px rgba(56, 165, 255, 0.55);
}

.navbar-brand::after {
  content: '';
  position: absolute;
  right: 8px;
  top: calc(12% + 2px);
  width: 1px;
  height: 76%;
  background: linear-gradient(transparent, var(--gold), transparent);
}

.navbar-toggler {
  border-color: rgba(121, 223, 242, 0.55);
  box-shadow: 0 0 16px rgba(56, 165, 255, 0.24);
}

.nav-link {
  margin: 3px 6px;
  padding: 8px 10px !important;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--muted) !important;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.nav-link:hover,
.nav-link:focus,
.nav-link.active {
  color: var(--frost) !important;
  border-color: rgba(121, 223, 242, 0.42);
  background: linear-gradient(180deg, rgba(37, 112, 144, 0.34), rgba(5, 16, 28, 0.34));
  box-shadow: inset 0 0 18px rgba(56, 165, 255, 0.16), 0 0 16px rgba(56, 165, 255, 0.16);
  text-decoration: none;
}

.nav-link.active {
  color: #fff8d6 !important;
  border-color: rgba(215, 173, 90, 0.58);
}

.nav-link svg {
  position: relative;
  bottom: 2px;
  filter: drop-shadow(0 0 6px rgba(121, 223, 242, 0.7));
}

.dropdown-menu {
  border: 1px solid rgba(121, 223, 242, 0.34);
  background: rgba(4, 13, 23, 0.96);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), 0 0 22px rgba(56, 165, 255, 0.15);
}

.dropdown-item {
  color: var(--text);
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--frost);
  background: rgba(56, 165, 255, 0.18);
}

body > .alert {
  position: relative;
  top: 18px;
  margin: 20px 20px 0;
  border: 1px solid rgba(228, 102, 84, 0.65);
  background: linear-gradient(135deg, rgba(73, 17, 20, 0.94), rgba(17, 10, 18, 0.94));
  color: #ffe9e6;
  box-shadow: 0 0 24px rgba(228, 102, 84, 0.22);
}

/* body */

.container {
  position: relative;
  max-width: 980px;
  margin-top: 42px;
  padding: 26px 32px 34px;
  border: 1px solid rgba(139, 223, 255, 0.46);
  border-radius: 3px;
  background:
    linear-gradient(145deg, rgba(18, 54, 72, 0.88), rgba(3, 12, 22, 0.94) 48%, rgba(8, 21, 34, 0.91)),
    radial-gradient(circle at 100% 0%, rgba(56, 165, 255, 0.18), transparent 20rem);
  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.46),
    0 0 34px rgba(56, 165, 255, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.045);
  overflow: hidden;
}

.container::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--gold), transparent 18%, transparent 82%, var(--gold)) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(121, 223, 242, 0.4), transparent) bottom / 100% 1px no-repeat;
  opacity: 0.72;
}

.container ul {
  padding-left: 22px;
}

.container li::marker {
  color: var(--gold);
}

.container a {
  color: var(--frost-soft);
  text-decoration: none;
  text-shadow: 0 0 9px rgba(56, 165, 255, 0.42);
}

.container a:hover,
.container a:focus {
  color: #fff1bc;
  text-decoration: none;
}

.container h1,
.modal-title {
  color: #fff7d2;
  font-size: clamp(25px, 4vw, 38px);
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 0 16px rgba(215, 173, 90, 0.32), 0 0 28px rgba(56, 165, 255, 0.25);
}

.container h1 {
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(121, 223, 242, 0.24);
}

.container h2 {
  margin-top: 34px;
  color: var(--frost);
  font-size: 19px;
  font-weight: 300;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.container p,
.container li,
.form-label,
.form-check-label {
  color: var(--text);
}

.container b,
.container strong {
  color: #fff4c5;
  font-weight: 600;
}

.container pre,
.container code,
textarea.form-control {
  font-family: 'Intel One Mono', 'SFMono-Regular', Consolas, monospace !important;
  font-weight: 300;
}

.container pre {
  padding: 14px;
  border: 1px solid rgba(121, 223, 242, 0.32);
  border-left: 3px solid var(--rune);
  background: rgba(1, 7, 13, 0.7);
  color: #d9f9ff;
  box-shadow: inset 0 0 18px rgba(56, 165, 255, 0.1);
}

.container code {
  color: #c7fbff;
}

/* forms */

.form-control {
  border: 1px solid rgba(121, 223, 242, 0.38);
  border-radius: 2px;
  background-color: rgba(2, 10, 18, 0.82);
  color: var(--text);
  box-shadow: inset 0 0 16px rgba(56, 165, 255, 0.08);
}

.form-control:focus {
  border-color: var(--frost);
  background-color: rgba(3, 15, 27, 0.94);
  color: #fff;
  box-shadow: 0 0 0 0.2rem rgba(56, 165, 255, 0.18), inset 0 0 18px rgba(56, 165, 255, 0.13);
}

.form-check-input {
  width: 20px;
  height: 20px;
  border-color: rgba(121, 223, 242, 0.52);
  background-color: rgba(2, 10, 18, 0.82);
}

.form-check-input:checked {
  border-color: var(--gold);
  background-color: var(--rune);
  box-shadow: 0 0 14px rgba(56, 165, 255, 0.46);
}

.btn-primary {
  border: 1px solid rgba(215, 173, 90, 0.72);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(42, 124, 157, 0.95), rgba(9, 43, 70, 0.98)),
    linear-gradient(90deg, transparent, rgba(255, 242, 192, 0.24), transparent);
  color: #fff8d7;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: inset 0 0 18px rgba(121, 223, 242, 0.25), 0 0 20px rgba(56, 165, 255, 0.18);
}

.btn-primary:hover,
.btn-primary:focus {
  border-color: #ffe3a0;
  background: linear-gradient(180deg, rgba(55, 164, 196, 0.98), rgba(14, 58, 90, 0.98));
  color: #fff;
  box-shadow: inset 0 0 22px rgba(121, 223, 242, 0.34), 0 0 28px rgba(56, 165, 255, 0.28);
}

.modal-content {
  border: 1px solid rgba(121, 223, 242, 0.42);
  border-radius: 3px;
  background: linear-gradient(145deg, rgba(13, 39, 55, 0.98), rgba(3, 10, 18, 0.98));
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.56), 0 0 30px rgba(56, 165, 255, 0.18);
}

@media (max-width: 767.98px) {
  body {
    margin-top: 78px;
    background-attachment: scroll;
  }

  .navbar {
    padding: 14px 16px;
  }

  .navbar-brand {
    font-size: 20px;
  }

  .nav-link {
    margin: 5px 0;
  }

  .container {
    width: calc(100% - 24px) !important;
    margin-top: 24px;
    padding: 22px 20px 28px;
  }
}