:root {
    --accent: #286c93;
    --surface: #ebebeb;
    --surface-variant: #dedede;
    --text: #3c3c3c;
    --text-strong: #2c2c2c;
    --text-weak: #7c7c7c;
    --border-radius: 10px;
}

* {
    box-sizing: border-box;
    scroll-margin-top: 2em;
}

body {
    background-color: var(--surface);
    color: var(--text);
    font-family: 'Droid Sans Mono', 'monospace', monospace;
    margin: 0;
}

nav {
    position: absolute;
    padding: 1em;
    z-index: 1;

    a {
        font-size: 1.2em;
        color: var(--text);
        text-decoration: none;
    }
}

#cover {
    position: relative;

    height: 100vh;
    width: 100%;
    padding: 20em 10em;

    h1 {
        font-size: 4em;
        font-weight: normal;
        margin-bottom: 0;
    }
    
    img {
        position: absolute;
        bottom: 0;
        right: 0;

        max-width: 20em;

        /* reflect horizontally */
        transform: scaleX(-1);
    }
}

@media (max-width: 768px) {
    #cover {
        padding: 10em 2em;

        h1 {
            font-size: 2em;
        }

        img {
            max-width: 15em;
        }
    }
}

#posts {
    max-width: 47em;
    padding: 15em 2em;
    margin-left: auto;
    margin-right: auto;
    
    display: flex;
    flex-direction: column;
    gap: 10em;

    article {
        display: flex;
        flex-direction: column;
        gap: 1em;

        button {
            align-self: flex-start;
            height: 3em;
            width: 3em;

            display: flex;
            align-items: center;
            justify-content: center;

            background-color: transparent;
            border: none;
            color: var(--text-weak);

            cursor: pointer;

            i {
                font-size: 1.5em;
            }
        }

        img {
            max-width: 100%;
            border-radius: var(--border-radius);

            &.ratio-16-9 {
                width: 100%;
                aspect-ratio: 16/9;
                object-fit: cover;
            }

            &.outline {
                border: 1px solid var(--text-weak);
            }
        }

        .metadata {
            padding: 1em;
            background-color: var(--surface-variant);
            border-radius: var(--border-radius);

            display: flex;
            justify-content: space-between;
        }

        .post, .caption {
            background-color: var(--surface-variant);
            border-radius: var(--border-radius);

            h1 {
                font-size: 1.2em;
                font-weight: normal;
                color: var(--accent);
            }

            p {
                text-align: justify;
                line-height: 1.4em;
            }

            @media (max-width: 768px) {
                p {
                    text-align: left;
                }
            }

            a {
                color: var(--accent);
                text-decoration: none;
            }
        }

        .post {
            padding: 1em;
        }

        .caption {
            padding: 0 1em;
        }

        pre {
            padding-left: 4em;
            overflow-y: scroll;
        }
    }
}