body	{
	font: normal 17px Atkinson Hyperlegible Next, Helvetica, Arial, sans-serif; line-height:1.2em;
	color:#222;
	background-color:#999;
	width:470px;
	margin-left:150px;
        margin-top:50px;
	padding-bottom:100px;
	padding-right:50px;
	hyphens: auto;
 
}

a:link { text-decoration:underline; border-width: 0px; color:#000; padding:0px; font-size:0.91em; }
a:visited  { text-decoration: underline; border-width: 0px; color:#000; border-style:solid;  padding:0px; font-size:0.91em;}
a:hover	 { text-decoration:none; color:#fff;  padding:0px; }
a:active  { text-decoration:none; border-width: 0px;  padding:0px; color:black; background-color:#fff;	 }

a.nav {
    font: normal 11px Atkinson Hyperlegible Next, Helvetica, Arial, sans-serif; line-height:1.1em; color:#ebe;
    color:#ebe; letter-spacing:0.12em;
    margin-bottom:5px;
}

<!--
use the construction
``` marginal
Sample text here...
```
For selecting the style below.
Plan is to make this useful for specifying marginals
-->

code.language-marginal {
    font: normal 15px Atkinson Hyperlegible Next, Helvetica, Arial, sans-serif; line-height:1.1em; color:#ebe;
}

li { margin-bottom:0.2em; }
ul { list-style-type:square; }
li::marker { color:#eee; }

p {
    margin-top:1.0em;
}
h1 {
    font: normal 1.5em Atkinson Hyperlegible Next, Helvetica, Arial, sans-serif;
    color:#fff;
    line-height:0.95em;
    margin-bottom: 2em;
}
h2 {
    font: normal 1.2em Atkinson Hyperlegible Next, Helvetica, Arial, sans-serif;
    font-weight:normal;
    color:#222;
    margin-top: 1.5em;
}
h3 {
    font: italic 1.0em Atkinson Hyperlegible Next, Helvetica, Arial, sans-serif;
    color:#fff;
    margin-top: 1.5em;
}
strong {
    color:#ddd;
    font-weight: normal;
}

.emph {
    letter-spacing:0.17em;
}



input {
    display:none;
}

img {
    max-width: 100%;
    height: auto;
}


/* latin-ext */
@font-face {
    font-family: 'Atkinson Hyperlegible Next';
    font-style: italic;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/Atkinson-Hyperlegible-Next/Atkinson-Hyperlegible-Next_latin-ext_200 800_italic.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Atkinson Hyperlegible Next';
    font-style: italic;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/Atkinson-Hyperlegible-Next/Atkinson-Hyperlegible-Next_latin_200 800_italic.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Atkinson Hyperlegible Next';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/Atkinson-Hyperlegible-Next/Atkinson-Hyperlegible-Next_latin-ext_200 800_normal.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Atkinson Hyperlegible Next';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/Atkinson-Hyperlegible-Next/Atkinson-Hyperlegible-Next_latin_200 800_normal.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}