main {
    padding: 0 20px 0 10px;

    & div, 
    & article {
        margin-bottom: 30px;
        padding: 10px;

        outline: 5px solid;
        box-shadow: 10px 10px 0 5px;
    }
}


/* ---TEXT--- */
h1 {
    margin-top: -5px;
}

h2 {
    padding: 0 5px;
}

em,
mark  {
    padding: 0 2px;
}

hr {
    height: 5px;
    border: 0;
}
/* ---------- */


article > p:has(time) {
    text-indent: 0;

    padding: 0 5px;
}


blockquote {
    max-width: 400px;
    margin: 5px 0;
    padding: 15px;

    & p {
        &::before {
            content: "\201C";
        }

        &::after {
            content: "\201D";
        }
    }

    & + p {
        max-width: 430px;
        margin: -5px 0 0 0;

        text-align: right;

        &::before {
            content: "—";
        }
    }
}


header {
    padding: 10px 30px 0 20px;

    & nav {
        min-width: 175px;
        & a {
            & div {
                height: 50px;
            }

            & > div {
                text-indent: -9999px;
                float: right;

                & > div {
                    mask-position: 5px 5px;
                    mask-repeat: no-repeat;
                }
            }

            & .site-home {
                width: 263px;

                & .home-image {
                    mask-image: url("/assets/scales.svg");
                }

                @media (max-width: 500px) {
                    width: 127px;
                }
            }

            & .dark-mode {
                width: 48px;

                & .dark-image {
                    mask-image: url("/assets/moon.svg");
                }
            }

            &:hover > div {
                margin-top: -5px;
                padding-bottom: 5px;
            }
        }
    }
}


footer {
    max-width: 650px;
    box-shadow: 0 50vmax 0 50vmax;
    padding: 5px 10px 10px 10px;

    & * {
        font-variant-emoji: text;
    }
}