body {
    width: 30em;
    max-width: calc(100% - 3em);
    margin: 4em auto;
    padding: 1em;
    background: #fff;
    color: #000;
    font-size: 16px;
    line-height: 150%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, Ubuntu, "Helvetica Neue", Arial, sans-serif, "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
h1 {
    line-height: 130%;
}
a { font-weight:bold; text-decoration:none; color:#000; opacity:.9; -webkit-transition:opacity 300ms; -moz-transition:opacity 300ms; -o-transition:opacity 300ms; transition:opacity 300ms; }
a:hover, a:focus { opacity:.7; }
em, blockquote, q, cite { font:italic 1.08em FreeSerif,Georgia,serif; }
#background { width:100%; position:absolute; top:0; left:0; z-index:-1; }
ul, ol { padding-left:0; }
blockquote, q { color:#222; quotes:"»""«""›""‹"; -webkit-margin-start:0; }
blockquote { padding-left:0; clear:both; margin:0 0 3em 0; }
blockquote:before { content:"»"; position:absolute; margin:-.53em 0 0 -.6em; font-size:3em; }
blockquote>p { margin-bottom:0; }
blockquote>p+p { margin-top:0; }
blockquote a, blockquote span { font:bold .8em/150% FreeSans,Helvetica,sans-serif; position:relative; float:right; clear:left; }

nav details {
    position: fixed;
    top: 1em;
    right: 1em;
    margin-left: 1em;
    padding: .5em 1em;
    border-radius: 1.5em;
    background-color: #fff;
    border: 2px solid #e7e9ed;
    z-index: 1000;
    max-height: calc(100% - 3em);
    max-width: 250px;
    overflow-y: scroll;
}

nav details summary {
    font-weight: bold;
    cursor: pointer;
}

nav details ul,
nav details ol {
    padding-left: 1em;
}

#index, #indextitle { font-weight:bold; color:#000; }
#index { top:5em; }
#index:hover, #index:focus { opacity:1; }
#index a { display:block; font-weight:normal; }
#index ol { list-style:none; }
#index li a:hover, #index li a:focus, #index li a:active, #index li.current>a { font-weight:bold; opacity:1; color:#000; }
#index ol li:hover, #index ol li:focus, #index ol li:active, #index li.current { list-style:decimal; }
#indextitle strong a { font-size:1.4em; color:#000; margin-bottom:.2em; }
#indextitle em a { font-size:1.2em; color:#000; margin-bottom:.5em; }

p strong+a { white-space:normal; }
h2 a, h3 a { color:#000; }
#stuff h1 { margin-top:3em; padding-top:1em; }
h2 { margin-top:1em; padding-top:1em; }
h3 { margin-top:0; padding-top:1em; }

#jan { background:rgb(100,41,5); margin:7em 3em; width:27em; color:#fff; }
#jan a { color:#fff; }
#jan img { opacity:.5; }
#jan h1 { position:fixed; font-family:'Miso'; font-weight:normal; font-size:100px; line-height:100%; margin:0; padding:0; }
#jan h1+em { position:fixed; margin-top:89px; }
#jan ul { font-size:.7em; position:fixed; margin-top:150px; }
#jan li { height:1.5em; }
#jan #usability { list-style:none; }
#jan #opensourcedesign { list-style-image:url(../img/opensourcedesign-icon.svg); }
#jan #unhosted { list-style-image:url(../img/unhosted.png); }
#jan #nextcloud { list-style-image:url(../img/nextcloud-icon.svg); }
#jan #libreprojects { list-style-image:url(../img/libreprojects.png); }
#jan #tosdr { list-style-image:url(../img/tosdr.png); }
#jan #africahacktrip { list-style-image:url(../img/africahacktrip.png); }
#jan #javascript { list-style-image:url(../img/js.png); }
#jan p { font-size:.5em; line-height:2em; }
#jan #contact { position:fixed; margin-top:365px; }
#jan #donate { position:fixed; bottom:1em; }
#jan #donate a, #jan #donate img { opacity:1; }
#jan #donate form { display:inline; }
#jan #donate p { margin-bottom:0; }

#stuff blockquote:first-child { font-size:40px; margin:4em 0; }
#stuff .taken { list-style:none; color:#d33; margin-left:-1.2em; }
#stuff .taken:before { content:"✘ "; }
#stuff .taken a { color:#d33; }
#stuff .taken a:hover { color:#c22; }

.external { color:#999; }