/* GLOBAL ELEMENT STYLES */

* {
 box-sizing: border-box;
}

:link {
 color: #00F;
}
:visited {
 color: #0E388C;
}

/* LAYOUT */

html {
 font-family: sans-serif;
 background-color: rgb(235, 235, 235);
 --whatwg-green: #3A7908;
 --body-padding: 8px;
}

body {
 max-width: 900px;
 margin: 0 auto;
 padding: var(--body-padding);
}

/* HEADER */

header {
 display: flex;
 align-items: center;
}

header > hgroup {
 margin-left: 20px;
}

header > hgroup > h1 {
 margin: 0;
 font-weight: normal;
}

@media (max-width: 600px) {
 header > hgroup > h1 {
  font-size: 19px;
 }
}

header > hgroup > h2 {
 font-size: 17px;
 margin: 0;
 color: rgb(40, 40, 40);
 font-weight: normal;
 margin: 16px 0;
}

/* FOOTER */

footer {
 border-top: 1px solid black;
 text-align: center;
 font-size: 12px;
}

footer small {
  /* Semantically it's small, but the footer is already small, so don't change the font size. */
  font-size: inherit;
}

footer > * {
 font-style: normal;
 margin: 12px 0;
}