:root {
  --content-max-width: 900px;
  --ink: #222222;
  --muted-ink: #444444;
  --accent: #0000aa;
  --link-hover-bg: #0000ff;
  --link-active-bg: #ff00ff;
  --bg: #f8f8f8;
}

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

body {
  font-family: 'Roboto Slab', serif;
  font-size: clamp(1rem, 0.9rem + 1vw, 1.667rem);
  background-color: var(--bg);
  color: var(--ink);
  margin: 0;
  padding-top: 20px;
}

a:link,
a:visited {
  color: var(--ink);
  text-decoration: none;
}

a:hover {
  color: #ffffff;
  background-color: var(--link-hover-bg);
}

a:active {
  color: #ffffff;
  background-color: var(--link-active-bg);
}

#container {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 20px;
  padding-bottom: 40px;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 16px;
}

#header {
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(2rem, 1.5rem + 4vw, 5rem);
  line-height: 1.1;
  color: var(--ink);
}

#header-image {
  flex: 0 0 auto;
  width: clamp(70px, 40vw, 280px);
  aspect-ratio: 280 / 226;
  background-image: url("scales-black-animated.gif");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right top;
}

.section-header {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 20px;
  white-space: pre-line;
  color: var(--accent);
}

.section {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 20px;
  padding-top: 40px;
  padding-bottom: 40px;
  white-space: pre-line;
  color: var(--ink);
}

.footer {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 20px;
  padding-top: 40px;
  padding-bottom: 40px;
  font-size: 0.833rem;
  color: var(--muted-ink);
}