.index {
    margin-top: var(--global-spacing);
    background-color: var(--container-colour);
    border: 1px solid var(--container-border);
}

.index h1 {
    font-size: 2em;
    --header-colour: var(--accent-colour1);
}

.index h2 {
    font-size: 1.5em;
    --header-colour: var(--accent-colour2);
    margin-top: 1em;
}

.index h1,
.index h2 {
    line-height: 1.4em;
}

.index h1 span,
.index h2 span {
    display: inline-block;
    background-color: var(--header-colour);
    padding: 0 .5rem 0 1rem;
}

.index p {
    margin: .5rem 1rem;
}

.index p code {
    font-family: var(--font-monospace);
    font-size: .8em;
}

.index p a {
    color: inherit;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-color: var(--accent-colour3);
}
.index p a:visited {
    text-decoration-color: var(--accent-colour2);
}
.index p a:hover,
.index p a:focus {
    text-decoration-style: solid;
}
.index p a:active {
    text-decoration-style: dotted;
}