html, body {
    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
    margin:0;
    padding:0;
    box-sizing: border-box;
    border-collapse:collapse;
}
body {
    display:flex;
    flex-direction:column;
}

main {
    align-self:center;
    max-width: 90ch;
    flex: 1;
}

header {
	display: flex;
	align-items: center;
	flex-direction: column;
	border-bottom: 1px solid black;
    padding-bottom:8px;
}

header a {
    margin: 4px 8px;
    white-space:nowrap;
}

main ul {
    
    list-style-type:none;
    padding-left:8px;
    padding-right:8px;
    max-width:100%;
    margin:0;
}
main ul > li {
    padding: 0 4px;
    border: 1px solid black;
}

main ul > li ul{
    list-style-type: disc;
    padding-left:24px;
}

main ul > li ul li{
    border:none;
}

main ul > li > a:first-child {
    padding:8px;
    font-size:1.2em;
    display:inline-block;
}

main ul > li ul > li > {
    padding:0;
    font-size:1.0em;
    display:inline-block;
}

summary > h2 {
    margin:0;
    padding:0;
    display:inline-block;
}



footer {
	display: flex;
	align-items: center;
	flex-direction: column;
	border-bottom: 1px solid black;
    padding-bottom:8px;

    background: lightgray;
}
footer > nav {
    max-width:90ch;
}

footer ul {
    list-style-type: none;
}

details > summary {
    padding: 8px;
    border: 1px solid black;
    margin: 8px 0;
    cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
    padding: 8px;
}

p {
    padding: 0 8px;
}

main img {
    max-width:100%;
    border:1px solid black;
}

blockquote {
    background: lightgray;
    padding: 8px;
    line-height: 2em;
    text-indent: 1.5em each-line hanging;
}