@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), blockquote: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;
}