:root {
    color-scheme: light dark;

    --darkmode-bg: #1d2021;
    --darkmode-fg: #f9f5d7;
    --darkmode-fg1: #a89984;

    --lightmode-bg: #e5e5e5;
    --lightmode-fg: #000;
    --lightmode-fg1: #666;
}

body {
    max-width: 640px;
    margin: 3rem auto 5rem auto;

    background-color: light-dark(var(--lightmode-bg), var(--darkmode-bg));
    color: light-dark(var(--lightmode-fg), var(--darkmode-fg));

    font-family: "Arial", sans-serif;
    line-height: 1.5;
}

header nav {
    display: flex;
    gap: 0 1rem;
}

footer {
    margin-top: 4rem;
    text-align: center;

    color: light-dark(var(--lightmode-fg1), var(--darkmode-fg1));
}

footer > hr {
    border: 0;
    border-top: 1px solid light-dark(var(--lightmode-fg1), var(--darkmode-fg1));

    width: 33%;
}

h1 {
    font-size: 1.5rem;
}

h2, h3 {
    font-size: 1.2rem;
}

code {
    font-family: 'Go Mono';
    font-size: 0.9rem;
}

table {
    border-collapse: collapse;
    text-align: left;
    width: 100%;
}

table th {
    border: 1px solid light-dark(var(--lightmode-fg), var(--darkmode-fg));
    padding: 0.5rem;
}

table td {
    border: 1px solid light-dark(var(--lightmode-fg), var(--darkmode-fg));
    padding: 0.5rem;
}

#poem {
    padding-top: 1rem;
    text-align: center;
    font-style: italic;
}

.homeCard {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 65%;
    margin: 5rem auto 0 auto;

    aspect-ratio: 1.75;

    background-color: #fff;
    border: 1px solid #000;
    color: light-dark(var(--darkmode-fg), var(--lightmode-fg));

    text-align: center;
    font-family: 'Times New Roman';
    letter-spacing: normal;
}

.homeCard > * {
    margin: 0;
    color: #000;
}

.homeCard h2 {
    font-size: 1.5rem;
}

.homeCard p {
    font-style: italic;
}

.homeCard p:last-of-type {
    padding-bottom: 0.5rem;
}

.articlesList {
    padding-left: 0;
    list-style-type: none;
}

.articlesList span {
    padding-right: 1rem;

    color: light-dark(var(--lightmode-fg1), var(--darkmode-fg1));
}

@media screen and (width < 672px) {
    body {
        margin: 3rem 1rem 5rem 1rem;
    }    
}