* {
  box-sizing: border-box;
  position: relative;
  min-width: 0;
  margin: 0;
}

:root {
  --primary-color: #F9746F;
  --primary-subtle-color: #ffc0b8;
  --secondary-color: #6b0000;
  --bg-color: #fffbfa;
  --ideal-line-length: min(60ch, 100%);
  --space: 1em;
  --large-space: 4em;
  --base-font-size: 112.5%;
}

::selection {
  background: var(--primary-subtle-color);
}

body {
  min-height: 100dvh;
  line-height: 1.5;
  background-color: var(--bg-color);
  font-size: var(--base-font-size);
}

main {
  padding-inline: var(--space);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
}

article {
  width: var(--ideal-line-length);
}

h1,
h2,
h3,
h4 {
  text-wrap: balance;
  font-weight: 500;
}

p {
  text-wrap: pretty;
}

li {
  list-style-type: none;
}

ul {
  padding-inline-start: 0;
}

footer {
  list-style: none;
  padding-bottom: var(--space);
  display: flex;
  color: var(--secondary-color);
  gap: var(--space);
  justify-content: center;
}

a {
  color: inherit;
  text-decoration-color: var(--primary-color);
  text-decoration-thickness: 1.5px;
  transition: color .3s;
}

a:hover {
  color: var(--primary-color);
}

.ascii {
  font-family: monospace;
  font-size: clamp(0.5em, 2vw, 1em);
}