style.css

:root {
    --background-light: blanchedalmond;
    --text-light: rgb(37, 37, 37);
    --background-dark: rgb(37, 37, 37);
    --text-dark: blanchedalmond;
    --link-color: blue;
    --link-hover-color: red;
    --button-background: rgb(37, 37, 37);
    --button-text: blanchedalmond;
    --button-hover-background: blue;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-light: rgb(37, 37, 37);
        --text-light: blanchedalmond;
        --background-dark: blanchedalmond;
        --text-dark: rgb(37, 37, 37);
        --link-color: lightblue;
        --link-hover-color: orange;
        --button-background: blanchedalmond;
        --button-text: rgb(37, 37, 37);
        --button-hover-background: lightblue;
    }
}

body {
    font-family: 'Courier New', Courier, monospace;
    font-size: 18px;
    line-height: 1.5em;
    background-color: var(--background-light);
    color: var(--text-light);
}

main {
    margin: 1em;
}

nav,
footer {
    margin: 0.5em;
    padding: 0.5em;
}

h1 {
    text-align: center;
}

img {
    display: block;
    margin: 0 auto;
}

@media screen and (max-width: 360px) {
    img {
        width: 100%;
    }
}

.center {
    text-align: center;
}

.highlight {
    color: red;
}

.highlight-search {
    background-color: yellow;
}

a:link,
a:visited {
    color: var(--link-color);
    text-decoration: none;
}

a:hover,
a:active {
    color: var(--link-hover-color);
}

.theme-a {
    background-color: var(--background-light);
    color: var(--text-light);
}

.theme-b {
    background-color: var(--background-dark);
    color: var(--text-dark);
}

input[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: var(--button-background);
    color: var(--button-text);
    border: none;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: var(--button-hover-background);
}