styles.css

body {
    line-height: 1.5;
    background: rgb(17%,17%,17%);
    color: #eeeeee;
    font-family: Arial, Helvetica, sans-serif;
}

a {
    color: #f9cb9c;
}

.max-width {
    max-width: 600px;
    margin: auto;
}

#header, #footer {
    background-color: rgb(35%,35%,35%);
    padding: 0.5em;
    border-radius: 0.5em;
}
#footer {
    margin-top: 2em;
    font-size: 0.8em;
}

#title {margin: 0;}

h2 {
    font-size: 1.7em;
    margin-top: 1.5em;
    line-height: 1.2;
}
h2 a {
    text-decoration: none;
    color: #ffffff;
}
h2 a:hover {text-decoration: underline;}

.center {text-align: center;}
.bold {
    font-weight: bold;
    font-variant: italic;
    font-size: 110%;
}
.italic {font-style: italic}
.mono {
    font-family: 'Courier New', Courier, monospace;
    white-space: nowrap;
}

.part1, .part2, .part3 {
    display: inline-block;
    border-radius: 0.3em;
}
.part1 {
    background-color: #491c75;
    color: #d9d2e9;
}
.part3 {
    background-color: #274e13;
    color: #d9ead3;
}
.part2 {
    background-color: #1c4587;
    color: #c9daf8;
}

.partlist .part1,.partlist .part2,.partlist .part3 {
    padding: 0.4em;
    font-weight: normal;
}
.partlist {
    padding-left: 0.5em;
}

p {margin: 0.5em 0 0.5em 0;}

ul {padding-left: 1em;}
li {padding-bottom: 0.5em;}
p.solutions {margin-bottom: 0;}
ul.solutions {margin-top: 0.5em;}

img {
    border: 2px solid #4e4e4e;
}

.flag {
    border: none;
    object-fit: cover;
    height: 1em;
    width: 1.5em;
}

#contents li {
    list-style: none;
    text-indent: -1em;
    padding-bottom: 0.2em;
    padding-left: 1em;
}

input {
    background-color: rgb(10%,10%,10%);
    color: #eeeeee;
}