:root {
  /*** Config ***/

  --sz-base: 13pt;
  --sz-2xs: 0.2rem;
  --sz-xs: 0.4rem;
  --sz-s: 0.6rem;
  --sz-m: 0.9rem;
  --sz-l: 1.3rem;
  --sz-xl: 1.5rem;
  --sz-2xl: 1.8rem;
  --sz-3xl: 2rem;
  --sz-4xl: 2.5rem;
  --sz-5xl: 6rem;
  --sz-max: 700px;

  --brd-light: 0.5px;
  --brd-medium: 1px;
  --brd-normal: 2px;
  --brd-thick: 4px;
  --brd-rad: 5px;

  --clr-orange: #df7100;
  --clr-white: #fff9f4;
  --clr-light-gray: #eee7d1;
  --clr-dark-gray: #635f53;
  --clr-black: #1f1807;

  --clr-act: var(--clr-orange);
  --clr-bkg: var(--clr-white);
  --clr-bkg-2: var(--clr-light-gray);
  --clr-brd: var(--clr-dark-gray);
  --clr-txt: var(--clr-dark-gray);

  --font-text: Rockwell, "Rockwell Nova", "Roboto Slab", "DejaVu Serif", "Sitka Small", serif;
  --font-code: "Nimbus Mono PS", "Courier New", monospace;
}

/*** Reset ***/

*,
::after,
::backdrop,
::before,
::file-selector-button {
  box-sizing: border-box;
  margin: 0;
  transition:
    color 0.3s,
    background-color 0.3s,
    border-color 0.3s;
}

body {
  margin: 0 auto;
  color: var(--clr-txt);
  padding: var(--sz-4xl);
  min-height: var(--sz-5xl);
  max-width: var(--sz-max);
  min-width: calc(var(--sz-max) / 2);
  font-family: var(--font-text);
  background-color: var(--clr-bkg);
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  background-color: var(--clr-bkg);
  color-scheme: light dark;
  font-size: var(--sz-base);
  line-height: var(--sz-3xl);
  tab-size: 4;
  text-size-adjust: none;
}

/*** Base Elements ***/

a,
a:active,
a:hover,
a:visited {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--clr-act);
  text-decoration-thickness: var(--brd-medium);
}

a:active,
a:hover {
  color: var(--clr-act);
}

article figure {
  margin: var(--sz-l) 0;
}

article figure figcaption {
  text-align: center;
}

article figure img {
  display: block;
  margin: 0 auto;
}

article img {
  display: block;
  margin: var(--sz-l) auto;
  max-height: 50vmax;
}

article > p:first-of-type::first-letter {
  color: var(--clr-act);
  float: left;
  font-size: calc(var(--sz-5xl) / 2);
  font-weight: bold;
  line-height: 0.5;
  margin: var(--sz-2xs) 0 0;
  text-align: center;
  width: calc(var(--sz-5xl) / 2);
}

article > time:first-of-type {
  display: block;
  text-align: center;
}

audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
  vertical-align: middle;
}

blockquote {
  border-left: var(--brd-thick) solid var(--clr-act);
  font-style: italic;
  padding-left: var(--sz-m);
}

body > footer {
  text-align: center;
}

code,
pre {
  background-color: var(--clr-bkg-2);
  border-radius: var(--brd-rad);
  font-family: var(--font-code);
  padding: 0 var(--sz-2xs);
}

details[open]::details-content {
  border-left: var(--brd-thick) dashed var(--clr-act);
  padding-left: var(--sz-m);
}

details summary {
  margin-left: calc(-1 * var(--sz-xs) / 2);
  font-size: var(--sz-s);
}

details summary::marker {
  color: var(--clr-act);
}

figcaption {
  color: var(--clr-txt);
  font-size: var(--sz-m);
  font-style: italic;
  margin-top: var(--sz-2xs);
}

footer {
  font-size: var(--sz-m);
}

h1 {
  font-size: var(--sz-3xl);
  margin: var(--sz-s) 0 var(--sz-xl);
  text-align: center;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--clr-txt);
  font-weight: normal;
  line-height: 1;
  overflow-wrap: break-word;
  text-wrap: balance;
}

h2 {
  font-size: var(--sz-2xl);
  margin: var(--sz-l) 0;
}

h3 {
  font-size: var(--sz-xl);
  margin: var(--sz-l) 0;
}

h4 {
  font-size: var(--sz-l);
  margin: var(--sz-m) 0;
}

h5,
h6 {
  font-size: var(--sz-m);
}

header {
  text-align: center;
}

header::before {
  aspect-ratio: 1;
  background-image: url("/assets/avatar.jpg");
  background-size: cover;
  border-radius: 50%;
  border: var(--brd-medium) solid var(--clr-brd);
  content: "";
  display: block;
  margin: 0 auto;
  width: var(--sz-5xl);
}

header h1 {
  font-weight: lighter;
  font-size: var(--sz-4xl);
  margin: var(--sz-base) 0 0;
}

header p {
  color: var(--clr-txt);
  font-size: var(--sz-m);
  font-style: italic;
  margin: 0;
}

hr {
  border: none;
  margin: 0;
}

hr::after,
header::after,
footer::before {
  color: var(--clr-act);
  content: "✱ ✱ ✱";
  display: inline-block;
  font-family: var(--font-code);
  font-size: var(--sz-base);
  margin: var(--sz-xs) 0 var(--sz-2xl);
  text-align: center;
  width: 100%;
}

img,
picture,
svg,
video {
  height: auto;
  max-width: 100%;
}

li {
  margin-bottom: var(--sz-xs);
}

main {
  text-align: justify;
  word-wrap: break-word;
  text-wrap: pretty;
  hyphens: auto;
  -webkit-hyphens: auto;
}

ol {
  list-style: lower-roman;
}

ol,
ul {
  margin: 0;
}

p,
blockquote,
details {
  margin: var(--sz-m) 0;
}

pre {
  border-left: var(--brd-thick) solid var(--clr-act);
  display: block;
  font-family: var(--font-code);
  margin: var(--sz-xl) 0;
  overflow: auto;
  padding: var(--sz-xs);
  tab-size: 2;
}

section {
  margin: var(--sz-l) 0;
}

table {
  border-collapse: collapse;
  border-color: inherit;
  border-spacing: 0;
  text-indent: 0;
}

time {
  color: var(--clr-txt);
}

ul {
  list-style: circle;
}

ul li::marker {
  color: var(--clr-txt);
}

[hidden] {
  display: none !important;
}

/*** Responsive behaviour ***/

@media only screen and (min-resolution: 3dppx) {
  :root {
    --sz-base: 14pt;
  }

  article > p:first-of-type::first-letter {
    font-size: var(--sz-4xl);
    width: var(--sz-4xl);
  }
}

@media (forced-colors: active), (prefers-contrast: more) {
  :root {
    --clr-black: #000;
    --clr-dark-gray: #000;
    --clr-light-gray: #000;
    --clr-white: #fff;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --clr-bkg-2: var(--clr-dark-gray);
    --clr-bkg: var(--clr-black);
    --clr-brd: var(--clr-light-gray);
    --clr-txt: var(--clr-white);
  }
}