:root {
    color-scheme: light dark;
    /* https://encycolorpedia.com/<hex> */
    --eggshell: #fffbef;
    --green: #059033;
    --babyblue: #89CFF0;
    --neongreen: #0F0;
    --leafgreen: #0B0;
    --dullgreen: #370;
}

html {
    /*background-image: url('./clouds.jpg');*/
    background-color: light-dark(white, black);
    height: 100%;
    width: 100%;
}

body {
    width: auto;
    max-width: 80ch;
    margin: 1em auto;
    padding: 1em;
    font-family: ui-monospace, 'Source Code Pro', Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, 'DejaVu Sans Mono', monospace;
    font-size: 1.0em;
    line-height: 1.2;
    background-color: light-dark(var(--eggshell), black);
    color: light-dark(black, white) !important;
    border: none;
    box-shadow: 0px 10px 30px gray;
    min-height: 90%;
    height: auto;
}

main {
    margin-top: 1em;
}

a {
    text-decoration: none;
    color: light-dark(var(--leafgreen), var(--neongreen));
}

a:visited {
    color: light-dark(var(--dullgreen), var(--leafgreen));
}

a:hover {
    text-decoration: underline;
}

.secret {
    color: light-dark(var(--eggshell), black);
    text-decoration: none;
}

h1 {
    font-size: 1.75em;
    line-height: 1.4em;
}

h2 {
    font-size: 1.4em;
}

ul {
    padding-left: 25px;
}

pre {
    margin-left: 1em;
    background-color: #eee;
}

blockquote {
    background-color: light-dark(antiquewhite, #333);
}

code {
    background-color: #ddd;
}

header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

header nav ul li {
    display: inline;
    margin: 0 8px 0 0;
    padding: 0;
}

footer {
    margin-top: 1em;
}

textarea {
    min-width: 90%;
    min-height: 10em;
}

/* Blog post content */
.post h1:first-child { /* the title */
    margin-bottom: 0;
}
.post > p.meta { /* pub_date */
    margin-top: 0.5em;
}
.post p, .post h1, .post h2 {
    margin-bottom: 1em;
}
.post img {
    max-width: 100%;
}
figcaption {
    margin-top: -1.6em;
    margin-bottom: 1em;
    font-style: italic;
    font-size: 0.8em;
}

/* Game page */
.game-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-bottom: 1em;
}
.row-item {
    flex-basis: 70%;
}
.row-item-img {
    flex-basis: 30%;
    display: flex;
    position: relative;
    margin-right: 1em;
}
.row-item-img > img {
    border-radius: 10%;
}
.row-item-img > img:hover {
    box-shadow: 3px 3px var(--green);
}

/* Home page list */
.page-list {
    display: flex;
    list-style: none;
    flex-direction: column;
    padding-left: 0;
}

@media only screen and (max-width: 600px) {
    .game-row {
        flex-direction: column;
    }
    body {
        padding: 0.25em;
        margin: 0 auto;
    }
}