:root {
  --background-color: #141a1e;
  --background-color-2: #c99e47;
  --background-color-3: #333c42;
  --background-color-4: #040405aa;
  --foreground-color: #f4f4f1;
  --foreground-color-2: #a9ae55;
  --foreground-color-2-weak: #989c5940;
  --foreground-color-3: #3f4548;
  --foreground-color-4: #989c5999;
  --foreground-color-5: #ffffff99;
  --border-color: #575b58;
  --border-color-2: #ffffff99;
  --button-accent-1: #e2b64e;
  --button-accent-2: #bb8825;
  --page-width: 1120px;
  --section-space: clamp(3rem, 8vw, 7rem);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background-color: var(--background-color);
  background-image: url("../assets/images/background.tile.small.1.png"), linear-gradient(180deg, #33373d 0%, #202329 100%);
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  color: var(--foreground-color);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 0.95rem;
  line-height: 1.45;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button, input, textarea, select { font: inherit; }
.none { display: none !important; }
.foreground-2 { color: var(--foreground-color-2); }
.component-bicolor span { color: var(--foreground-color-2); font-style: italic; }
.title { color: var(--foreground-color-2); font-size: clamp(1.8rem, 6vw, 2.85rem); line-height: 1; text-align: center; }
img:not([src]), img[src=""] { visibility: hidden; }
*:focus-visible { outline: 2px solid var(--background-color-2); outline-offset: 3px; }