:root {
    --primary-dark: #1a1417;
    --primary-light: #d9cbae;
    --primary: #67413a; /* #d0b9f0? */
    --red: #af4b3b;
    --orange: #c18549;
    --green: #8db35e;
    --blue: #384d64;
    --brown: #67413a;
    --grey: #7c8381;
}

body {
    background-color: var(--primary-dark);
    color: var(--primary-light);
}

nav.nav-main {
    margin-top: 5em;
    text-align: center;
}

nav.nav-main a {
    color: inherit;
    text-decoration: inherit;
    padding: 0.25em 0.5em;
}

nav.nav-main a:hover,
nav.nav-main a:focus {
    background: var(--primary);
    text-decoration: underline;
}

.main {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-auto-rows: auto;
}

.main .articles {
    padding: 0.25em;
    margin: 0.5em;
    border: 0.1em solid var(--primary);
    border-radius: 0.5em;
    color: var(--primary-dark);
}

.main .articles article {
    padding: 0.25em;
    margin: 0.5em;
    border: 0.1em solid var(--primary);
    border-radius: 0.5em;
    background-color: var(--primary-light);
}

.main .articles article h1 {
    padding: 0.25em;
    margin: 0.5em;
}

.main .articles article p {
    padding: 0.375em;
    margin: 0.75em;
}

.main .nav-side ul {
    list-style: none;
    float: right;
    padding: 0.25em 1em;
}

.main .nav-side ul a {
    color: inherit;
    text-decoration: inherit;
    padding: 0.25em 0.5em;
}

.main .nav-side ul a:hover,
.main .nav-side ul a:focus {
    background: var(--primary);
    text-decoration: underline;
}