/* Mobile first */
html { background: #fff url(dot2.png) }
body { margin: 0 }
.logo { display: block; background: white; margin: 1em; padding: 0.7em 1.2em; width: max-content }
.logo img { width: auto; height: 55px }
article { background: white; margin: 1em; padding: 1em }

/* Desktop */
@media screen and (min-width: 640px) {
	html { height: 100%; overflow-y: scroll }
	body { max-width: 800px; margin: 20vh auto 1em auto; display: flex; align-items: flex-start }
	.logo { margin-right: 0; position: sticky; top: 10vh }
}

/* Typography */
html { font: 16px/24px "Ubuntu", sans-serif }
h1 { font-size: 150%; margin: 0.7rem 0 }
h2 { font-size: 110%; margin: 0.7rem 0 }
p,
ul{ margin: 0.7rem 0 }
b, strong { font-weight: 600 }
a { font-weight: 700; text-decoration: none  }
a:hover { text-decoration: underline  }
h1:first-child { margin-top: 0 }
p:first-child { margin-top: 0 }
p:last-child { margin-bottom: 0 }

/* Colors: red on blue */
body { color: #444 }
img { border: 0; vertical-align: bottom }
a, strong, h1 { color: #9d3636 }
li::marker { color: #7fb7c5; font-weight: bold; content: "→ " }