:root {
  /* Colours */
  --color-bg: #002654;
  --color-text: #ffffff;
  --color-accent: #ef4135;
  --color-focus: #ffffff;
  /* Typography */
  --font-body: "Courier New", Courier, monospace;
  --font-size-base: 1rem;
  --line-height-base: 1.5;
  /* Layout and spacing */
  --content-width: 40rem;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  /* Underline/link treatment */
  --accent-underline-thickness: 0.1em;
  --accent-underline-offset: 0.2em;
}

/* Prefer a targeted reset over resetting margin on every element */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
p,
ul,
ol {
  margin: 0;
}

body {
  max-width: var(--content-width);
  margin-inline: auto;
  padding: var(--space-2);
  padding-bottom: calc(var(--space-2) + 2.75rem);
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: var(--line-height-base);
}

h1 {
  margin-bottom: var(--space-2);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
}

h2 {
  margin-top: var(--space-3);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.35;
}

p,
li {
  margin-bottom: var(--space-2);
  line-height: var(--line-height-base);
}

/*
  Shared accent underline utility/group.
  :where() gives this selector zero specificity, so a more specific
  component rule can override it easily later.
*/
:where(h1, a) {
  text-decoration-line: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: var(--accent-underline-thickness);
  text-underline-offset: var(--accent-underline-offset);
}

a:any-link {
  color: inherit;
}

a:hover {
  color: var(--color-accent);
  text-decoration-thickness: 0.15em;
}

a:focus-visible {
  outline: 0.15rem solid var(--color-focus);
  outline-offset: 0.2rem;
  border-radius: 0.1rem;
}

a:active {
  color: var(--color-accent);
}

footer {
  margin-top: calc(var(--space-3) * 2);
  padding-top: var(--space-2);
  border-top: 1px solid rgb(255 255 255 / 0.2);
}

footer p {
  margin-bottom: 0;
  font-size: 0.875rem;
  opacity: 0.75;
}

.lang-switch {
  display: block;
  margin-top: var(--space-2);
  text-align: right;
  font-size: 0.875rem;
  opacity: 0.75;
}