:root {
    --foreground-color: hsl(355, 26%, 21%);
    --background-color: hsl(27, 45%, 91%);
    --decorative-color: hsl(20, 43%, 84%);
}
body {
    font-family: 'Alegreya', serif;
    color: var(--foreground-color);
    background-color: var(--background-color);
    background-size: 20vw;
    background-image: url('/static/confetti-doodles.svg');
}

a {
    color: var(--foreground-color);
    text-decoration-style: wavy;
    text-decoration-color: var(--decorative-color);
    text-underline-offset: 0.25rem;
    transition: text-decoration-color 0.3s;
    &:hover {
        text-decoration-color: var(--foreground-color);
    }
}

.container {
    --width: 500px;
    max-width: var(--width);
    margin: 5rem auto;
    @media screen and (max-width: 787px) {
        padding: 1rem;
    }
}

.container.wider { --width: 600px }

.page {
    font-size: 1.25rem;
    line-height: 2;
    @media screen and (min-width: 786px) {
        border: 1px solid var(--decorative-color);
        padding: 2rem;
        background-color: var(--background-color);
    }
}

.prose {
    h1, h2, h3 {
        font-weight: 800;
        margin: 1rem 0;
    }

    h1 {
        font-size: 2rem;
        margin-top: 0;
        margin-bottom: 1.5rem;
    }

    ul {
        list-style: square;
        padding-inline-start: 1.5rem;
        margin: 1rem 0
    }

    em { font-style: italic; }
    strong { font-weight: 800; }

    hr {
        border: 2px dashed var(--decorative-color);
        margin: 1rem 0;
    }

    img {
        max-width: 100%
    }
}

.prose-container {
    font-size: 1.25rem;
    line-height: 2;
    max-width: 500px;
    margin: 2rem auto;
    &.small {
        font-size: 1.15rem;
        color: hsl(from var(--foreground-color) h calc(s - 10) calc(l + 30));
    }
}

.header {
    @media screen and (min-width: 786px) {
        display: flex;
        align-items: center;
        gap: 3rem;
    }

    .header-image {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        filter: sepia(50%);
        transition: filter 0.3s
    }

    .header-image:hover {
        filter: sepia(0)
    }

    .header-text {
        display: flex;
        flex-direction: column;
        line-height: 2;

        .header-title {
            font-weight: 800;
            font-size: 2rem;
            a { 
                text-decoration: none;
            }
        }

        .header-desc {
            font-size: 1.25rem;
        }
    }
}

.badge {
    padding: 0.35rem 0.5rem;
    background-color: hsl(from var(--decorative-color) h s calc(l + 3));
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    line-height: 1;
    text-decoration: none;
    font-size: 95%;
    margin: 0 0.25rem;
    transition: background 0.3;
    img {
        display: inline-block;
        width: 1rem;
        height: 1rem;
    }
    span {
        display: inline-block;
    }
    &:hover {
        background-color: var(--decorative-color);
    }
}

.linkbox {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;

    text-decoration: none;
    border: 1px dashed hsl(from var(--foreground-color) h 15% 76%);

    &:hover {
        border-style: solid;
    }

    h4 {
        font-weight: 800;
        font-size: 1.1rem;
    }

    p {
        font-size: 1rem;
    }

    img {
        filter: sepia(50%);
        width: 60px;
        height: 60px;
    }
}

.linkline {
    --gap: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    li:not(:last-child):after {
        margin-left: var(--gap);
        content: "·"
    }
}