:root {
    /* The color palette. */
    --background: #FAFAFA;
    --background-light: #E1E1E1;
    --foreground: #000000;
    --foreground-light: #363537;
    --grey: #454545;

    /* The fonts. */
    --body-family: serif;
    --header-family: sans-serif;

    /* Spacing options. */
    --font-size: 20px;
    --vertical-rhythm: 24px;
    --content-width: 900px;

    --border-style: var(--foreground) solid 1px;
}

[data-theme="dark"]:root {
    --foreground: #FAFAFA;
    --foreground-light: #E1E1E1;
    --background: #000000;
    --background-light: #363537;
    --grey: #919191;
}

:root {
    font-family: var(--body-family);
    font-size: var(--font-size);
    background: var(--background);
    color: var(--foreground);
    line-height: var(--vertical-rhythm);
    margin: 0;
    padding: 0;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0 auto;
    max-width: var(--content-width);
    padding: 1rem;
}

nav {
    margin: 1rem auto;
}

article h2 {
    margin-top: 3rem;
}

article h3 {
    margin-top: 2rem;
}


/* Text formatting */
h1, h2, h3,
h4, h5, h6 {
    font-family: var(--header-family);
    line-height: 1.25;
}

a {
    color: #3AA2BF;
}

a:visited {
    color: #AC5A82;
}

dd, li, p, td {
    line-height: 1.5;
}

dd, p {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

kbd {
    border: var(--border-style);
    font-size: 0.85rem;
    font-weight: bold;
    padding: 0.25rem;
}

tr:nth-child(even) {
    background: var(--background-light);
}

pre {
    background: var(--background-light);
    border: var(--background) solid 1px;
    font-size: 1rem;
    line-height: 1.5;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 0.5rem;
    overflow: auto;
}


/* Multimedia blocks */
img, video, audio, iframe {
    display: block;
    height: auto;
    max-width: 100%;
    margin: auto;
}

table {
    border: var(--border-style);
    border-collapse: collapse;
    margin: auto;
}

thead, tbody {
    margin: 0 auto;
}

th, td {
    border: var(--border-style);
    padding: 1rem;
}

ol, ul {
    line-height: 1.5;
}

figure {
    margin: 2rem auto;
}

figure > * {
    margin: 1rem auto;
}

figcaption {
    text-align: center;
    font-size: 1rem;
}

svg {
    height: 1rem;
    width: 1rem;
    fill: currentColor;
}

blockquote {
    margin: 2rem 1rem;
}

blockquote footer {
    display: block;
    width: 100%;
}

/* Form controls */
button {
    background: unset;
    border: var(--foreground) solid 1px;
    color: var(--foreground);
    cursor: pointer;
    font-size: 1rem;
    padding: 0.5rem;
}


/* Semantic blocks */
aside {
    --vertical-rhythm-reduction: 0.2;
    color: var(--grey);
    border: 1px solid var(--grey);
    border-left: 3px solid var(--grey);
    font-size: calc(1rem * (1 - var(--vertical-rhythm-reduction)));
    line-height: calc(1rem * (1 + var(--vertical-rhythm-reduction)));
    margin: 1rem 0;
    padding: 0.5rem;
    width: 100%;
}

footer {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-flow: column wrap;
}


/* Layout styles. */
.site__title {
    display: inline-block;
    font-size: 2rem;
    margin-bottom: 1rem;
    margin-right: 0.5rem;
}

.site__links {
    display: inline-block;
}

.site__languages {
    display: inline-block;
}

.site__theme-btn {
    position: absolute;
    right: 0;
    top: 0;
}

.pagination {
    list-style: none;
    display: flex;
    justify-content: space-evenly;
    padding: 0;
    margin: 1rem;
}

.post {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
}

.post h1 {
    margin: 0 auto;
}

.post__meta > * {
    margin: 0.5rem auto;
}


/* Mobile styles */
@media (max-width: 860px) {
    html:root {
        --font-size: 18px;
    }

    .post {
        align-items: unset;
        flex-flow: column;
        margin-bottom: 1rem;
    }
}