body, html {
    background: #eee;
    display:  grid;
	font-family: serif;
    grid-template-rows: 4.1rem 1fr 1.6rem;
	margin: 0;
    min-height: 100vh;
}
header, footer { 
    background-color: #111;
    color: #eee;
	display: grid;
	margin: 0;
    padding: .3rem;
}
header {
    background-image: url('/images/house.svg');
    background-position: .2rem 1rem;
    background-repeat: no-repeat;
    padding-left: 40px;
    grid-template-columns: 370px 1fr;
}
main {
    background-color: #eee;
	border-bottom: 1px solid #eee;
	border-top: 1px solid #eee;
    color: #111;
    line-height: 1.45;
	overflow: scroll; 
}

/* ------------- header matter ----------------- */
header h1 {
	font-size: 2rem;
	margin: 0.4rem;
}
		
/* ------------- main frontmatter -------------- */
main.frontpage {
    align-items: center;
	background-color: #111;
	color: #eee;
	display: flex;
    flex-direction: column;
    justify-content: center;
}
main.frontpage h2 code {
    font-size: 1.8rem;
}
/* quotes on front page */
.q {
    font-size: 1.3rem;
    font-style: oblique;
    line-height: 1.4rem;
    margin: 0 auto;
}
.a {
    font-size: .9rem;
    font-style: normal;
    margin-top: .5rem;
}
main#fraction, mfrac {
    color: white;
    font-family: 'Computer Modern', hack, Courier, monospace;
    font-size: 3rem;
}

/* ------------- main othermatter -------------- */
main.otherpage {
	margin: 0 auto;
	max-width: 46rem;
	padding: 0 1rem;
}

/* ------------- main programpage -------------- */
main.programpage {
    display: grid;
	grid-template-columns: 1fr 4fr;
}
main.programpage aside {
	background-color: silver;
    overflow: scroll;
}
main.programpage section {
	margin: 0;
    overflow: scroll;
	padding: 0 auto 0 5rem;
}
main.programpage section article {
	max-width: 50rem;
}

/* general */

h1 { font-size: 2.6rem; font-weight: 900; }
h2 { font-size: 2.0rem;}
h3 { font-size: 1.6rem;}
h4 { font-size: 1.2rem;}
h5 { font-size: 1.1rem;}
h6 { font-size: 1.0rem;}

h2, h3, h4, h5 {
	padding: .5rem .5rem 0 .5rem;
}
h2, h4, h6 { 
	font-family: sans-serif;
	font-style: italic;
	font-weight: 600; 
}

h1, h3, h5 { 
	font-family: serif;
	font-weight: 600; 
}
h6 {
	padding-left: .5rem;
}

a {
	color: blue;
	text-decoration: underline;
	cursor: auto;
}
blockquote {
	display: block;
	font-style: italic;
	margin: 1rem 3rem;
}
button {
    border: .3rem outset silver;
    border-radius: .2rem;
    padding: .2rem;
}
button:active {
    border: .3rem inset silver;
}
code {
    font-family: monospace;
}
p code {
	font-size: 1rem;
	font-weight: 900;
}
div, dl, p {
    margin: 0rem;
    padding: .5rem;
}
dl, dt, dd {
	display: block;
}
dd {
	margin-left: 3rem;
}
dl {
	padding: .5rem;
}
dt {
	font-weight: bold;
}

em { 
	font-style: italic;
}
hr {
	display: block;
	margin: .5rem 20rem;
	border: 1px inset gray;
}
img { 
	border: 2px solid gray;
}
input {
    border: .1rem solid black;
    padding: .3rem;
}
li {
	display: list-item;
}
ol, ul {
 	display: block;
	list-style-type: decimal;
	margin: 1em 0;
	padding-left: 40px;
}
pre code {
	font-size: .8rem;
}
strong {
	font-weight: bold;
}
sup {
	vertical-align: super;
	font-size: smaller;
}
ul {
	list-style-type: disc;
}

/* ------------- header nav -------------------- */
header nav ul {
    list-style: none;
    text-align: right;
}
header nav ul li {
    display: inline;
    font-size: 1.1rem;
    margin: 0;
}
header nav ul li:not(:last-child):after {
  content: ' | ';
  color: magenta;
}
header nav a {
    color: inherit;
    font-style: normal;
    font-variant: small-caps;
    text-decoration: none;
}
header nav ul a:hover {
    text-decoration: underline;
}

/* ------------- aside nav -------------------- */
aside nav ul li {
    margin-left: -1em;
}
aside nav ul li.ind {
	margin-left: 0;
}

/* ------------- charset --------------*/
#symbollib {
    display: none;
}
.svg0 {
    fill: white;
    margin: 0;
    padding: 0;
    height: 100px;
    width: 100px;
}

/* about */
.about {
    display: flex;
    flex-flow: row wrap;
    line-height: 1.2rem;
    width:  50%;
}
.about dt {
    flex-basis: 20%;
    padding: 10px;
    text-align: right;
    color: #fff;
}
.about dd {
    flex-basis: 70%;
    flex-grow: 1;
    margin: 0;
    padding: 10px;
}
.about dd a {
    color:  yellow;
}

/* ----------------- footer -------------- */
footer {
    align-items: center;
    grid-template-columns: 1fr 2fr 1fr;
}
#some {
    text-align: right;
}
footer a {
    color: #ccc;
}