:root {
  --text-color: #111;
  --background-color: white;
}

body {
    width: 100%;
    color: var(--text-color);
    margin: 0;
    background-color: var(--background-color);
    font-family: "Roboto", "Fira Sans", sans-serif;
}
header {
    width: 100%;
    margin: 0;
    padding: 10px;
    background-color: black;
    color: #eee;
}
header h1 { margin-top: 0; text-align: center; }
article {
    width: 800px;
    margin: 10px auto;
    padding: 10px;
    border-radius: 10px;
}
article.ili { background-color: rgba(128,128,128,.1); }
article footer {
    margin: 10px;
    text-align: right;
}

blockquote {
    margin: 10px 0;
    padding: 10px;
    border-left: 4px solid #888;
    background-color: rgba(128,128,128,.1)
}

dl {
    display: grid;
    grid-template-columns: max-content auto;
}
dt { grid-column-start: 1; }
dd { grid-column-start: 2; }

.ili-type, dd { font-weight: bold; }
a { color: rgb(90, 170, 255); text-decoration: none; }
a:hover { text-decoration: underline; }
a:active { color: rgb(120, 200, 255); }


@media screen and (max-width: 799px) {
    article {
        width: 400px;
    }
}

@media (prefers-color-scheme: dark) {
    body {
        --text-color: #eee;
        --background-color: black;
    }
}