:root {
	--red: #c43d3d;
  --light-red: #e89393;
  --orange: #ff711f;
  --pale-orange: #fecb92;
  --dark-orange: #d84f00;
  --yellow: #ffd559;


  --bg: #fff1e2;
  --bg-light: #fffcf8;
  --bg-dark: #fde4d1;
  --text: #3a2515;
  --text-faint: #864322;

  --highlight: var(--yellow);
  --link: var(--text);
  --border: var(--pale-orange);


  --font-body: serif;
  --font-size: clamp(16px, 3vw, 21px);

  --sp-edge: 1.5em;
  --width-measure: 70ch;
}


body {
	background: var(--bg-light);
	color: var(--text);
	font-size: clamp(16px, 3vw, 20px);
	line-height: 1.4;
}

::selection {
  background: var(--highlight);
  color: var(--text);
}

nav, 
main,
footer {
	max-width: var(--width-measure);
	margin-inline: auto;
	padding-inline: 1em;
}

hr {
  margin-block: 3em;
}

h1 {
	line-height: 1;
	margin-block: 0;
}
h2 {
	line-height: 1;
	margin-top: 3em;
	margin-bottom: 0;
  scroll-margin-top: 2em;
}
h3 {
	margin-top: 2em;
  margin-bottom: 0;
}

img {
  max-width: 100%;
}
figure {
  margin-inline: 0;
}

.dnf {
	opacity: .5;
	text-decoration: line-through;
}
.paused {
	opacity: .7;
}

nav,
footer {
	padding-block: 2em;
}

/*
body {
  background: var(--bg);
  
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--font-size);
  line-height: 1.5;

  box-sizing: border-box;

  position: relative;
  margin: 0;
}

* {
  position: relative;
}

mark {
  background: var(--highlight);
  border-radius: 4px;
  color: var(--text);
}
a {
  color: var(--link);
  text-decoration-color: var(--pale-orange);
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
  transition: .2s ease-in-out;
  border-radius: 4px;
  padding: .15em 0 0;
}
a:hover {
  background: var(--yellow);
}
img {
  max-width: 100%;
}


main {
	padding-inline: var(--sp-edge);
}
*/