:root {
    --color: #F5EDF0;
    --background: #424C55;
    --accent: #886F68;
    --max-width: 800px;
}

* {
    box-sizing: border-box;
}

html, body {
    padding: 0;
    margin: 0;
    min-height: 100%;
    font-family: sans-serif;
    background-color: var(--background);
    color: var(--color);
    font-weight: 100;
}

a {
    color: var(--color);
}

a:hover {
    text-decoration: underline var(--accent) !important;
}

* {
    margin: 0;
    padding: 0;
}

header {
    padding-top: 1em;
}

header > .title {
    max-width: var(--max-width);
    margin: 0 auto;
}


header > .title > h1 {
    display: inline-block;
    font-weight: 100;
    margin-left: 1rem;
    margin-bottom: 1rem;
}

header > .title > span {
    vertical-align: bottom;
    text-align: left;
    display: inline-block;
    margin-bottom: 1rem;
}

header > nav {
    width: 100%;
    background-color: var(--color);

}

header > nav > ul {
    list-style: none;
    padding: 0;
    max-width: var(--max-width);
    margin: 0 auto;
}

header > nav > ul > li:first-child {
    margin-left: -.5em;
}

header > nav > ul > li {
    margin: 0;
    display: inline-block;
    color: var(--background);
}


header > nav > ul > li.divider + li {
    border-left: 1px solid var(--accent);
}

header > nav > ul > li > a {
    color: var(--background);
    text-decoration: none;
    display: inline-block;
    padding: .5em;
}

header > nav > ul > li:hover,
header > nav > ul > li a:hover {
    color: var(--color);
    background-color: var(--accent);
}

main {
    max-width: var(--max-width);
    margin: 0 auto;
    padding-top: 1em;
}

.meta {
    font-size: 0.9em;
    padding: 0.5em 0;
}

.post-listing {
    margin-bottom: 1em;
}

.post-listing .title a {
    text-decoration: none;
}

.meta .tag {
    border-left: 1px var(--color) solid;
    padding: 0 0.4em;
}

@media (max-width: 799px) {
    main {
        margin: 0 1rem;
    }

    header > nav > ul > li:first-child {
        margin-left: 0.5rem;
    }
}

iframe {
    width: 100%;
    height: 200px;
    border: none;
}

iframe.itch-widget {
    height: 175px;
}

.content {
    margin: 1em 0;
}

.content pre {
    margin: 1em 0;
}

.content video {
    width: 100%;
}

.tag-title {
    margin-bottom: 1rem;
    font-size: 2em;
}

main > h2, hr {
    margin-bottom: .5em;
}

.post-game {
    margin-top: 1em;
}

.post-game > h4 {
    margin-bottom: 0.5em;
}

.game-listing {
    display: flex;
    align-items: center;
    margin-bottom: 1em;
}

.game-listing > *:nth-child(2) {
    margin-left: 1em;
}

@media (min-width: 800px) {
    header > .title > h1 {
        margin-left: 0;
    }
}

p {
    margin: inherit;
}