@font-face {
  font-family: Comic Mono;
  font-weight: normal;
  src: url(/.ComicMono.ttf);
}
@font-face {
  font-family: Comic Mono;
  font-weight: bold;
  src: url(/.ComicMono-Bold.ttf);
}
* { font-family: "Comic Mono"; }
html { background:cornsilk; }
body {
    color:royalblue;
    line-height: 1.5em;
    height: 100vh;
   /* dotgrid https://stackoverflow.com/questions/58391201/how-to-create-a-dotted-grid-graph-sheet-background-using-css */
   --d: 0.1em;
   background : radial-gradient(
     circle at
        var(--d)
        var(--d),
     lightgray calc(var(--d) - 1px),
     cornsilk var(--d)
   )
   1em 1em / 3em 3em;
}

a:link { color: steelblue ; }
a:active { color: midnightblue; }
a:visited { color: mediumslateblue; }
a:hover { color: darkorange; }
b { color:darkorange; }
h1, h2, h3, h4, h5, h6, hr { color:midnightblue; }
h1:first-of-type {
    text-align: center;
    flex: 2;
}
pre, code {
    color:darkslategray;
    background-color: lavender;
    border-radius: 0.5em;
    padding-left: 0.2em;
    padding-right: 0.2em;
}
.page-content { margin: 1em 1em; }
.icon {
    width: 2ch;
    height: 2ch;
}
.title {
    text-align: center;
    flex: 2;
}
button {
    color: steelblue;
    background-color: thistle;
    border: 2px solid #D0B8D0; /* thistle but darker */
    border-radius: 5px;
    box-shadow: 0 0.25em 10px rgba(0 0 0 / 0.5);
}
button:hover { box-shadow: 0 0.2em 5px rgba(0 0 0 / 0.5); }
button:active{ box-shadow: 0 0.1em 2px rgba(0 0 0 / 0.5); }
/* https://stackoverflow.com/questions/3742975/subscript-and-superscript-for-the-same-element */
sup, sub {
    font-size: .75em;
    line-height: 1.0;
}
.supsub {
    display: inline-block;
}
.supsub sup, .supsub sub {
    position: relative;
    display: block;
}
.supsub sub {
    top: .3em;
}
.overline {
    text-decoration: overline;
}