html, body {
    font-family: sans-serif;
    line-height: 1.5;
    margin: 0;
    padding: 0;
}
* {
    box-sizing: border-box;
}
h1 {
    margin-bottom: 0;
}
h2, p {
    margin: 0.25em 0;
}
div#app {
    display: grid;
    height: 100vh;
}
header {
    height: auto;
    padding: 0.5em;
}
header a:link, header a:visited {
    color: darkblue;
}
.skip-links, .skip-links li {
    margin: 0;
    padding: 0;
    position: absolute;
    white-space: nowrap;
}
.skip-links a {
    background-color: #fff;
    display: block;
    opacity: 0;
}
.skip-links a:focus {
    opacity: 1;
}
main {
    background-color: #000;
    color: #fff;
    display: grid;
    grid-row: 2 / 25;
    grid-template-columns: 250px 2fr;
}
main a:link, main a:visited {
    color: white;
}
nav {
    background-color: #333;
    padding: 0.5em;
    width: 250px;
}
section {
    display: none;
    padding: 0.5em;
}
section.active {
    display: block;
    grid-column: 2/10;
}
section button {
    background-color: #fff;
    color: #000;
    border: none;
    font-weight: bold;
    padding: 0.5em;
    margin: -0.5em 0 0 -0.5em;
}
section button:before {
    content: 'X';
    display: block;
    font-weight: bold;
    font-size: 1.5em;
}
section button:focus {
    background-color: hotpink;
}

.mobile nav,
.mobile nav ul {
    width:100%;
}
.mobile main  {
    display: block;
}
a.routingSkipLink {
    margin-left: 0.25em;
    opacity: 0;
    text-decoration: none;
}
a.routingSkipLink:focus {
    opacity: 1;
}
a.routingSkipLink:before {
    content: '\1f517';
}
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
  }