:root {
    --site-colour-background: hsl(0, 0%, 10%);
    --site-colour-text: hsl(180, 38%, 90%);
    --site-colour-emphasis: hsl(0, 54%, 47%);
    --site-colour-title: hsl(178, 54%, 49%);
    --site-colour-meta: hsl(305, 54%, 47%);
}

@keyframes upDown {
    to { transform: translatey(0.2rem); }
}

* {
    margin: 0rem;
    padding: 0;

    color: var(--site-colour-text);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

a {
    color: var(--site-colour-text);
}

body {
    background-color: var(--site-colour-background);

    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

footer {
    /*margin-top: auto;*/
    /*margin-left: 1rem;
    margin-bottom: 1rem;*/
}

.content {
    /*margin: 0 1rem;*/
    flex-grow: 1;
}

@media screen and (min-width: 1280px) {
    .content {
        width: 80%;
    }
}

.content__post {
    padding: 0 1rem 2rem;
}

.content__post p {
    padding: 1rem;
    text-align: justify;
}

.header-nav {
    display: flex;
    align-items: center;

    /*margin: 1rem 1rem 0;*/
    padding-bottom: 1rem;
}

.header-nav__title {
    color: var(--site-colour-title);

    padding-right: 0.5rem;
}

.header-nav__link {
    display: inline-block;
    color: var(--site-colour-emphasis);

    padding-left: 0.5rem;
}

.posts {
    padding: 0 1rem;
}

.post-summary {
    padding-bottom: 2rem;
}

.post-summary__title {
    color: var(--site-colour-emphasis);
}

.post-summary__summary {
    padding-left: 1rem;

    padding-top: 0.5rem;
}

.metadata {
    margin-left: 1rem;
}

.metadata__tags {
    color: var(--site-colour-meta);
}

.metadata__time {
    color: var(--site-colour-meta);
}

.content__header {
    padding-bottom: 2rem;
}

.content__post h2 {
    padding-bottom: 1rem;
}

.content__post p {
    padding-left: 1rem;
}

code {
    color: var(--site-colour-meta);
}

.highlight {
    padding: 2rem 1rem;
}

.highlight > pre {
    padding: 1rem 1rem;
    background-color: var(--site-colour-background) !important;

    border: 1px solid var(--site-colour-meta);
}

.list {
    padding: 0 1rem;
}

.list__summary {
    padding: 0 1rem;
}

.list__title {
    color: var(--site-colour-emphasis);
}