:root {
    --accent: #dedede;
    --muted: #444;
    --spacing: 12px;
    --xspacing: 12px;
    --desktop: 768px;
    --yspacing: 8px;
    --hfontfam: "Playfair Display", serif;
    --fontfam: "Noto Sans", sans-serif;
    --primary: #000;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: var(--fontfam);
}

h1,
h2,
h3 {
    font-family: var(--hfontfam);
}
h1 {
    font-size: 24px;
}
h2 {
    font-size: 18px;
}

.spacer {
    flex: 1;
}

p {
    margin: var(--yspacing) 0;
}

ul {
    list-style-position: inside;
    padding: 8px 0;
}

.page {
    max-width: 100%;
    margin: 0 auto;
    padding: var(--xspacing);
}

header {
    width: 100%;
    nav {
        margin: 0 auto;
        padding: var(--yspacing) 0;
        ul {
            display: flex;
            list-style-type: none;
            gap: 10px;
            li {
                a {
                    text-decoration: none;
                    color: black;
                }
            }
        }
    }
}

.spaced {
    margin: var(--yspacing) 0;
}
.standout {
    margin: calc(4 * var(--yspacing)) 0;
}

section.new {
    h1 {
        font-size: 24px;
        font-family: var(--hfontfam);
    }
}

@media screen and (min-width: 960px) {
    .page {
        max-width: var(--desktop);
    }
}

.link {
    color: black;
    display: contents;
    text-decoration: none;
}

.latest-blog {
    border: 1px dashed var(--accent);
    padding: var(--spacing);
    h1 {
        font-size: 24px;
        margin-bottom: var(--yspacing);
        font-family: var(--hfontfam);
    }
    h2 {
        font-size: 18px;
        margin-bottom: var(--yspacing);
        font-family: var(--hfontfam);
    }
    p {
        font-size: 16px;
        margin-bottom: var(--yspacing);
    }
    footer {
        color: var(--muted);
        gap: var(--xspacing);
        display: flex;
    }
}

.products {
    display: flex;
    gap: 14px;
    align-items: center;
}

section.tils {
    ul {
        list-style-position: inside;
    }
}

.til {
    max-width: 768px;
}

.subscribe {
    text-align: center;
    margin: calc(6 * var(--yspacing)) 0 calc(2 * var(--yspacing));
    span {
        display: block;
        font-size: 12px;
        color: var(--muted);
        margin-bottom: 6px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    nav {
        display: flex;
        justify-content: center;
        gap: 12px;
        a {
            font-size: 13px;
            color: var(--muted);
            text-decoration: none;
            &:hover {
                color: var(--primary);
            }
        }
    }
}

.md {
    img {
        max-width: 100%;
        height: auto;
        margin-inline: auto;
        display: block;
    }

    pre {
        padding: 8px;
        tab-size: 2;
    }

    code {
        font-family: monospace;
        color: royalblue;
    }

    pre code {
        font-family: monospace;
        padding: 4px;
        color: #333;
        text-wrap: wrap;
    }

    pre:has(code) {
        border: 1px solid #f1f1f1;
        margin: var(--yspacing) 0;
    }

    p {
        margin-block: calc(var(--yspacing) * 2);
    }

    /* TABLE */
    /* Credit to: https://piccalil.li/blog/styling-tables-the-modern-css-way/ <3 */
    table {
        border-collapse: collapse;
        width: 100%;
        table-layout: fixed;
    }

    th,
    caption {
        text-align: start;
    }

    caption {
        margin-block: 0.75rem;
    }

    thead th:not(:first-child),
    td {
        text-align: end;
    }

    thead {
        border-block-end: 2px solid;
        background: whitesmoke;
    }

    tfoot {
        border-block: 2px solid;
        background: whitesmoke;
    }

    th,
    td {
        border: 1px solid lightgrey;
        padding: 0.25rem 0.75rem;
        vertical-align: baseline;
    }

    th:first-child {
        position: sticky;
        inset-inline-start: 0;
        border-inline-end: none;
    }

    tbody th {
        background: white;
    }

    thead th,
    tfoot th {
        background: whitesmoke;
    }

    thead th {
        vertical-align: bottom;
    }

    td:first-of-type,
    :where(thead, tfoot) th:nth-child(2) {
        border-inline-start: none;
    }

    th:first-of-type {
        width: 10rem;
    }

    th:first-child::after {
        content: "";
        position: absolute;
        inset-block-start: 0;
        inset-inline-end: 0;
        width: 1px;
        height: 100%;
        background: lightgrey;
    }

    /* For the shadow: https://adrianroselli.com/2020/01/fixed-table-headers.html */
    div[tabindex="0"][aria-labelledby][role="region"] {
        background:
            linear-gradient(to right, transparent 30%, rgba(255, 255, 255, 0)),
            linear-gradient(to right, rgba(255, 255, 255, 0), white 70%) 0 100%,
            radial-gradient(
                farthest-side at 0% 50%,
                rgba(0, 0, 0, 0.2),
                rgba(0, 0, 0, 0)
            ),
            radial-gradient(
                    farthest-side at 100% 50%,
                    rgba(0, 0, 0, 0.2),
                    rgba(0, 0, 0, 0)
                )
                0 100%;
        background-repeat: no-repeat;
        background-color: #fff;
        background-size:
            4em 100%,
            4em 100%,
            1.4em 100%,
            1.4em 100%;
        background-position:
            0 0,
            100%,
            0 0,
            100%;
        background-attachment: local, local, scroll, scroll;
    }
    /* /TABLE */
}