body {
font-family: 'Open Sans', sans-serif;
line-height: 1.6;
max-width: 980px;
margin: auto;
background: white linear-gradient(#ccc, white 10em);
background-repeat: repeat-x;
color: black;
}

body > div {
margin: 1.2em;
}

a {
color: #07599e;
}

header {
line-height: 1;
}

header.top {
text-shadow: 0 0 1em #fff;
margin-bottom: 2em;
}

header.top * {
color: #07599e;
}

header.top figure {
float: right;
width: 25%;
max-width: 14em;
box-shadow: 0 0 1em #fff;
margin-top: 0;
margin-right: 0;
}

header.top a {
text-decoration: none;
}

header.top figure img {
width: 100%;
}

header.top h1 {
margin-bottom: 0;
}

header.top h3 {
margin-top: 0;
}

h1 { font-size: 3em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }

h1, h2, h3, h4, h5 {
font-family: 'Museo', serif;
font-weight: bold;
color: #bf5d53;
}

nav h2 {
margin-bottom: 0;
}

nav ul {
margin-top: 0.5em;
}

footer {
margin-top: 2em;
}

article header h2 {
margin-bottom: 0;
}

article header time {
color: #888;
letter-spacing: 1px;
font-size: 0.8em;
}

pre.terminal {
display: block;
background: #eee;
padding: 0.5em;
line-height: 1.6;
white-space: pre-wrap;
}

article figure.video iframe {
width: 100%;
max-width: 580px;
height: 300px;
}

article figure img {
width: 100%;
max-width: 580px;
}

footer, footer * {
color: #888;
}

/* A font by Jos Buivenga (exljbris) -> www.exljbris.com */
@font-face {
  font-family: 'Museo';
  font-weight: normal;
  font-display: swap;
  src: url('Museo500-Regular.woff') format('woff');
}

/* A font by Jos Buivenga (exljbris) -> www.exljbris.com */
@font-face {
  font-family: 'Museo';
  font-weight: bold;
  font-display: swap;
  src: url('Museo700-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-weight: normal;
  font-display: swap;
  src: url('OpenSans-Regular.woff') format('woff');
}

@media (prefers-color-scheme: dark) {
body {
background: black linear-gradient(#333, black 10em);
background-repeat: repeat-x;
color: white;
}

a {
color: #62b5f8;
}

header.top {
text-shadow: 0 0 1em #000;
}

header.top * {
color: #62b5f8;
}

header.top figure {
box-shadow: 0 0 1em #000;
}

h1, h2, h3, h4, h5 {
color: #c05f54;
}

pre.terminal {
background: #333;
}
}