:root {
    /* Gruvbox dark */
    --bg: #282828;
    --fg: #ebdbb2;

    /* Gruvbox dark colors  */
    --red: #cc241d;
    --green: #98971a;
    --yellow: #d79921;
    --blue: #458588;
    --purple: #b16286;
    --aqua: #689d6a;
    --orange: #d65d0e;

    /* Basic colors */
    --dark-grey: #a9a9a9;
}


@media (prefers-color-scheme: light) {
    :root {
        --bg: #fff;
        --fg: #000;

        /* Gruvbox light colors */
        --red: #cc241d;
        --green: #98971a;
        --yellow: #d79921;
        --blue: #458588;
        --purple: #b16286;
        --aqua: #689d6a;
        --orange: #d65d0e;
    }
}

body {
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
    font-family: "JetBrains Mono", monospace;
    padding: 1rem;
    background: var(--bg);
    color: var(--fg);
}

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.2rem;
    font-weight: bold;
}

p {
    text-align: justify;
}

a {
    color: var(--aqua);
    transition:
        color 0.2s,
        text-decoration 0.5s;
    text-decoration: inherit;
}

a:hover {
    color: var(--aqua);
    text-decoration: underline var(--aqua);
}

ul {
    color: inherit;
}

li {
    color: inherit;
}

header {
    padding-top: 3rem;
    padding-bottom: 1rem;
}

main {
}

footer {
    margin-top: 2rem;
    padding-top: 4rem;
}

.blog-section,
.project-section {
    margin-top: 4rem;
}

.project-grid {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}

.blog-list {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
}

.blog-link {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

hr.solid {
    margin-left: 2rem;
    margin-right: 2rem;
    margin-bottom: 2rem;
    border-top: 2px;
}

.copyright {
    font-size: 0.8rem;
    color: var(--dark-grey);
    text-align: center;
}

.date-banner {
    color: var(--dark-grey);
}