:root {
    --bg1: #101114;
    --bg2: #44484f;
    --fg1: #e8cccc;
    --fg2: #928484;
    --accent1: #132;
    --accent2: #88a098;
    --complement1: #321;
    --complement2: #ffbf6d;
    --text: DINish, sans-serif;
    --display: "Retrofuture", monospace, monospace;
    --code: "Departure Mono", monospace, monospace;
    --page-width: 35em;
    --page-padding: 2em;

    font-synthesis: none;
}

:root {
    max-width: var(--page-width);
    font-weight: 500;
    font-size: 1.2em;
    margin: auto;
    padding-inline-start: var(--page-padding);
    background: var(--bg1);
    background-attachment: fixed;
    color: var(--fg1);
    font-family: var(--text);
    scrollbar-gutter: stable;
}

header:has(+ main),
main + footer {
    margin: 3em 0;
}

p, ul, ol, dl, blockquote, pre, figure {
  margin-block: 1rlh;
}

li::marker {
  color: var(--accent2);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--display);
    font-weight: 900;
    line-height: 1;
    margin-block-end: 0;
}

h1 {
    font-stretch: expanded;
    font-size: 3.6em;
}
h2 { font-size: 3em; }
h3 { font-size: 2.4em; }
h4 { font-size: 1.8em; }
h5, h6 { font-size: 1.5em; }

header.h-card {
    h1 {
        font-family: var(--display);
    }

    .p-name.u-uid {
        color: currentColor;
        text-decoration: none;
    }

    /* .u-photo */
    .big.face {
        display: none;
    }

    .p-note {
        font-family: var(--display);
        font-stretch: expanded;
        font-weight: 100;
        font-size: 2em;
        line-height: 1.4;
        margin-block-start: 0;
        color: var(--accent2);
    }
}

li.h-entry {
  .p-name {
    font-family: var(--display);
    font-size: 1.4em;
    text-decoration: none;
  }
  .dt-published {
    color: var(--accent2);
    white-space: nowrap;
  }
}

.author-card {
    font-family: var(--display);
    font-stretch: expanded;
}

button,
.\<button\>,
input[type="button"],
input[type="submit"],
input[type="reset"],
::file-selector-button {
    font: inherit;
    font-size: 1rem;
    font-weight: bold;
    font-stretch: expanded;
    text-decoration: none;

    display: inline-block;
    padding: 0;
    vertical-align: middle;

    border: none;
    color: var(--accent2);

    border-radius: 0;

    &:hover,
    &:focus-visible {
        text-decoration: none;
        background-color: var(--accent2);
        color: var(--bg1);
    }

    &:active {
        background-color: var(--accent2);
        color: var(--bg2);
    }
}

a,
.\<a\> {
    color: currentColor;
    text-decoration: 1px solid currentColor underline;

    &:hover,
    &:focus-visible {
        color: var(--accent2);
        text-decoration: 2px solid var(--accent2) underline;
    }
}

pre,
code,
kbd,
samp {
    font-family: var(--code);
    font-size: 1em;
}

pre {
  overflow-x: auto;
  max-width: calc(
    var(--page-width)
    + (100vw - var(--page-width)) / 2
    - var(--page-padding));
  width: max-content;
}

code,
kbd,
samp {
  &, pre:not(:has(&)) {
    font-size: .9em;
  }
}

code {
    color: var(--complement2);
    background: var(--complement1);
    pre:has(&) {
      background: var(--complement1);
    }
}

.e-content img {
    max-height: 80vh;
    background: var(--bg2);
    width: 100%;
    object-fit: contain;
}

input:is(
        :not([type]),
        [type="text"i],
        [type="text"i],
        [type="date"i],
        [type="datetime-local"i],
        [type="email"i],
        [type="month"i],
        [type="number"i],
        [type="password"i],
        [type="search"i],
        [type="tel"i],
        [type="time"i],
        [type="url"i],
        [type="week"i],

    ),
textarea,
select {
    background-color: var(--fg1);
    color: var(--bg1);
    font-weight: 600;
    border-radius: 0;
    border: none;
}

td,
th {
    border-block-end: 1px solid var(--bg2);
}

.\<small\> {
    font-weight: 300;
    font-size: 0.8em;
    color: var(--accent2);
}

.big {
    font-stretch: expanded;
    font-weight: bold;
}

.lede {
    font-family: var(--display);
    font-stretch: expanded;
    font-size: 2em;
    font-style: normal;
    color: var(--accent2);
}

.quote-attribution {
    padding-inline: 2.5em;
    text-align: end;
    font-style: italic;
}