/*@import url('index/variables.css');*/
/*@import url('index/structure.css');*/
/*@import url('index/style.css');*/
/*@import url('index/generic.css');*/
/*@import url("https://unpkg.com/7.css");*/
@import url('index/pandoc.css');

@font-face {
    font-family: "Dancing Script";
    src: url("/Dancing Script.ttf");
}

@font-face {
    font-family: "CMU";
    src: url("/CMU.ttf");
}

html {
    min-height: 100%;
}

body {
    background-image: linear-gradient(
            to bottom,
            rgba(119, 119, 119, 1) 0px,
            rgba(97, 97, 97, 1) 100px,
            rgba(35, 35, 35, 1) 500px,
            rgba(32, 32, 32, 1) 510px,
                /*rgba(0, 0, 0, 1) 600px,*/ rgba(19, 19, 19, 1) 100%
    );
    margin: 0;
    width: 100%;
    font-family: sans-serif;

    & > * {
        margin: 16px;
    }
}

#site-header {
    & > h1 {
        font-size: xxx-large;
        color: #f4f4f4;
        text-shadow: black 4px 4px 4px;
        font-family: "Dancing Script";
        user-select: none;
        padding: 0;
        margin: 0;
    }
    text-decoration: none;
}

#page-header {
    justify-content: center;
    color: #f4f4f4;
    text-align: center;

    & > h1 {
        margin: 0;
        text-shadow: black 4px 4px 4px;
        font-size: xx-large;
    }
}

article {
    background: #f4f4f4;
    border: 1px solid black;
    border-radius: 5px;
    width: 50vw;
    padding: 16px 32px;

    & * {
        text-align: justify;
    }

    & code {
        font-family: "Fantasque Sans Mono", "Consolas", monospace;
    }

    & code:not(.sourceCode) {
        background-color: #f1f5fb;
        border-radius: 3px;
    }

    & pre.sourceCode {
        background-color: #f1f5fb;
        border: 1px solid #ccd9ea;
        border-radius: 3px;
        padding: 5px 7px;
    }

    & figure {
        text-align: center;

        & > figcaption {
            text-align: center;
        }

        & > img {
            border-radius: 3px;
            border: 1px solid black;
            max-width: 100%;
        }
    }

    & table {
        border: 1px solid black;
        border-collapse: collapse;

        & > thead {
            background-image: linear-gradient(
                    to bottom,
                    #ffffff 0%,
                    #ffffff 48%,
                    #f7f8fa 52%,
                    #f4f5f7 100%
            );
        }

        & td {
            border: 1px solid black;
        }

        & > tbody {
            & > :nth-child(even) {
                background-color: #fcfcfc;
            }
        }
    }

    math {
        font-family: "CMU";

        &[display="block"] {
            font-size: 1.2em;
        }
    }
}

#content {
    display: flex;
    gap: 0;

    & > * {
        flex-basis: 0;
    }

    & > #metadata {
        flex-grow: 1;
        padding-left: 8px;
        padding-right: 8px;

        & h1 {
            color: #f4f4f4;
            text-shadow: black 4px 4px 4px;
            padding: 5px 7px;
            margin: 0;
            user-select: none;
        }

        & ul {
            padding-left: 0;
            margin: 0;
        }

        & li {
            list-style: none;
            border: 1px solid transparent;
            padding-left: 5px;
            border-radius: 4px;
            margin-top: 4px;

            &:hover {
                background: linear-gradient(
                        to bottom,
                        #8d8f947f 0%,
                        #4c515a7f 48%,
                        #3b3c3c7f 52%,
                        #787a7f7f 100%
                );
                border: 1px solid black;
            }

            & > a, & > time {
                padding: 5px 7px;
                text-decoration: none;
                color: #f4f4f4;
                display: inline-block;
                width: 100%;
                height: 100%;

                & > a {
                    color: #f4f4f4;
                }
            }
        }

        & > #guest-book {
            & > iframe {
                border-radius: 3px;
                border: 1px solid transparent;
                padding-left: 5px;
                margin-top: 4px;

                width: 100%;
                height: 600px;

                overflow: hidden;
            }
        }
    }

    & math[display="block"] {
        text-align: center;
    }

    & > article {
        flex-grow: 4;
    }
}

footer {
    text-align: center;

    & * {
        color: #f4f4f4;
    }
}

* {
    box-sizing: border-box;
}