body {
    display: grid;
    column-gap: 48px;
    justify-content: center;
    grid-template-columns: 1fr 650px 1fr;
    grid-template-rows: auto;
    margin: 0;
}

#article {
    grid-column: 2;

    h1:first-child {
        margin-top: 40px;
    }
}

#nav-right {
    grid-column: 3;

    div {
        position: sticky;
        top: 100px;
    }
}

ol.toc {
    list-style-type: none;
    padding: 0;
    border-left: 2px solid #696969;
    text-wrap: nowrap;

    li {
        padding: 5px 16px;
        a {
            text-decoration: none;
        }
        a:link {
            color: var(--colour-text);
        }
        a:hover,
        a:visited:hover {
            color: var(--colour-code-primary);
        }
        a:visited {
            color: var(--colour-text);
        }
    }
}

/* Tooltip text */
.tooltip .tooltiptext {
    font-size: 18px;
    font-family: monospace;
    font-style: italic;
    visibility: hidden;
    width: 100px;
    background-color: var(--colour-code-background);
    color: var(--colour-code-comment);
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
    bottom: 45px;
    left: 50%;
    margin-left: -50px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip.show .tooltiptext {
    visibility: visible;
}

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--colour-code-background) transparent transparent transparent;
}