@font-face {
  font-family: 'tiempos-text';
  src: url('/font/tiempos-text-regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'tiempos-text';
  src: url('/font/tiempos-text-regular-italic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: 'tiempos-text';
  src: url('/font/tiempos-headline-semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: block;
}

: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: 'tiempos-text', 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;
}

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

.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);
}
*/