style.css

/* DEBUG -- add debug class to body */

body.debug svg:not(.plain) { outline: 2px dashed orange; }
body.debug p { outline: 2px dashed blue; }
body.debug section { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20px' height='30px'><rect fill='#0099cc' fill-opacity='0.1' x='0' y='0' width='100%' height='10%'/></svg>"); }

/* Diagrams */

svg { pointer-events: none; -ms-user-select:none;-moz-user-select:none;-webkit-user-select:none;user-select:none; }
text { text-anchor: middle; }
line { fill: none; stroke: black; }
.dashed { stroke-dasharray: 4,3; }
.graph-node { fill: hsl(230,75%,50%); }
.surfing-edge { fill: none; stroke: hsl(260,30%,60%); stroke-width: 2.5px; }
.hugging-edge { fill: none; stroke: hsl(200,50%,50%); stroke-width: 3.5px; }
svg.plain .surfing-edge, svg.plain .hugging-edge { stroke-width: 4px; }
.invalid-edge { stroke: hsl(0,50%,50%); stroke-width: 5.0px; stroke-linecap: round; }
.point { fill: black; stroke: white; stroke-width: 1px; }

.draggable { pointer-events: visible; cursor: move; }
.draggable:hover { filter:url(#drop-shadow); }
.draggable:hover.dragging { filter:none; }
.draggable circle:hover { fill: hsla(240,0%,100%,1.0); }
.draggable circle { fill: hsla(240,0%,100%,0.5); }
.dragging circle { fill: hsla(240,00%,100%,0.5); }

#diagram-rotation-1 .surfing-edge { stroke-width: 4px; }
#diagram-rotation-1 .surfing-edge[marker-start] { stroke: hsl(0,50%,50%); }
#arrowhead-start { fill: hsl(0,50%,50%); }
#arrowhead-end { fill: hsl(260,30%,60%); }

/* Fonts */

body, text.plain {
    font-family: Georgia, serif;
    -ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;text-size-adjust: 100%;
    -ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto;
}
text {
    font-family: "KaTeX_Math", "Times New Roman", serif;
    font-size: 1.12em;
}
header, footer, h1, h2, h3, h4, h5, h6 {
    font-family: system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -1px;
}

h1 { font-size: 2.0em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }
h4, h5, h6 { font-size: 1em; }
#forkme_banner { font-size: 0.5em; }

section .katex { font-size: 1.1em; }


/* Responsive sizes */
:root {
    --font-size: calc(10px + 1vw);
    --body-width: calc(100vw - 36px);
}
@media only screen and (min-width: 550px) {
    :root {
        --body-width: calc(33 * var(--font-size));
    }
}
@media only screen and (min-width: 1000px) {
    :root {
        --font-size: 20px;
        --body-width: 675px;
    }
}

body, text.plain {
    font-size: 16px;
    font-size: var(--font-size);
}

header, footer, section > div > * {
    width: 600px;
    max-width: 675px;
    width: var(--body-width);
}

/* Layout */

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
}
body {
    margin: 0;
    padding: 0;
    line-height: 1.5em;
}

h1, h2, h3, h4, h5, h6 { clear: both; }
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, pre, section {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    margin-top: calc(1.5 * var(--font-size));
    margin-bottom: calc(1.5 * var(--font-size));
}
p, ul, ol, dl { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

header h3 { margin-top: 0; }

header, footer, section > div > * {
    margin-left: auto;
    margin-right: auto;
}
svg, section > div > svg {
    overflow: visible;
    width: auto;
    max-width: 600px;
}
svg:not(.plain) {
    display: block;
    clear: both;
}

section > div aside {
    font-size: 75%;
    border-top: 2px solid #999;
    border-bottom: 2px solid #999;
}
@media only screen and (min-width: 1000px) {
    section > div aside {
        line-height: 1.2;
        float: left;
        width: 150px;
        margin-top: -3em;
        margin-left: calc((100vw - var(--body-width)) / 2 - 150px - 13px);
    }
}


/* Colors */

body { color: hsl(0,0%,100%); background-color: hsl(0,0%,20%); }
section { color: hsl(0,0%,20%); background-color: hsl(0,0%,95%); }
header, footer { text-shadow: 0 0 5px black; }

a { color: #fff; text-decoration: underline; }
section a { color: hsl(240,50%,50%); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

section { border-top: 1px solid white; border-bottom: 1px solid white; box-shadow: inset 0 0 10px hsla(0,0%,20%,0.2); }

/* "Fork Me on github" style from github */
#forkme_banner {
    display: block;
    position: absolute; top: 0; right: 0px;
    padding: 10px;
    color: #fff;
    background: #0090ff;
    border-bottom-left-radius: 10px;
}