:root {
    --shaded: #3a584c;
    --solid: #0b2120;
    --light: #dbe2df;
    --max-width: 600px;
}

@font-face {
    font-family: 'Visitor TT2 BRK';
    font-style: normal;
    font-weight: normal;
    src: local('Visitor TT2 BRK'), url('/fonts/visitor2.woff') format('woff');
}
@font-face {
    font-family: 'Visitor TT1 BRK';
    font-style: normal;
    font-weight: normal;
    src: local('Visitor TT1 BRK'), url('/fonts/visitor1.woff') format('woff');
}

body {
    background: var(--light);
    color: var(--solid);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    margin: 0;
    font-size: 18px;
    line-height: 1.4;
}

header, footer {
    background: var(--solid);
    color: var(--light);
    padding: 2rem;
}

header svg .shaded {
    fill: var(--shaded);
}
header svg .solid {
    fill: var(--light);
}

footer {
    margin-top: 1.5rem;
    box-shadow: 0 50vh 0 50vh var(--solid);
}

main {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 2rem;
}

figure {
    margin: 0;
    margin-top: 1.5rem;
    width: 100%;
    background: var(--solid);
    mix-blend-mode: multiply;
}

figure img {
    display: block;
    width: 100%;
    mix-blend-mode: luminosity;
}

figure+span {
    color: var(--shaded);
    display: block;
    padding-top: 0.5em
}

@media only screen and (max-width: 600px) {
    figure {
	width: calc(100% + 4rem);
	margin-left: calc(-2rem);
	margin-right: calc(-2rem);
    }
    figure+span {
	margin-left: calc(-2rem + 0.5em);
    }
}


h1 {
    font-size: 2.5rem;
    margin: 0;
    margin-top: -0.3em;
}

.title-content h1 {
    border-bottom: 2px solid var(--solid);
}
.title-content h2 {
    color: var(--shaded);
}

.title-content {
    margin-bottom: 3em;
}

h1,h2,h3,h4,h5 {
    font-family: 'Visitor TT1 BRK', cursive;
}

article {
    margin-bottom: 2em;
}

a {
    color: inherit;
}
h1 a, h2 a {
    text-decoration: none;
}

time, a.tag {
    color: var(--shaded);
}
time {
    padding-right: 0.5em;
}

audio {
    width: 100%;
    height: 2.5em;
}