:root{
    --title-font: "Averia Serif Libre", serif;
    --body-font:  "Gabarito";
    
    --colourA: rgb(50, 54, 70);
    --colourB: rgb(192, 62, 45);
    --colourC: rgb(224, 211, 197);
}

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

html {
    height: 100%;
    margin: 0 0;
}

body {
    height: 100%;
    max-width: 80rem;
    margin: 0 auto;
    background-color: var(--colourA);
    padding: 0 0;
    font-family: var(--body-font);
    font-size: 1.5rem;
    color: var(--colourC);
}

.wrapper {
    display: flex;
    flex-direction: column;
    margin: 2rem;
}

header {
    font-family: var(--title-font);
    font-weight: 1000;
    color: var(--colourB);
    text-align: center;
    font-size: 4rem;
}

nav {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

a,
a:visited {
    padding: 0rem 1rem;
    color: var(--colourC);
}

article.post {
    border: 2px solid var(--colourC);
    margin: 1rem 0rem;
    padding: 1rem 1rem;
}

article.post h2{
    margin: 0rem 0rem;
    padding: 0rem 0rem;
}

footer {
    font-family: var(--title-font);
    color: var(--colourB);
    text-align: center;
    padding: 1rem 0rem;
}

.date{
    font-size: 1rem;
}