/* Basic reset */
* { box-sizing: border-box; }
:root {
    --background: ;
    --hl-background: #f5f2f0;
    --text: #444;
    --dim-text: #666;
    --highlight: #f78123;
}

/* Page container */
html { font-size: 1.4em; line-height: 1.5; color: var(--text); font-family: "Palatino Linotype", Palatino, serif; }
body { padding: 1rem; max-width: 700px; margin: 0 auto; min-height: 100vh; }
header { margin-bottom: 1rem; }
footer { margin-top: 1rem; }

/* Typography */
h1 { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin-bottom: 0; line-height: 1.2; }
code { font-size: 1.2em; word-spacing: -0.2em; }
p {
    /* leaving out because Safari doesn't do hyphens well */
    /* text-align: justify; */
    /* Firefox's & Chrome's hyphenation is too agressive for no justification,
       Safari's is too relaxed for justification enabled. */
    /* hyphens: auto; */
    /* Currently only supported on Safari. Looks nice tho. */
    hanging-punctuation: first allow-end last;
}
/* Links */
.c-sun { color: var(--highlight); }
.dec-none { text-decoration: none; }
@media (min-width: 825px) { .header-anchor { margin-left: -1rem; } }

blockquote {
    border-left: solid 10px #bbb;
    padding-left: 1rem;
    margin-left: 1rem;
    font-style: italic;
}

/* Page structure */
article.post header h2 a { color: var(--highlight); }
article.post header .info { font-size: 0.75rem; color: var(--dim-text); }
/* Links in the header don't need color */
article.post header a { color: inherit; }

img.avatar { width: 64px; }
img.avatar.square { border-radius: 8px; }

article.post header { position: relative; }
article.post header img.avatar {
    position: absolute;
    /* Optical alignment, eyeballed */
    top: 4px;
    right: calc(100% + 0.5rem);
}

/* Figures */
/* @TODO: Make this width managing simpler? */
img { max-width: 800px; border-radius: 4px; background: #f5f2f0; }
@media (max-width: 825px) { img { max-width: calc(100vw - 1rem); } }
figure { margin: 0; }
figcaption > :first-child, aside > :first-child { margin-top: 0; }
figcaption > :last-child, aside > :first-child { margin-bottom: 0; }
figcaption { font-style: italic; }
.youtube > iframe { border-radius: 4px; }

aside {
    border: 1px solid black;
    padding: 0.75rem;
    margin: -0.5rem;
    border-radius: 4px;
}
aside.warning { background: #ffecbf; }

/* Layout classes */
.dim { color: var(--dim-text); }
.row { display: flex; flex-direction: row; }
.col { display: flex; flex-direction: column; }
.hgroup { display: flex; flex-direction: row; }
@media (max-width: 500px) { .hgroup { flex-direction: column; } }
.row.hcenter { justify-content: center; }
.col.hcenter { align-items: center; }
.rigid { flex-shrink: 0; }
.baseline { align-items: baseline; }
.spacer { flex-grow: 1; }
.ls-none { list-style: none; padding: 0; margin: 0; }
.im-icon { background: none; width: 2rem; }
.fwrap { flex-wrap: wrap; }
.hov-fade:hover { filter: invert(50%); }
.wide-1, .row > .block-1 { display: inline-block; width: 1rem; }
.tall-1, .col > .block-1 { display: inline-block; height: 1rem; }

/* Barebones un-highlighted code blocks */
pre > code {
    overflow: auto;
    width: calc(100% + 8rem);
    margin: 0 -4rem;
    display: inline-block;
    max-width: 100vw;
    font-size: 18px;
    box-sizing: border-box;
    padding: 1rem;
    border-radius: 6px;
    background: var(--hl-background);
}

@media (max-width: 825px) {
   pre > code { margin: 0 -1rem; width: calc(100% + 2rem); }
}

.animated-decoration-alt { display: none; }
@media (prefers-reduced-motion: reduce) {
    img.animated-decoration-alt { display: inline; }
    .animated-decoration { display: none; }
}