html, body {
    line-height: 1.5;
    margin: 0;
    background-color: #fff;
}

body {
    display: grid;
    grid-template-columns: 15vw 45vw 35vw;
    grid-template-rows: auto;
    column-gap: 2.5vw;
    filter: brightness(0.97);
}

#contents {
    grid-column-start: 1;
    grid-row: 1 / span 2;
    padding: 6vh 1.5vw;
    background-color: whitesmoke;
    font-size: .9rem;
}

a {
    text-underline-offset: 3px;
    cursor: pointer;
}

ol {
    padding: 0;
    margin: 0;

    li {
        list-style-type: none;

        &::marker {
            display: -webkit-inline-box;
            -webkit-box-orient: vertical;
        }

        a {
            line-clamp: 2;
            -webkit-line-clamp: 2;
            display: -webkit-inline-box;
            -webkit-box-orient: vertical;
            overflow: hidden;

            &::before {
                content: "⚹ ";
                width: fit-content;
                height: fit-content;
            }
        }
    }
}

h1 {
    grid-column-start: 2;
    grid-row: 1/1;
    height: fit-content;
    margin: 4vh 0 0 0;
}


#context {
    grid-column-start: 2;
    grid-row: 2/2;
}

.temp--link-note {
    opacity: .7;
}

#archive-thumb {
    width: 40%;
}

#arrow {
    vertical-align: sub;
}

.ref {
    color: steelblue;
}

.rabbit-gif {
    text-align: right;
    display: block;
    width: 100%;
}

button {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    width: fit-content;
    height: auto;
    cursor: pointer;

    img {
        width: 4vw;
        display: inline-block;
    }

    p {
        display: inline-block;
        margin-right: 1vw;
        font-size: .7rem;
        line-height: 1.4;
        text-decoration: underline;
        color: blue;

        &:visited {
            color: -webkit-link;
        }
    }
}

#footnotes-area {
    margin: 5vh 0;
    padding-left: 1vw;
    border-top: blue solid 1px;
}

a.note-call {
    vertical-align: super;
    font-size: .7rem;
    color: steelblue;
    text-decoration: none;
}

p.footnote {
    font-size: .8rem;
}

#extra {
    grid-column-start: 3;
    grid-row: span 3 / span 3;
    justify-self: center;
    margin-top: 4vh;

    p, li {
        font-size: smaller;
        font-family: monospace;
    }

    div {
        margin-bottom: 2vh;
    }

    #about-text {
        padding: 2px 15px;
        width: 20vw;
        background: whitesmoke;

        #metadata {
            border: 1px solid gray;
            padding: 2px 5px;
        }
    }

    #notes {
        padding: 2px 15px;
        width: 20vw;
        background: whitesmoke;

        p {
            margin-bottom: 0;
        }

        p~ul, p+ul {
            margin: 0;
        }
    }
}

#log {
    font-family: monospace;
    font-size: .7rem;
    background-color: whitesmoke;
    height: fit-content;
    border: 1px dashed gray;
    padding: 8px 10px;
    margin-top: 5vh;

    pre {
        white-space: pre-line;
        margin: 0;
    }
}