:root { 
    --OtoRed: rgb(226, 0, 0);
    --Code: 'Lucida Console',monospace 92.5%;
    font-family: "Segoe UI Web (West European)", "Segoe UI", -apple-system, Roboto, "Helvetica Neue", sans-serif;
    line-height: 1.25;
    font-size: 16px;
    _text-size-adjust: 185%;     /* This applies to phones */
}

button {font-size: 87%;}

@media screen and (min-resolution: 150dpi) {
    :root { font-size: 16px; }
    button, input { font-size: inherit; }
}

@media print {
    :root { font-size: 10pt; }
    :root button, :root input { font-size: 6.5pt !important; }
}
@media screen {
    section:not(:first)    { content-visibility: auto; }
    section:nth-of-type(1) {min-height: 4000px;}
    section:nth-of-type(2) {min-height: 2700px;}
    section:nth-of-type(3) {min-height: 4000px;}
    _section:nth-of-type(4) {min-height: 12500px;}
    section:nth-of-type(5) {min-height: 2800px;}
}
.OtoRed { color: var(--OtoRed); }

.sample {
    margin: 0px auto; 
    border: solid 3px rgb(179, 212, 100);
    border-radius: .5em;
    padding: 1ex 2ex;
    background-color: rgb(220, 253, 142); 
}
.sourcecode {
    padding: 1px 3px;
    border: solid 3px rgb(180,180,180);
    border-radius: .5em;
    width: fit-content;
}
code.sourcecode {
    display: inline-block;
    margin: 2px;
}
pre, .pre {
    margin: 1ex 2vw; 
    white-space: pre-wrap;
    tab-size: 4;
}
pre.sourcecode { 
    font-size: 85%;
}
pre, code, elm, .pre {
    font: var(--Code);
    color: darkblue;
    background-color: rgb(236, 236, 236);
    font-weight: normal;
}
elm::before { content: "<"; }
elm::after  { content: ">"; }
elm.sourcecode {
    display: inline-block;
}
comm { color: green; }
comm::before { content: "<!-- "; }
comm::after  { content: " -->"; }

dt  {margin-left:1em; margin-top: .5em; font-weight: 500;}
dd  {margin-left:3em}
p, ol, ul, li  {margin: .4em 0}
h1  {font-size: 2em}
h2  {font-size: 1.5em}
h3,h4  {margin: .6em 0}
blockquote {margin: .5em 40px}

a:not([target]) {
    text-decoration: none;
    border-bottom: .05em dashed;
}

/* This is just for clients (like robots) that don't execute JavaScript.
    The RHTML removes class 'pageHead'
*/
pageHead {
    font-size: 28pt; font-weight: bold;
}
module {display: none;}

section:not(:first-of-type) > h1 {
    margin-top: 1em;
    padding-top: 1em;
    border-top: double 4px;
}

button {
    border: none;
    background-color: turquoise;
    border-radius: .333em;
    color: inherit;
}