@font-face {
    font-family: "Comic Relief web";
    src: url('../fonts/woff2/comicrelief.woff2') format('woff2'),
        url('../fonts/woff/comicrelief.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: fallback;
}

@font-face {
    font-family: "Frank Ruhl Libre web";
    src: url('../fonts/woff2/frankruhllibre-regular.woff2') format('woff2'),
        url('../fonts/woff/frankruhllibre-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: fallback;
}

@font-face {
    font-family: "Frank Ruhl Libre web";
    src: url('../fonts/woff2/frankruhllibre-medium.woff2') format('woff2'),
        url('../fonts/woff/frankruhllibre-medium.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: fallback;
}

@font-face {
    font-family: "NWC2MusikDingsSerif web";
    src: url('../fonts/woff2/nwc2musikdingsserif.woff2') format('woff2'),
        url('../fonts/woff/nwc2musikdingsserif.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: fallback;
}

@font-face {
    font-family: "Source Code Pro Narrow web";
    src: url('../fonts/woff2/sourcecodepro-narrow.woff2') format('woff2'),
        url('../fonts/woff/sourcecodepro-narrow.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: fallback;
}

@font-face {
    font-family: "Source Code Pro Narrow web";
    src: url('../fonts/woff2/sourcecodepro-narrow-semibold.woff2') format('woff2'),
        url('../fonts/woff/sourcecodepro-narrow-semibold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: fallback;
}

@font-face {
    font-family: "Source Sans Pro web";
    src: url('../fonts/woff2/sourcesanspro-regular-full.woff2') format('woff2'),
        url('../fonts/woff/sourcesanspro-regular-full.woff') format('woff');
    font-style: normal;
    font-weight: normal;
    font-display: fallback;
}

@font-face {
    font-family: "Source Sans Pro web";
    src: url('../fonts/woff2/sourcesanspro-it.woff2') format('woff2'),
        url('../fonts/woff/sourcesanspro-it.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: fallback;
}

@font-face {
    font-family: "Source Sans Pro web";
    src: url('../fonts/woff2/sourcesanspro-semibold.woff2') format('woff2'),
        url('../fonts/woff/sourcesanspro-semibold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: fallback;
}

@font-face {
    font-family: "Source Sans Pro web";
    src: url('../fonts/woff2/sourcesanspro-semiboldit.woff2') format('woff2'),
        url('../fonts/woff/sourcesanspro-semiboldit.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: fallback;
}

@font-face {
    font-family: "Source Serif Pro web";
    src: url('../fonts/woff2/sourceserifpro-regular.woff2') format('woff2'),
        url('../fonts/woff/sourceserifpro-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: fallback;
}

@font-face {
    font-family: "Source Serif Pro web";
    src: url('../fonts/woff2/sourceserifpro-it.woff2') format('woff2'),
        url('../fonts/woff/sourceserifpro-it.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: fallback;
}

@font-face {
    font-family: "Source Serif Pro web";
    src: url('../fonts/woff2/sourceserifpro-semibold.woff2') format('woff2'),
        url('../fonts/woff/sourceserifpro-semibold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: fallback;
}

@font-face {
    font-family: "Source Serif Pro web";
    src: url('../fonts/woff2/sourceserifpro-semiboldit.woff2') format('woff2'),
        url('../fonts/woff/sourceserifpro-semiboldit.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: fallback;
}

@font-face {
    font-family: "Source Serif Pro Uncial web";
    src: url('../fonts/woff2/sourceserifpro-uncial.woff2') format('woff2'),
        url('../fonts/woff/sourceserifpro-uncial.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: fallback;
}

@media not all and (min-width: 800px) {
    body > header {
        height: calc(5.8em + 8px);
    }
    body > div {
        top: calc(5.8em + 9px);
    }
    body > header > nav li:first-child {
        width: calc(27.9% + 35px);
        margin-bottom: 14px;
    }
    body > header > nav li:nth-child(2) {
        width: calc(22.4% - 32px);
    }
    body > header > nav li:nth-child(3) {
        width: calc(22.4% - 31px);
    }
    body > header > nav li:nth-child(4) {
        width: calc(26.7% + 21px);
    }
    body > header > nav li:nth-child(5) {
        width: calc(26.4% + 16px);
    }
    body > header > nav li:nth-child(6) {
        width: calc(23.5% - 18px);
    }
    body > header > nav li:nth-child(7) {
        width: calc(26.8% + 21px);
    }
    body > header > nav li:nth-child(8) {
        width: calc(22.9% - 26px);
    }
}

@media (min-width: 800px) {
    body > header {
        height: calc(4.7em - 6px);
    }
    body > div {
        top: calc(4.7em - 5px);
    }
    body > header > nav li:nth-child(1) {
        width: calc(15.3% + 34px);
    }

    body > header > nav li:nth-child(2) {
        width: calc(9.8% - 33px);
    }

    body > header > nav li:nth-child(3) {
        width: calc(9.8% - 33px);
    }

    body > header > nav li:nth-child(4) {
        width: calc(14.1% + 19px);
    }

    body > header > nav li:nth-child(5) {
        width: calc(14.0% + 18px);
    }
    body > header > nav li:nth-child(6) {
        width: calc(11.1% - 17px);
    }

    body > header > nav li:nth-child(7) {
        width: calc(14.3% + 23px);
    }

    body > header > nav li:nth-child(8) {
        width: calc(10.5% - 25px);
    }
}

@media (max-width: 320px) {
    body {
        font-size: 14px;
        overflow-x: hidden;
    }
    main {
        width: 312px;
    }
    .squeeze19 {
        font-size: 19px;
    }
    .squeeze18 {
        font-size: 18px;
    }
    .squeeze17 {
        font-size: 17px;
    }
    .squeeze16 {
        font-size: 16px;
    }
    .squeeze15 {
        font-size: 15px;
    }
    small, .small, body > header nav, figcaption, #slideShowInstructions, [data-hover]:hover::before,
        [data-hover-line-1]:hover::before, [data-hover]:active::before, [data-hover-line-1]:active::before {
        font-size: 12px;
    }
    input[type="text"], input[type="checkbox"], textarea {
        font-size: 16px;
    }
}

@media (min-width: 320px) and (max-width: 960px) {
    body {
        font-size: calc(0.9375vw + 11px); /* 14 up to 20 */
    }
    main {
        width: calc(75vw + 72px);
    }
    .squeeze19 {
        font-size: calc(1.40625vw + 14.5px); /* 19 up to 28 */
    }
    .squeeze18 {
        font-size: calc(1.5625vw + 13px); /* 18 up to 28 */
    }
    .squeeze17 {
        font-size: calc(1.71875vw + 11.5px); /* 17 up to 28 */
    }
    .squeeze16 {
        font-size: calc(1.875vw + 10px); /* 16 up to 28 */
    }
    .squeeze15 {
        font-size: calc(2.03125vw + 8.5px); /* 15 up to 28 */
    }
    small, .small, body > header nav, figcaption, #slideShowInstructions, [data-hover]:hover::before,
        [data-hover-line-1]:hover::before, [data-hover]:active::before, [data-hover-line-1]:active::before {
        font-size: calc(0.78125vw + 9.5px); /* 12 up to 17 */
    }
    input[type="text"], input[type="checkbox"], textarea {
        font-size: calc(0.625vw + 14px); /* 16 up to 20 */
    }
}

@media (min-width: 960px) {
    body {
        font-size: 20px;
    }
    main {
        width: 792px;
    }
    small, .small, body > header nav, figcaption, #slideShowInstructions, [data-hover]:hover::before,
        [data-hover-line-1]:hover::before, [data-hover]:active::before, [data-hover-line-1]:active::before {
        font-size: 17px;
    }
    input[type="text"], input[type="checkbox"], textarea {
        font-size: 20px;
    }
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-width: 320px;
    overflow-y: hidden;
    padding: 0;
}

body > header {
    background-color: #dff;
    font-family: "Source Sans Pro web", sans-serif;
    line-height: 1.3;
    overflow: hidden;
    border-bottom: 1px solid #000;
}

body > header > div {
    height: 2.9em;
    margin: calc((1em - 8px) / 3) calc((2em - 16px) / 3) 0;
    overflow: hidden;
}

body > header > div > div > div { /* page title */
    font-size: 140%;
    font-weight: bold;
    white-space: nowrap;
}

body > header > div > div > nav { /* breadcrumbs */
    margin: 0;
    white-space: nowrap;
}

body > header > div > div:first-child {
    display: inline-block;
}

body > header > div > div:nth-child(2) {
    background-image: url(
        "data:image/svg+xml,\
        %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-176 0 352 495'%3E\
        %3Ctitle%3EHTML5 Logo%3C/title%3E\
        %3Cpath d='M-143,0 h22 v22 h22 v-22 h22 v66 h-22 v-22 h-22 v22 h-22 z' /%3E\
        %3Cpath d='M-66,0 h66 v22 h-22 v44 h-22 v-44 h-22 z' /%3E\
        %3Cpath d='M11,0 h23 L49.5,21.7 65,0 h23 v66 h-22 v-33 L49.5,56.1 33,33 v33 h-22 z' /%3E\
        %3Cpath d='M99,0 h22 v44 h33 v22 h-55 z' /%3E\
        %3Cpath fill='%23E44D26' d='M-176,99 h352 l-32,352 L0,490.6 -144,451 z' /%3E\
        %3Cpath fill='%23F16529' d='M0,132 v328.9 L116,429 143,132 z' /%3E\
        %3Cpath fill='%23EBEBEB' d='M-108,176 l12,132 h96 v-44 h-57 l-4,-44 h61 v-44 z' /%3E\
        %3Cpath fill='%23EBEBEB' d='M-94,330 l6,66 88,24.2 v-44 L-48,363 l-3,-33 z' /%3E\
        %3Cpath fill='%23fff' d='M0,176 v44 h104 l4,-44 z' /%3E\
        %3Cpath fill='%23fff' d='M0,264 v44 h53 l-5,55 -48,13.2 v44 L88,396 100,264 z' /%3E\
        %3C/svg%3E"
    );
    background-size: 100% 100%;
    background-repeat: no-repeat;
    float: right;
    height: 2.25em; /* 45/20 */
    margin: 0.2em 0 0 0.4em; /* 4/20, 8/20 */
    width: 1.6em; /* 32/20 */
}

body > header ul {
    display: inline;
    padding: 0;
}

body > header li {
    display: inline;
}

body > header > nav { /* main menu */
    text-align: justify;
    margin: 0 calc((2em - 16px) / 3);
}

body > header > nav li {
    display: inline-block;
    text-align: center;
}

#current-category {
    background-color: #aff;
}

body > header > div li::before {
    content: "\203a  ";
}

body > header > div li:first-child::before {
    content: "";
}

body > div {
    background-color: #fff;
    bottom: 0;
    font-family: "Source Serif Pro web", serif;
    left: 0;
    overflow-x: hidden;
    position: fixed;
    right: 0;
}

main {
    margin: 0 auto;
}

main > footer {
    margin: 1.6em 0 0.5em 0;
}

main > footer > small {
    border-top: 1px solid;
    padding-top: 0.2em;
}

main h1 {
    font-size: 140%;
    margin: 0.7143em 0;
}

h2 {
    font-size: 125%;
    margin: 0.8em 0;
}

h3 {
    font-size: 110%;
    margin: 0.9091em 0;
}

p, blockquote, li {
    text-align: justify;
}

main li, main li p {
    margin: 0.5em 0;
}

main nav ul li, main nav ul li p, ul.links li {
    margin: 10px 0;
}

code, .code {
    font-family: "Source Code Pro Narrow web", monospace;
}

p code, li code {
    word-spacing: -0.247em;
}

.jagged {
    margin-left: 1em;
    text-indent: -1em;
}

.sr-only {
    position: absolute;
    left: -2px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    margin-top: 0em; /* for h5o outliner */
    font-weight: normal;
}

.fill-parent-width {
    width: 100%;
    height: auto;
}

.sentenced, p:has(span.s) { /* .sentenced is obsolescent */
    word-spacing: 0.15em;
}

.sentence, .s { /* .sentence is obsolescent */
    word-spacing: 0;
}

hgroup, .bold {
    font-weight: bold;
}

.italic, .rubric {
    font-style: italic;
}

abbr, .all-caps {
    font-size: 95%;
}

abbr[title] {
    text-decoration: underline;
    text-decoration-style: dotted;
}

.spell-out {
    speak-as: spell-out;
}

button {
    font-family: "Source Sans Pro web", sans-serif;
    font-size: inherit;
    padding: 0 0.29em 0.03em;
}

dfn {
    font-style: italic;
}

svg {
    overflow: hidden; /* IE */
    transform: translate(0, 0);
}

fieldset, form, input, textarea {
    font-family: "Source Sans Pro web", sans-serif;
}

textarea {
    overflow-y: auto;
}

.serif {
    font-family: "Source Serif Pro web", serif;
}

figcaption, .sans {
    font-family: "Source Sans Pro web", sans-serif;
}

.nwc {
    font-family: "nwc2musikdingsserif web";
}

[data-hover], [data-hover-line-1] {
    color: #d00;
    display: inline;
    position: relative;
    z-index: auto;
}

[data-hover]:hover::before, [data-hover-line-1]:hover::before, [data-hover]:active::before,
    [data-hover-line-1]:active::before {
    background-color: #f7f7f7;
    border: 0.1em solid blue;
    border-radius: 0.5em;
    bottom: 1.7em;
    color: #000;
    font-family: "Source Sans Pro web", sans-serif;
    font-style: normal;
    font-weight: normal;
    left: -7em;
    padding: 0.5em;
    position: absolute;
    text-align: left;
    z-index: 2;
}

[data-hover]:hover::before, [data-hover]:active::before {
    content: attr(data-hover);
    width: 12em;
}

[data-hover-line-1]:hover::before, [data-hover-line-1]:active::before {
    content:
        attr(data-hover-line-1)
        attr(data-hover-line-2)
        attr(data-hover-line-3)
        attr(data-hover-line-4)
        attr(data-hover-line-5)
        attr(data-hover-line-6);
    white-space: pre;
}

.comic {
    font-family: "Comic Relief web", cursive;
}

.uncial {
    font-family: "Source Serif Pro Uncial web", serif;
}

ol, ul {
    padding-left: 2em;
}

hr.hiatus {
    margin: 1.5em 30% 1em 30%;
}

blockquote, .blockquote {
    margin: 1em 2em;
}

.underline {
    text-decoration: underline;
}

.small-caps {
    font-style: normal;
    font-variant: small-caps;
}

.no-ligature {
    font-variant-ligatures: none;
}

.non-italic {
    font-style: normal;
}

[lang="he"] {
    font-family: "Frank Ruhl Libre web", serif;
}

[lang="grc"], [lang="he"] {
    font-style: normal;
}

.wide {
    max-width: 100%;
}

sup.compact {
    font-size: 65%;
    font-weight: bold;
    vertical-align: top;
}

sub.compact {
    font-size: 65%;
    font-weight: bold;
    vertical-align: baseline;
}

figure {
    margin-left: 0;
    margin-right: 0;
}

figure.box {
    border: 1px solid;
}

figure.box.wide {
    max-width: calc(100% - 2px);
}

figure.box > img, figure.box > svg, figure.box > .aspect, figure.box > .subbox > * {
    margin: 0.4em;
    max-width: calc(100% - 0.8em);
}

figure.box.small > img, figure.box.small > svg, figure.box.small > .aspect, .small figure.box > svg,
    .small figure.box > svg, .small figure.box > .aspect, figure.box.small > .subbox > *,
    .small figure.box > .subbox > * {
    margin: 0.4706em;
    max-width: calc(100% - 0.9412em);
}

figure.box > .subbox {
    margin: 0;
    max-width: 100%;
}

.aspect {
    position: relative;
}

.aspect > *, .aspect > a > img {
    height: 100%;
    position: absolute;
    width: 100%;
}

figure.float-left {
    float: left;
    margin: 0.306em 0.9em 0.065em 0;
}

figure.float-right {
    float: right;
    margin: 0.306em 0 0.065em 0.9em;
}

figcaption {
    padding-top: 0.625em;
}

figure.box figcaption, figure.photo figcaption {
    background-color: #111;
    color: #fff;
    padding: 0.2em 0.5em 0.1em;
}

.center, figure.center.box > .subbox {
    margin-left: auto;
    margin-right: auto;
}

figure.audio, figure.audio audio {
    width: 18.75em;
}

.unmargined, .p-unmargined p {
    margin-top: 0;
    margin-bottom: 0;
}

p, figure, nav, article, .margined {
    margin-top: 1em;
    margin-bottom: 1em;
}

table {
    border-collapse: separate;
    border-spacing: 0;
}

td, th {
    padding: 0;
    vertical-align: baseline;
    text-align: left;
}

video {
    background-color: #ccc;
}

main, audio, video, embed, svg, section, figure, figure img {
  display: block;
}

.text-center, figure.center figcaption {
    text-align: center;
}

fieldset {
    border-width: 2px;
    padding: 0.35em 0.75em 0.625em 0.75em;
}

fieldset.wide {
    min-width: 287px;
}

input[type="text"], textarea {
    background-color: #bff;
    border: none;
    border-radius: 0.3em;
    outline-color: #0bb;
    padding: 0.2em;
}

.nowrap {
    white-space: nowrap;
}

.letter {
    background-color: #ffc;
    border: 1px solid #aa8;
    margin: 1em auto;
    padding: calc(6em - 62px);
    
}

.red {
    color: #e00;
}

.cc-licence {
    width: 88px;
    height: 31px;
}

path.red {
    stroke: currentColor;
}

text.red, circle.red {
    fill: currentColor;
}

.labelled {
    position: relative;
    margin-left: 5em;
}

.labelled header {
    position: absolute;
    left: -5em;
}

.kern {
    letter-spacing: -0.0625em; /*obsolete?*/
}

.inline-block {
    display: inline-block;
}

.no-justify {
    text-justify: none;
}

.wsp-0 {
    word-spacing: -0.011em; /* for Source Serif 4mu: 222 − 233 */
}

.wsp-1 {
    word-spacing: 0.045em; /* for Source Serif 5mu: 278 − 233 */
}

.wsp-2 {
    word-spacing: 0.100em; /* for Source Serif 6mu: 333 − 233 */
}

.nnbs {
    word-spacing: -0.066em;
    white-space: nowrap;
}

.lrsp-1 {
    letter-spacing: 0.05em;
}

.lrsp-2 {
    letter-spacing: 0.10em;
}

.lrsp-3 {
    letter-spacing: 0.15em;
}

.vinculum-outer {
    border-top: 0.1em solid;
    font-size: 80%;
}

.vinculum-inner {
    font-size: 125%;
    white-space: nowrap;
}

hgroup > h1, hgroup > h2 {
    margin-bottom: 0;
}

hgroup > p {
    margin-top: 0;
}

p#slideShowInstructions {
    text-align: center;
}

p#slideShowInstructions::before {
    content: 'Please enable javascript to see the presentation.';
}

p#slideShowInstructions.jsEnabled::before {
    content: 'Navigate through presentation using space bar or direction keys, or by clicking on the above display.';
}

div#slideBox {
    background-color: #ddd;
    margin-top: 1em;
    padding: 56.25% 0 0;
    position: relative;
}

div#slide-unmargined img {
    position: absolute;
}

div#slide-margined {
    font-family: "Source Sans Pro web", sans-serif;
    position: absolute;
    text-align: left;
    top: 0;
}

div#slide-margined h1, div#slide-margined .h1 {
    font-size: 170%;
    font-weight: bold;
    line-height: 119%;
    margin: 0;
    text-align: center;
}

div#slide-margined p {
    line-height: 118%;
    margin: 0.4em 0;
    text-align: inherit;
}

div#slide-margined p.bullet, div#slide-margined div.bullet p {
    padding-left: 0.7em;
    text-indent: -0.7em;
    margin: 0.3em 0;
}

div#slide-margined p.number, div#margined div.number p {
    padding-left: 1em;
    text-indent: -1em;
}

div#slide-margined p.last {
    margin-bottom: 0;
}

div#slide-margined p.nomargin {
    margin: 0;
}

div#slidesData {
    display: none;
}