/* Regular (400) & SemiBold (600) via Variable Font */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: block; /* Prevents FOUT / text swap flicker */
  src: url('../fonts/source-serif-4-regular.woff2') format('woff2');
}

/* Italic (400) */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: block;
  src: url('../fonts/source-serif-4-italic.woff2') format('woff2');
}

body {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 18px;
    line-height: 1.6;
    color: #212121;
}

header, footer {
}

header {
    margin-bottom: 3em;
}

header .title {
    border-top: 4px solid;
    border-bottom: 2px solid;
    margin-bottom: 1em;
    padding: 1em 0;
}

header .title a {
    font-size: 2.4em;
    border: none;
}

header .title a span {
    color: #aaa;
}

footer p.links {
    display: flex;
    justify-content: start;
    gap: 1em;
}

footer {
    padding: 1em 0;
    margin-top: 4em;
    border-top: solid 2px #333;
}

main {
    min-height: 52vh;
}

svg.arrow-back {
    width: 22px;
}

.container {
    /* min-height: 70vh; */
    max-width: 800px;
    margin: 0 auto;
    padding: 0 0.48em;
}

::selection {
    background: #cdcdcd55;
}

.mt-2 {
    margin-top: 2em;
}

.flex {
    display: flex;
}

.flex.flex-wrap {
    flex-wrap: wrap;
}

.flex.items-center {
    align-items: center;
}

.flex.justify-between {
    justify-content: space-between;
}

.gap-2 {
    gap: 6px;
}

/* Links */
a {
    color: #212121;
}

a.decoration-none {
    text-decoration: none;
}

a:hover { }

p {
    font-weight: 400;
    margin: 0 0 1em 0;
}

ul {
    padding-left: 0;
}

ul li {
    list-style: none;
    list-style-position: inside;
    margin-left: 0;
    margin-bottom: 0.2em;
}

ul li code {
    font-size: 0.9em;
    margin-right: 1em;
}

ul li time {
    min-width: 124px;
    font-family: monospace;
    font-size: 0.9em;
}

ul li:before {
    content: "•";
    margin-right: 0.75em;
    margin-left: 0;
    padding-left: 0;
}

h1, h2, h3, h4, h5, .font-serif {
    font-weight: 400;
    margin: 1rem 0 0.625rem;
    padding: 0;
    line-height: 1.2;
}

h1 { font-size: 3.6rem; font-weight: 600; }
h2 { font-size: 2.488rem }
h3 { font-size: 2.074rem }
h4 { font-size: 1.728rem }
h5 { font-size: 1.44rem }
h6 { font-size: 1.2rem }

h1 {
    margin-bottom: .25em;
}

h2 {
    margin-bottom: .25em;
}

article pre {
    background: #f4f4f4;
    font-size: 0.9em;
    padding: 0.5em 1em;
    border-radius: 0.25em;
}

article p code,
article li code {
    font-size: 0.8em;
}

@media (width < 562px) {

    header .title a {
        font-size: 2em;
    }

    ul.post-list li {
        line-height: 1.2em;
        margin-bottom: 1em;
    }

    ul.post-list li time {
        width: 100%;
    }

    ul.post-list li:before {
        content: "";
        margin: 0;
    }

}