body {
    max-width: 40em;
    margin: auto;
    padding: 16px;
}

span.news {
    background-color: #fff080;
}

div.news {
    margin: -4px;
    background-color: #fff080;
}

div.news p {
    padding: 4px;
}

p {
    text-align: justify;
}

p.info {
    font-style: italic;
    color: #404040;
    padding-bottom: 16px;
}

p.hint {
    text-align: left;
    font-style: italic;
    color: #808080;
    margin-top: 3ex;
}

.hint a {
    color: #808080;
}

h1, h2, h3, h4, h5, .form, dt {
    font-family: sans-serif;
}

h1 {
    text-align: center;
    background: #e0e0e0;
    margin-bottom: 8px;
}

h5 {
    font-size: 1em;
    font-weight: 500;
    font-style: italic;
}

hr {
    border: none;
    border-top: solid 1px black;
    margin: 2ex 0ex;
}

.flush {
    
    clear: left;
}

.menu {
    display: grid;
    grid-template-columns: auto auto;
    list-style: none;
    padding: 0px;
    gap: 8px;
    margin-top: 0px;
    font-size: .8em;
}

.menu li {
    display: inline-block;
    background: #e0e0e0;
    text-align: center;
}
.menu li.active {
    border: solid 1px black;
}
.menu li a {
    color: #202020;
    font-style: italic;
}

.todo {
    background-color: #c00000;
    font-style: italic;
}

/* Custom counter for references */
ol.ref {
    list-style: none;
    counter-reset: my-counter;
    padding-left: 0px;
}
ol.ref > li {
    counter-increment: my-counter;
}
ol.ref > li::before {
    content: "[" counter(my-counter) "] ";
}