#header {
    position: sticky;
    top: -2em;
}

#wrapper > header nav.admin {
    float: none;
}

#main {
    position: sticky;
    top: 6em;
    align-self: flex-start
}

article h1 span.hidden {
    display: none;
}

#left {
    position: relative;
    top: -5.6em;
    margin-top: -2%;

    text-align: justify;
}

#left .text {
    margin-bottom: 6em;
}
#left .text h2,
#left .text h3 {
    font-size: 2em;
    text-align: left;
}
#left .text h3 {
    font-size: 1.2em;
}
#left .text .content {
    margin-top: 1em;
}

.content {
    box-shadow: none;
    text-align: justify;
    text-justify: auto;
    word-break: keep-all;
    --x-height-multiplier: 0.375;
    --baseline-multiplier: 0.17;
    font-weight: 300;
    font-style: normal;
}

.content p + p {
    margin-top: 1em;
}

.content strong,
.summary strong {
    font-weight: bold;
}

.content > * {
    padding-top: 1em;
    clear: left;

    /* flex: 1; */

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}
.content > *:first-child {
    padding-top: 0;
}
.content > h1 + ul,
.content > h2 + ul,
.content > h3 + ul,
.content > h4 + ul,
.content > h5 + ul,
.content > h6 + ul,
.content > h1.end-colon + p,
.content > p.end-colon + ul {
    padding-top: 0;
}
.content em,
.summary em {
    font-style: italic;
}


#left .text {
    transition: opacity .4s, border-color .25s, color .25s;
    transition-delay: .2s, .15s, 0s;
}
#left.dimmed .text {
    opacity: .1;
}
#left:hover .text {
    opacity: .5;
}
#left:hover .text:hover,
#left .text.selected,
#left .text:hover  {
    opacity: 1;
    color: #111;
}
#left .text.selected {
    color: #000;
}

#main article h1 {
    margin-top: 1em;
    font-size: 1.8em;
}
#main article:first-child h1 {
    margin-top: 0;
}

ul.texts li {
    transition: opacity .4s, color .15s;
    transition-delay: .2s, 0s;

    line-height: 1;
    padding-bottom: .5em;
}
ul.texts.dimmed li {
    opacity: .3;
}
ul.texts li.selected {
    color: #000;
    opacity: 1;
}

@media screen and (max-width: 768px) {
    #header {
        position: static;
    }
    #main {
        position: static;
    }

    ul.texts {
        display: none;
    }
    #left {
        top: 0;
        margin-top: 0;
    }

/*     #left figure {
        margin-bottom: 3em;
        overflow: visible;
    }
    #left figure figcaption {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
    } */
}



article:target {
/*     animation: spot 1s; */
    background: transparent;
}

@-webkit-keyframes spot {
    from {
        background: rgba(255, 249, 77, 0.5);
    }
    to {
        background: transparent;
        display: none;
        z-index: -100;
    }
}
@-moz-keyframes spot {
    from {
        background: rgba(255, 249, 77, 0.5);
    }
    to {
        background: transparent;
        display: none;
        z-index: -100;
    }
}
@keyframes spot {
    from {
        background: rgba(255, 249, 77, 0.5);
    }
    to {
        background: transparent;
        display: none;
        z-index: -100;
    }
}