html {
    font-family: Arial, Helvetica, sans-serif;
    font-size:15px;
    background-color: #6c9;
    color: #000;
    margin: 0; padding: 0;
}
body {
    margin: 0; padding: 0;
    background-color: #000;
    color: #fff;
    min-height: 100vh;
    min-width: 600px;
    max-width: 800px;
    background-position: top 3em right 0;
    background-repeat: no-repeat;
}
h1 {
    margin: 0; margin-left: 10%; padding: 10px; letter-spacing: 4px;
    text-shadow: 2px 2px #000;
}
h1 span, dt, h2 { color: #6c9; }
h1 a { text-decoration: none; }
h2 { letter-spacing: 2px; margin-left: 1em; }
h3 { color: #69c; }

h2, h3 { font-family: Verdana, Geneva, Tahoma, sans-serif; }

header {
    border-bottom: 2px solid #6c9;
}
main {
    padding: 7px;
}
footer {
    border-top: 2px solid #6c9;
    padding: 7px;
    text-align: center;
}

a {
    color: #fff; 
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}

img { max-width: 100%; height: auto; }
figure { margin: auto; text-align: center; max-width: 90%; }
dl { margin: 0; padding: 0; }

.left { text-align: left; }
img.left { float: left; margin-right: 7px; }
.right { text-align: right; }
img.right { float: right; margin-left: 7px; }
.center { text-align: center; }
img.center { display: block; margin: 0 auto; }
.flex { display: flex; gap: 7px; }
.flex img { align-self: flex-start; }