@font-face {
  font-family: 'Epilogue';
  src: url('fonts/Epilogue-Variable.ttf') format('truetype supports variations');
  src: url('fonts/Epilogue-Variable.ttf') format('truetype-variations');
}

@font-face {
  font-family: 'Epilogue';
  src: url('fonts/Epilogue-Italic-Variable.ttf') format('truetype supports variations');
  src: url('fonts/Epilogue-Italic-Variable.ttf') format('truetype-variations');
  font-style: italic;
}

html {
  padding: 1.25rem;
}
body {
  font-family: "Epilogue", sans-serif;
  margin: auto;
  max-width: 100ch;
  text-align: left;
  background-color: var(--body-background-color);
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.5;
  color: var(--body-color); 
}
h1 {
  font-size: 2.25rem;
  font-weight: 500;
  color: var(--h1-color);
}
h2 {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--h2-color);
}
h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--h3-color);
}

h4,
h5,
h6,
strong,
b {
  color: var(--color-b);
}
a {
  color: var(--color-a);
}
nav a {
  margin-right: 10px;
}
textarea {
  width: 100%;
  font-size: 16px;
}
input {
  font-size: 16px;
}
content {
  line-height: 1.6;
}
table {
  width: 100%;
}
img {
  max-width: 100%;
  height: auto;
}
code {
  padding: 2px 5px;
  background-color: var(--code-bg);
}
pre {
  padding: 1rem;
}
pre > code {
  all: unset;
}
blockquote {
  border: 4px dashed var(--blockquote-border);
  padding: 1rem;
  font-style: italic;
}
ul {
  list-style: disc;
  list-style-position: inside;
}
ol {
  list-style: decimal;
  list-style-position: inside;
}
li > ol {
  padding-left: 1.5rem;
}

ul, ol, p {
  white-space: normal;
}
table, th, td {
  border: 1px solid var(--table-border);
  border-collapse: collapse;
  padding: 8px;
}
article > * + * {
  margin-top: 1.25rem;
}

.recursive-box {
  border-width: 2px;
  border-style: solid;
  border-color: var(--recursive-border-color);
}

:root {
  --body-color: #bbbbbb;            
  --body-background-color: #450a0a; /* red-950 */
  --h1-color: #fecaca;              /* red-200 */
  --h2-color: #dc2626;              /* red-600 */
  --h3-color: #b91c1c;              /* red-700 */
  --color-b: #bbbbbb;               
  --color-a: #f87171;               /* red-400 */
  --code-bg: #f2f2f2;
  --blockquote-border: #b91c1c;     /* red-700 */
  --table-border: white;
  --copyright-color: #7f1d1d;       /* red-900 */
  --countdown-color: #b91c1c;       /* red-700 */
  --hr-background-color: #7f1d1d;   /* red-900 */
  --selection-background: #7f1d1d;  /* red-900 */
  --recursive-border-color: #991b1b;/* red-800 */
}