@import url("/fonts/fira-sans-condensed.css");
@import url("/fonts/pt-serif.css");
@import url("/fonts/fira-mono.css");

:root {
    --color1: #96ceb4;
    --color2: #87ceeb;
    --color3: #d3d3d3;

    --line-height: 1.375;

    --font-text: "PT Serif", serif;
    --font-text-weight: 400;
    --font-text-color: rgb(55, 65, 81);

    --font-heading: "Fira Sans Condensed", sans-serif;
    --font-heading-color: rgb(17, 24, 39);

    --font-heading-h1-weight: 800;
    --font-heading-h2-weight: 700;
    --font-heading-h3-weight: 600;
    --font-heading-h4-weight: 600;
    --font-heading-h5-weight: 600;
    --font-heading-h6-weight: 600;

    --font-heading-h1-size: 2.25rem;
    --font-heading-h2-size: 1.5rem;
    --font-heading-h3-size: 1.25rem;
    --font-heading-h4-size: 1rem;
    --font-heading-h5-size: 1rem;
    --font-heading-h6-size: 1rem;

    --font-mono: "Fira Mono", monospace;
    --font-mono-weight: 400;

    --margin-width: 20rem;
    --column-width: 32rem;

    --footnote-size: 0.8333rem;
}

html {
    font-size: 18px;
}

body {
    font-family: var(--font-text);
    font-weight: var(--font-text-weight);
    color: var(--font-text-color);

    line-height: var(--line-height);
}

pre, code {
    font-family: var(--font-mono);
    font-weight: var(--font-mono-weight);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--font-heading-color);
    margin: calc(var(--line-height) * 1em) 0 calc(var(--line-height) * 0.5em) 0;
    a {
        text-decoration: none;
        color: inherit;
    }
}
h1 { font-weight: var(--font-heading-h1-weight); font-size: var(--font-heading-h1-size); }
h2 { font-weight: var(--font-heading-h2-weight); font-size: var(--font-heading-h2-size); }
h3 { font-weight: var(--font-heading-h3-weight); font-size: var(--font-heading-h3-size); }
h4 { font-weight: var(--font-heading-h4-weight); font-size: var(--font-heading-h4-size); }
h5 { font-weight: var(--font-heading-h5-weight); font-size: var(--font-heading-h5-size); }
h6 { font-weight: var(--font-heading-h6-weight); font-size: var(--font-heading-h6-size); }
h1:first-child {
    margin-top: calc(var(--line-height) * 0.25em);
}

p, table, figure, li>ul, li>ol {
    margin: 0 0 1.25em 0;
}

figure {
    figcaption {
        font-size: var(--footnote-size);
    }
}

ul, ol {
    padding: 0 0 0 2rem;
}

body {
    display: grid;
    grid-template-areas:
        "header"
        "main"
        "footer";
    grid-template-columns: 100%;
    grid-template-rows: auto 1fr auto;
    width: 100vw;
    height: 100vh;

    > header {
        grid-area: header;
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "logo heading"
            "logo nav";
        gap: 0 1rem;

        background-color: var(--color2);
        padding: 1rem;
        a {
            text-decoration: none;
            color: var(--font-heading-color);
        }

        > div {
            grid-area: logo;
            img {
                max-height: calc(var(--line-height) * var(--font-heading-h1-size));
            }
        }

        > h1 {
            grid-area: heading;
            font-size: var(--font-heading-h3-size);
            font-weight: var(--font-heading-h3-weight);
            margin: 0;
            a { color: white; -webkit-text-stroke: black 0.333px; }
        }

        > nav {
            grid-area: nav;
            ul {
                margin: 0;
                list-style-type: none;
                padding: 0;
                display: flex;
                gap: 0.5rem;
                font-size: var(--footnote-size);
            }
        }
    }

    > main {
        grid-area: main;
        margin: 0 1rem;

        div.footnotes {
            border-top: solid var(--font-text-color) 1px;
            font-size: var(--footnote-size);
            > ol {
                padding: 0 0 0 1rem;
            }
        }

        p.footnote-size {
            font-size: var(--footnote-size);
        }

        object, embed, video {
            max-width: 100%;
        }
    }

    > footer {
        grid-area: footer;
        font-size: var(--footnote-size);
        background-color: var(--color1);
        padding: 1rem;
        a {
            text-decoration: none;
            color: var(--font-heading-color);
        }
    }
}

img {
    max-width: 100%;
    height: auto;
}

blockquote {
    background: #f9f9f9;
    border-left: 0.5rem solid #ccc;
    margin: 1rem 0;
    padding: 0.5rem;
    > *:last-child { margin-bottom: 0; }
}

table {
    tr:first-child th {
        border-bottom: solid black 1px;
    }
    tr:nth-child(n + 2) {
        td, th {
            padding-top: 0.2rem;
        }
    }
    td, th {
        text-align: left;
        vertical-align: top;
        &:nth-child(n + 2) {
            padding-left: 1rem;
        }
    }
}

@media screen and (min-width: 768px) {
    body {
        > header {
            grid-template-columns: auto auto 1fr;
            grid-template-areas:
                "logo heading nav";
            align-items: center;
            > h1 {
                font-size: var(--font-heading-h1-size);
                font-weight: var(--font-heading-h3-weight);
            }
            > nav {
                justify-self: end;
                ul {
                    font-size: inherit;
                }
            }
        }
        > main {
            > .image_align_margin {
                margin-left: 0;
                float: left;
                max-width: calc(var(--margin-width) - 1rem);
            }
            > .image_align_rightmargin {
                float: right;
                position: relative;
                max-width: var(--margin-width);
                width: var(--margin-width);
                left: calc(min(0px, 0px - (100vw - var(--column-width) - 2 * var(--margin-width) - 2rem)));
                margin-left: 1rem;
            }

            > * {
                margin-left: var(--margin-width);
            }

            > p, > ul, > ol, > div.blog_comment, > div#slideshowcontainer {
                max-width: var(--column-width);
            }
            > blockquote {
                max-width: calc(var(--column-width) - 1rem);
            }

            div.footnotes {
                max-width: var(--column-width);
            }
        }
    }
}

body.lshift_archive.entry {
    .right {
        float: right;
        margin-left: 1rem;
    }
}

body.tweet {
    > main {
        header {
            margin-top: 0.5rem;
            margin-bottom: 1rem;
            a { color: inherit; }
            color: #888;
            font-size: 90%;
        }

        main {
            font-family: var(--font-heading);
            color: var(--font-heading-color);
            font-size: var(--font-heading-h3-size);
            white-space: pre-wrap;
            max-width: 100%;
            width: var(--column-width);

            img, video {
                display: block;
                margin: 1rem 0;
                height: auto;
            }
        }

        footer {
            margin-top: 1rem;
            font-size: 90%;
            display: flex;
            gap: 1rem;
            a { color: inherit; }
            color: #888;
        }
    }
}

body.twitter-archive {
    #tweets {
        max-width: var(--column-width);

        > section {
            margin: 3rem 0;
            > div.content {
                font-family: var(--font-heading);
                color: var(--font-heading-color);
                font-size: var(--font-heading-h3-size);
                white-space: pre-wrap;

                img, video {
                    display: block;
                    margin: 1rem 0;
                    max-width: 100%;
                    width: var(--column-width);
                    height: auto;
                }
            }
            > div.meta {
                margin: 0.333rem 0;
                font-size: 90%;
                display: flex;
                gap: 1rem;
                a { color: inherit; }
                color: #888;
            }
        }
    }
}