* {
    box-sizing: border-box;
}

div.highlight {
    padding: 0 1.5em 0 1.5em;
    margin: 0 2em 0 2em;
    border-style: none none none solid;
    border-width: 0 0 0 0.12rem;
    border-radius: 0;
    overflow-y:auto; 
}

.class {}

#id {}

/* inherent */
ol li {
    list-style: none;
    padding: 0.25em;
}
main.single aside.related {
    grid-area: related;
    padding: 1em;
}

/* parallel */
h2, h3, h4 {
    padding: 0.5em;
}

/* screen */
@media only screen and (max-width: 768px) {
    main.list {
        flex-direction: column;
    }
}

/* font */
@font-face {
    font-family: 'SF Mono';
    src: url('/SFMonoLigaturized-Regular.ttf') format('truetype');
    font-weight: normal;
  }
@font-face {
    font-family: 'SF Mono';
    src: url('/SFMonoLigaturized-RegularItalic.ttf') format('truetype');
    font-style: italic;
  }

/* Container */
main.list {
    display: flex;
    flex-direction: column; /* default row */
    justify-content: center;
}
/* Items */

/* Container */
main.single {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto 1fr;
    min-height: 100vh;
    grid-template-areas:
        "header header"
        "toc article"
        "related article";
}

/* Items */
main.single header {
    grid-area: header;
}
main.single aside.toc {
    grid-area: toc; 
}
main.single aside.related {
    grid-area: related;
}
main.single article {
    grid-area: article;
}