h1 { font:400 36pt 'Zilla Slab', serif; color:black; margin:10px 0px 60px 0px; line-height:1.2em; letter-spacing:-1px; }
h2 { font:400 30pt 'Zilla Slab', serif; color:black; margin:10px 0px 20px 0px; }
h3 { font:500 18pt 'Zilla Slab', serif; color:black; margin:20px 0px 0px 0px; }
h4 { color:#404040; font:600 13pt 'Manrope', sans-serif; margin:20px 0px 5px 0px; line-height:1.6em; }
p { color:#404040; font:400 13pt 'Manrope', sans-serif; margin:10px 0px; line-height:1.6em; }
p.lead { font-size:14pt; margin:0px 0px 10px 0px; font-weight:200; }
p.date { margin-bottom:30px; }
pre code { font:400 11pt 'Roboto Mono',monospace; line-height:1.6em; padding:0px !important; }
li { color:#404040; font:400 13pt 'Manrope', sans-serif; margin:2px 0px; line-height:1.6em; }
ol { margin:10px 0px 10px 25px;}
a, a:visited { color:rgb(0, 53, 135); text-decoration:none; }
.sideintro a, .sideintro a:visited { color:rgb(0, 53, 135); text-decoration:none; }
a:active, a:hover { text-decoration:underline; }
ul.lead { margin:15px 0px 15px 25px; }
ul.lead li { font-size:14pt; margin:0px 0px 0px 0px; font-weight:200; }

#fig_slope, #fig_hypercard, #fig_geocities { width:auto; }
#fig_hypercard img { max-width:80%; margin:0px 10% 10px 10%; }
#fig_slope img { border:solid 4px black; max-width:70%; margin:0px 15% 10px 15%; }
.sidenote img {  width:370px; height:184px; image-rendering: pixelated; }
section.figview { height:500px !important; line-height:500px !important; }
section.figview figure { height:500px !important; line-height:500px !important; }


#frontmatter { margin:0px 0px 40px 0px; padding:0px; background:inherit; }
.title-box { background:url(fig/fill.png); box-shadow: inset -2px -2px #0a0a0a, inset 2px 2px #fff, inset -4px -4px #808080, inset 4px 4px #dfdfdf; }
.title-box h1 { color:white; margin:0px 0px 40px 0px;
  text-shadow: 0 0 3px #000, 0 0 5px #000, 0 0 8px #000, 0 0 11px #000, 0 0 13px #000, 0 0 16px #000; text-align:center;}
.title-box p, .title-box h4 { color:white; font-weight:600; text-align: center; margin:0px;
  text-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 4px #000, 0 0 5px #000, 0 0 6px #000; }

ul.icons { margin:0px 0px 0px 5px; list-style-type:none; }
ul.icons li i { width:25px; }

.title-box { width:1200px; padding:40px 100px; }
article { width:1000px; margin-left:40px; margin-top:40px; }
span.note, .sidenote { left:1100px; max-width:300px; }

@media only screen and (max-width:1450px) {
  .title-box { width:980px; padding:40px 50px; }
  article { width:750px; margin-left:40px; margin-top:40px; }
  span.note, .sidenote { left:830px; max-width:250px; }
}
@media only screen and (max-width:1160px) {
  .title-box { width:860px; padding:40px 50px; }
  article { width:650px; margin-left:20px; margin-top:20px; }
  span.note, .sidenote { left:710px; max-width:250px; }
}
@media only screen and (max-width:970px) {
  .title-box { width:calc(100% - 60px); padding:40px 30px; }
  .title-box h1 { font-size:26pt; }
  article { margin-left:10px; margin-top:10px; margin-right:10px; width:calc(100% - 20px); }
  span.note, .sidenote { display:none; }
  section.figure { width:auto; }
  .endnotes { display:block; }
}