:root {
  --fg-color: #e9e9e2;
  --bg-color: #16161d;
  --light-bg-color: #45455B;
  --dark-bg-color: #0f0f14;
  --accent-color: #ffc342;

  --main-font: Helvetica, sans-serif;
  --accent-font: Georgia, serif;
}

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

html,
body {
  height: 100%;
}

body,
h1,
h2,
h3,
ul,
li,
p {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg-color);
  color: var(--fg-color);

  font-family: var(--main-font);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.6;

  display: flex;
  flex-direction: column;
}

.container {
  flex: 1 0 auto;
  margin-inline: auto;
  width: min(70%, 50rem);
}

footer {
  /* background: var(--dark-bg-color); */

  text-align: center;

  flex-shrink: 0;
  padding-block: 1.25rem;
}

h2,
h3,
p {
  margin-block: 1em
}

h1,
h2,
h3 {
  font-family: var(--accent-font);
  font-weight: 800;
  line-height: 1;
}

h1 {
  margin-block: 2rem;
  font-size: clamp(2rem, 5vw + 1rem, 4rem);
}

h1 small {
  display: block;
}

hgroup h1 {
  margin-block: 0;
}

hgroup p {
  margin-block: 0;
  font-style: italic;
  font-size: 1.25rem;
  font-family: var(--accent-font);
}

hgroup {
  margin-block: 2rem;
}

nav ul {
  list-style: none;
  /* white-space: nowrap; */
}

nav li {
  font-size: 1.25rem;
  position: relative;
}

nav li::before {
  content: ">";
  font-weight: 900;
  position: absolute;
  left: -20px;
}

i {
  color: var(--main-font)
}

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

  font-family: var(--accent-font);
  font-style: italic;
  text-decoration-style: dashed;
}

footer a {
  font-size: 1rem;
}

footer li {
  line-height: 1rem;
}

hr {
  border-color: var(--light-bg-color)
}