@font-face {
  font-family: 'Determination Sans';
  src: url('DeterminationSansWebRegular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

:root {
  --text: white;
  --border: white;
  --accent: white;
  --bg: black;
  --gradientTop: black;
  --gradientBottom: black;

  --border-thickness: 2px;

  /* Scalable font size and spacing */
  --base-font-size: 1.125rem; /* ~18px (50% bigger than default 12px base) */
  --gap: 0.75rem; /* 12px */
  --padding: 0.75rem; /* 12px */
}

* {
  box-sizing: border-box;
  font-family: 'Determination Sans', sans-serif;
  color: var(--text);
  background-color: var(--bg);
}

html {
  font-size: 100%;
}

body {
  padding: var(--padding);
  font-size: var(--base-font-size);
  background-color: var(--bg);
  margin: 0;
}

.container {
  max-width: 55rem;
  margin: 5vw auto 12px auto;
  border: var(--border-thickness) solid var(--border);
  border-radius: 0;
  display: flex;
  flex-wrap: wrap;
  padding: var(--padding);
  gap: var(--gap);
}

.small { flex: 1 1 9%; }
.large { flex: 1 1 82%; }
.full  { flex: 1 1 100%; }
.half  { flex: 1 1 49%; }

header {
  width: 100%;
  height: 5.5rem; /* ~88px */
  border: var(--border-thickness) solid var(--border);
  border-radius: 0;

  display: flex;           /* flex container */
  align-items: center;     /* vertical centering */
  gap: 0.5rem;             /* space between image and text */
  padding: 0 0.5rem;       /* horizontal padding */
  position: relative;
}

header img.header-img {
  height: 4rem;            /* 2x bigger image */
  width: auto;
  display: block;
}

header span {
  font-size: 1.875rem;     /* ~30px */
  margin: 0;
  font-weight: bold;
  color: var(--text);

  position: static;
  bottom: auto;
  right: auto;
}

nav {
  border: var(--border-thickness) solid var(--border);
  border-radius: 0;
  padding: var(--padding);
}
nav div {
  text-align: center;
  font-size: 1.125rem;
  margin: 0 0 0.4rem 0;
}
nav a {
  display: block;
  margin: 0.4rem 0;
  border: var(--border-thickness) solid var(--border);
  border-radius: 0;
  padding: 0.375rem 0.75rem;
  text-decoration: none;
  color: var(--text);
  font-size: 0.9rem;
}
nav a:hover,
nav a:focus {
  background-color: var(--text);
  color: var(--bg);
}

div.small > img {
  display: block;
  margin: var(--gap) auto;
  border: var(--border-thickness) solid var(--border);
  border-radius: 0;
  max-width: 100%;
}

section {
  border: var(--border-thickness) solid var(--border);
  border-radius: 0;
  padding: var(--padding);
}

footer {
  text-align: center;
  margin-bottom: 5vw;
  font-size: 0.8rem;
}
footer a {
  text-decoration: none;
  color: var(--text);
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0 0 0.75rem 0;
  line-height: 1.3;
  font-family: 'Determination Sans', sans-serif;
  color: var(--text);
}

h1 {
  font-size: 1.5rem; /* ~24px */
  letter-spacing: 0.09rem;
  font-weight: normal;
  text-align: center;
  border-bottom: var(--border-thickness) solid var(--border);
  padding-bottom: 0.375rem;
  margin-bottom: 0.75rem;
}
h2 {
  font-size: 1.125rem;
  font-weight: normal;
  text-align: center;
}
h3 {
  font-size: 1rem;
}
h4 {
  font-size: 0.9rem;
  padding-left: 0.5rem;
}

img {
  max-width: 100%;
  height: auto;
}
pre {
  overflow-x: auto;
}

a:visited {
  color: var(--accent);
}
a:hover,
a:focus {
  font-style: italic;
  background-color: var(--text);
  color: var(--bg);
}