/* Root */

:root {
  color-scheme: dark;
  --bg: #111213;
  --inner-bg: #1b1c1d;
  --colored-inner-bg: #27383f;
  --border-color: #313335;
  --colored-border-color: #425f6b;
  --text-color: #ffffff;
  --inactive-text-color: #aaaaaa;
  --colored-text-color: #87a8b5;
  --link-color: #66ccff;
}



/* Fonts */

@font-face {
  font-family: 'Primary Header';
  src: url('fonts/beleren-small-caps.woff2');
}

@font-face {
  font-family: 'Secondary & Tertiary Header';
  src: url('fonts/beleren-bold.woff2');
}

@font-face {
  font-family: 'Body Text';
  src: url('fonts/roboto.woff2');
}



/* Default style for elements */
/*   Must be first because everything should have the option to override it.*/

*,
*:before,
*:after {
  box-sizing: border-box;
  border-color: var(--border-color);
  border-style: solid;
  border-width: 0;
}

body {
  margin: 0;
  font-family: 'Body Text', sans-serif;
  font-size: 1rem;
  background: var(--bg);
  color: var(--text-color);
}



/* Classes */
/*   Must be before elements, because the ones that "inherit" from classes might want to override something. */

.stack-panel, /* Base class */
.horizontal-stack-panel,
main,
section,
ol,
ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 1rem;
}

.horizontal-stack-panel {
  flex-direction: row;
}

.center-horizontally {
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
}

.center-content {
  justify-content: center;
}

.center-text {
  text-align: center;
}

.secondary-header,  /* Base class */
nav a {
  font-family: 'Secondary & Tertiary Header';
  font-size: 1.5rem;
}

.tertiary-header,  /* Base class */
nav.secondary a,
th {
  font-family: 'Secondary & Tertiary Header';
  font-size: 1.25rem;
}

.extra-info {
  font-family: 'Body Text';
  font-size: 0.75rem;
  color: var(--inactive-text-color);
}

.framed,  /* Base class */
textarea,
button,
table {
  background: var(--inner-bg);
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: 0.5rem;
  border-width: 0.0625rem;
}

ol .framed,  /* Base class */
ol table {
  margin: 0;
}

.preserve-whitespace {
  white-space: pre-wrap;
}



/* Optional non-class elements */
/*   Must be before main elements, becase they might override these styles. */
/*   To avoid style duplication, some elements might "inherit" a class style. */
/*   Unfortunately in CSS such "inheritatance" must be declared next to the base class. */
/*   So if an element "inherits" from some class, you won't see that here, but where the base class is defined. */

a {
  color: var(--link-color);
}

ol {
  margin: 0;
  padding-left: 1.125rem;
  gap: 0.5rem;
}

ol:has(>:nth-child(10)) {
  padding-left: 1.625rem;
}

li ul {
  padding: 0;
  margin-top: 0.25rem;
  gap: 0.25rem;
}

li li {
  list-style-position: inside;
}

table {
  text-align: center;
  border-spacing: 0;
}

textarea {
  resize: vertical;
}

button {
  justify-content: center;
  font-family: 'Secondary & Tertiary Header';
  font-size: 1rem;
  padding: 0.75rem;
  gap: 0.5rem;
  cursor: pointer;
}

th {
  font-weight: normal;
}

th,
td {
  padding: 0.5rem;
}

tr:first-child th,
tr:first-child td {
  padding-top: 0;
}

tr:last-child th,
tr:last-child td {
  padding-bottom: 0;
}

th:first-child,
td:first-child {
  padding-left: 0;
}

th:last-child,
td:last-child {
  padding-right: 0;
}



/* Main elements found in every page */

header {
  text-align: center;
  margin: 0;
  padding: 1.5rem;
  padding-left: calc(1.5rem + 100vw - 100%);
  background: var(--inner-bg);
  border-bottom: 0.0625rem solid var(--border-color);
}

.main-title {
  font-family: 'Primary Header';
  font-size: 3.5rem;
  color: var(--text-color);
  text-decoration: none;
  margin-bottom: -0.25rem;
  display: inline-block;
}

nav {
  margin-top: 0.75rem;
  gap: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

nav a {
  color: var(--inactive-text-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

nav a.active {
  color: var(--text-color);
  border-bottom: 0.125rem solid var(--text-color);
}

nav.secondary a.active {
  border-bottom: 0.0625rem solid var(--text-color);
}

nav a:hover {
  color: var(--text-color);
}

.navigation-icon img {
  vertical-align: middle;
  height: 2rem;
  width: 2rem;
}

main {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  padding-left: calc(100vw - 100%);
  align-items: center;
  line-height: 1.5rem;
}

main > * {
  max-width: 960px;
}