@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Itim&family=Nunito&family=Princess+Sofia&display=swap");
:root {
  /* Color variables */
  /* General site-wide color variables */
  --hc: calc(var(--hm) + var(--hs));
  --hw: calc(var(--hm) - var(--hs));
  --ss: calc(var(--sm) / 2);
  --sh: calc((2 * var(--sm)));
  --sd: calc(var(--ss) / 4);
  color-scheme: light dark;
  --lt9: calc(var(--lm) + (var(--lti) * 9));
  --lt8: calc(var(--lm) + (var(--lti) * 8));
  --lt7: calc(var(--lm) + (var(--lti) * 7));
  --lt6: calc(var(--lm) + (var(--lti) * 6));
  --lt5: calc(var(--lm) + (var(--lti) * 5));
  --lt4: calc(var(--lm) + (var(--lti) * 4));
  --lt3: calc(var(--lm) + (var(--lti) * 3));
  --lt2: calc(var(--lm) + (var(--lti) * 2));
  --lt1: calc(var(--lm) + (var(--lti) * 1));
  --ls1: calc(var(--lm) + (var(--lsi) * 1));
  --ls2: calc(var(--lm) + (var(--lsi) * 2));
  --ls3: calc(var(--lm) + (var(--lsi) * 3));
  --ls4: calc(var(--lm) + (var(--lsi) * 4));
  --ls5: calc(var(--lm) + (var(--lsi) * 5));
  --ls6: calc(var(--lm) + (var(--lsi) * 6));
  --ls7: calc(var(--lm) + (var(--lsi) * 7));
  --ls8: calc(var(--lm) + (var(--lsi) * 8));
  --ls9: calc(var(--lm) + (var(--lsi) * 9));
  --cm: hsl(var(--hm) var(--sm) var(--lm));
  --cc: hsl(var(--hc) var(--ss) var(--lm));
  --cw: hsl(var(--hw) var(--ss) var(--lm));
  --cmg: hsl(var(--hm) var(--sh) calc(100% / 2) / 25%);
  --ccg: hsl(var(--hc) var(--sh) calc(100% / 2) / 25%);
  --cwg: hsl(var(--hw) var(--sh) calc(100% / 2) / 25%);
  --cmd: hsl(var(--hm) var(--sd) var(--lm) / 25%);
  --ccd: hsl(var(--hc) var(--sd) var(--lm) / 25%);
  --cwd: hsl(var(--hw) var(--sd) var(--lm) / 25%);
  --cm95: hsl(var(--hm) var(--sm) var(--lt9));
  --cm90: hsl(var(--hm) var(--sm) var(--lt8));
  --cm85: hsl(var(--hm) var(--sm) var(--lt7));
  --cm80: hsl(var(--hm) var(--sm) var(--lt6));
  --cm75: hsl(var(--hm) var(--sm) var(--lt5));
  --cm70: hsl(var(--hm) var(--sm) var(--lt4));
  --cm65: hsl(var(--hm) var(--sm) var(--lt3));
  --cm60: hsl(var(--hm) var(--sm) var(--lt2));
  --cm55: hsl(var(--hm) var(--sm) var(--lt1));
  --cm50: var(--cm);
  --cm45: hsl(var(--hm) var(--sm) var(--ls1));
  --cm40: hsl(var(--hm) var(--sm) var(--ls2));
  --cm35: hsl(var(--hm) var(--sm) var(--ls3));
  --cm30: hsl(var(--hm) var(--sm) var(--ls4));
  --cm25: hsl(var(--hm) var(--sm) var(--ls5));
  --cm20: hsl(var(--hm) var(--sm) var(--ls6));
  --cm15: hsl(var(--hm) var(--sm) var(--ls7));
  --cm10: hsl(var(--hm) var(--sm) var(--ls8));
  --cm05: hsl(var(--hm) var(--sm) var(--ls9));
  --cc95: hsl(var(--hc) var(--ss) var(--lt9));
  --cc90: hsl(var(--hc) var(--ss) var(--lt8));
  --cc85: hsl(var(--hc) var(--ss) var(--lt7));
  --cc80: hsl(var(--hc) var(--ss) var(--lt6));
  --cc75: hsl(var(--hc) var(--ss) var(--lt5));
  --cc70: hsl(var(--hc) var(--ss) var(--lt4));
  --cc65: hsl(var(--hc) var(--ss) var(--lt3));
  --cc60: hsl(var(--hc) var(--ss) var(--lt2));
  --cc55: hsl(var(--hc) var(--ss) var(--lt1));
  --cc50: var(--cc);
  --cc45: hsl(var(--hc) var(--ss) var(--ls1));
  --cc40: hsl(var(--hc) var(--ss) var(--ls2));
  --cc35: hsl(var(--hc) var(--ss) var(--ls3));
  --cc30: hsl(var(--hc) var(--ss) var(--ls4));
  --cc25: hsl(var(--hc) var(--ss) var(--ls5));
  --cc20: hsl(var(--hc) var(--ss) var(--ls6));
  --cc15: hsl(var(--hc) var(--ss) var(--ls7));
  --cc10: hsl(var(--hc) var(--ss) var(--ls8));
  --cc05: hsl(var(--hc) var(--ss) var(--ls9));
  --cw95: hsl(var(--hw) var(--ss) var(--lt9));
  --cw90: hsl(var(--hw) var(--ss) var(--lt8));
  --cw85: hsl(var(--hw) var(--ss) var(--lt7));
  --cw80: hsl(var(--hw) var(--ss) var(--lt6));
  --cw75: hsl(var(--hw) var(--ss) var(--lt5));
  --cw70: hsl(var(--hw) var(--ss) var(--lt4));
  --cw65: hsl(var(--hw) var(--ss) var(--lt3));
  --cw60: hsl(var(--hw) var(--ss) var(--lt2));
  --cw55: hsl(var(--hw) var(--ss) var(--lt1));
  --cw50: var(--cw);
  --cw45: hsl(var(--hw) var(--ss) var(--ls1));
  --cw40: hsl(var(--hw) var(--ss) var(--ls2));
  --cw35: hsl(var(--hw) var(--ss) var(--ls3));
  --cw30: hsl(var(--hw) var(--ss) var(--ls4));
  --cw25: hsl(var(--hw) var(--ss) var(--ls5));
  --cw20: hsl(var(--hw) var(--ss) var(--ls6));
  --cw15: hsl(var(--hw) var(--ss) var(--ls7));
  --cw10: hsl(var(--hw) var(--ss) var(--ls8));
  --cw05: hsl(var(--hw) var(--ss) var(--ls9));
  --ct: hsl(from var(--black) h s l / 75%);
  --cbi: hsl(from var(--white) h s l / 25%);
  --cbo: hsl(from var(--white) h s l / 75%);
  /* Colors variables for header and footer */
  --skyHue3: 0;
  --skyHue2: 30;
  --skyHue1: 60;
  --seaHue1: 180;
  --seaHue2: 210;
  --seaHue3: 240;
  /* Layout variables */
  /* Spacing variables */
  /* Configurable spacing variables */
  --spacingFactor: 1;
  /* Calculated spacing variables */
  --spacingRel: clamp(0.5rem, calc(100vw / 60), calc(var(--spacingFactor) * 1em));
  --spacingAbs: clamp(
    0.5rem,
    calc(100vw / 60),
    calc(var(--spacingFactor) * 1rem)
  );
  --spacing: var(--spacingRel);
  /* Rounding variables */
  /* Configurable spacing variables */
  --spacingFactor: 1;
  /* Calculated spacing variables */
  --spacingRel: clamp(0.5rem, calc(100vw / 60), calc(var(--spacingFactor) * 1em));
  --spacingAbs: clamp(
    0.5rem,
    calc(100vw / 60),
    calc(var(--spacingFactor) * 1rem)
  );
  --spacing: var(--spacingRel);
  /* Configurable rounding variables */
  --roundingFactor: 1;
  /* Calculated rounding variables */
  --roundingRel: calc(var(--spacingRel) * var(--roundingFactor));
  --roundingAbs: calc(var(--spacingAbs) * var(--roundingFactor));
  --rounding: var(--roundingRel);
  /* Breakpoint variables */
  --bp1: 20rem;
  --bp2: 40rem;
  --bp3: 60rem;
  --bp4: 80rem;
}
:root, :root[data-theme=natural] {
  --hm: 120;
  --hs: 60;
  --sm: 50%;
  --lmo: 75%;
}
:root[data-theme=grays] {
  --sm: 0%;
}
:root[data-theme=warmer] {
  --hm: 45;
  --hs: 15;
}
:root[data-theme=cooler] {
  --hm: 195;
  --hs: 15;
}
:root[data-theme=alien] {
  --hm: 300;
  --hs: -60;
}
@media (prefers-color-scheme: light) {
  :root {
    --lm: calc(100% - var(--lmo));
    --lti: calc((100% - var(--lm)) / 10);
    --lsi: calc((0% - var(--lm)) / 10);
    --black: black;
    --white: white;
  }
}
:root[data-color-scheme=light], html[data-color-scheme=light] :root {
  --lm: calc(100% - var(--lmo));
  --lti: calc((100% - var(--lm)) / 10);
  --lsi: calc((0% - var(--lm)) / 10);
  --black: black;
  --white: white;
}
@media (prefers-color-scheme: dark) {
  :root {
    --lm: calc(0% + var(--lmo));
    --lti: calc((0% - var(--lm)) / 10);
    --lsi: calc((100% - var(--lm)) / 10);
    --black: white;
    --white: black;
  }
}
:root[data-color-scheme=dark], html[data-color-scheme=dark] :root {
  --lm: calc(0% + var(--lmo));
  --lti: calc((0% - var(--lm)) / 10);
  --lsi: calc((100% - var(--lm)) / 10);
  --black: white;
  --white: black;
}
@media (prefers-color-scheme: light) {
  :root {
    --shade: #0001;
    --gloss: #fffc;
  }
}
:root[data-color-scheme=light], html[data-color-scheme=light] :root {
  --shade: #0001;
  --gloss: #fffc;
}
@media (prefers-color-scheme: dark) {
  :root {
    --shade: #000c;
    --gloss: #fff1;
  }
}
:root[data-color-scheme=dark], html[data-color-scheme=dark] :root {
  --shade: #000c;
  --gloss: #fff1;
}
@media (prefers-color-scheme: light) {
  :root {
    --curve: bottom;
  }
}
:root[data-color-scheme=light], html[data-color-scheme=light] :root {
  --curve: bottom;
}
@media (prefers-color-scheme: dark) {
  :root {
    --curve: top;
  }
}
:root[data-color-scheme=dark], html[data-color-scheme=dark] :root {
  --curve: top;
}
:root[data-theme=warmer] {
  --skyHue3: 30;
  --skyHue2: 45;
  --skyHue1: 60;
  --seaHue1: 30;
  --seaHue2: 15;
  --seaHue3: 00;
}
:root[data-theme=cooler] {
  --skyHue3: 210;
  --skyHue2: 195;
  --skyHue1: 180;
  --seaHue1: 210;
  --seaHue2: 225;
  --seaHue3: 240;
}
:root[data-theme=alien] {
  --skyHue3: 0;
  --skyHue2: 330;
  --skyHue1: 345;
  --seaHue1: 285;
  --seaHue2: 270;
  --seaHue3: 240;
}
@media (prefers-color-scheme: light) {
  :root {
    --cloudLight: hsl(
      from var(--cloudColor) h calc(var(--sm) * 2) calc(100% / 2) / 50%
    );
    --cloudColor: hsl(var(--skyHue1) calc(var(--sm) * 2) calc(100% / 2) / 25%);
    --skyColor3: hsl(var(--skyHue3) calc(var(--sm) * 2) calc(50% / 2));
    --skyColor2: hsl(var(--skyHue2) calc(var(--sm) * 2) calc(75% / 2));
    --skyColor1: hsl(var(--skyHue1) calc(var(--sm) * 2) calc(100% / 2));
    --skyMist: hsl(var(--skyHue1) calc(var(--sm) * 2) 87.5%);
    --seaMist: hsl(var(--seaHue1) calc(var(--sm) * 2) 87.5%);
    --seaColor1: hsl(var(--seaHue1) calc(var(--sm) * 2) calc(100% / 2));
    --seaColor2: hsl(var(--seaHue2) calc(var(--sm) * 2) calc(75% / 2));
    --seaColor3: hsl(var(--seaHue3) calc(var(--sm) * 2) calc(50% / 2));
    --swellColor: hsl(var(--seaHue1) calc(var(--sm) * 2) calc(100% / 2) / 25%);
    --swellLight: hsl(
      from var(--swellColor) h calc(var(--sm) * 2) calc(100% / 2) / 50%
    );
  }
}
:root[data-color-scheme=light], html[data-color-scheme=light] :root {
  --cloudLight: hsl(
    from var(--cloudColor) h calc(var(--sm) * 2) calc(100% / 2) / 50%
  );
  --cloudColor: hsl(var(--skyHue1) calc(var(--sm) * 2) calc(100% / 2) / 25%);
  --skyColor3: hsl(var(--skyHue3) calc(var(--sm) * 2) calc(50% / 2));
  --skyColor2: hsl(var(--skyHue2) calc(var(--sm) * 2) calc(75% / 2));
  --skyColor1: hsl(var(--skyHue1) calc(var(--sm) * 2) calc(100% / 2));
  --skyMist: hsl(var(--skyHue1) calc(var(--sm) * 2) 87.5%);
  --seaMist: hsl(var(--seaHue1) calc(var(--sm) * 2) 87.5%);
  --seaColor1: hsl(var(--seaHue1) calc(var(--sm) * 2) calc(100% / 2));
  --seaColor2: hsl(var(--seaHue2) calc(var(--sm) * 2) calc(75% / 2));
  --seaColor3: hsl(var(--seaHue3) calc(var(--sm) * 2) calc(50% / 2));
  --swellColor: hsl(var(--seaHue1) calc(var(--sm) * 2) calc(100% / 2) / 25%);
  --swellLight: hsl(
    from var(--swellColor) h calc(var(--sm) * 2) calc(100% / 2) / 50%
  );
}
@media (prefers-color-scheme: dark) {
  :root {
    --cloudLight: hsl(
      from var(--cloudColor) h calc(var(--sm) * 2) calc(100% / 2) / 50%
    );
    --cloudColor: hsl(var(--skyHue1) calc(var(--sm) * 2) calc(75% / 2) / 25%);
    --skyColor3: hsl(var(--skyHue3) calc(var(--sm) * 2) calc(50% / 2));
    --skyColor2: hsl(var(--skyHue2) calc(var(--sm) * 2) calc(25% / 2));
    --skyColor1: hsl(var(--skyHue1) calc(var(--sm) * 2) calc(12.5% / 2));
    --skyMist: hsl(var(--skyHue1) calc(var(--sm) * 2) calc(6.25% / 2));
    --seaMist: hsl(var(--seaHue1) calc(var(--sm) * 2) calc(6.25% / 2));
    --seaColor1: hsl(var(--seaHue1) calc(var(--sm) * 2) calc(12.5% / 2));
    --seaColor2: hsl(var(--seaHue2) calc(var(--sm) * 2) calc(25% / 2));
    --seaColor3: hsl(var(--seaHue3) calc(var(--sm) * 2) calc(50% / 2));
    --swellColor: hsl(var(--seaHue1) calc(var(--sm) * 2) calc(75% / 2) / 25%);
    --swellLight: hsl(
      from var(--swellColor) h calc(var(--sm) * 2) calc(100% / 2) / 50%
    );
  }
}
:root[data-color-scheme=dark], html[data-color-scheme=dark] :root {
  --cloudLight: hsl(
    from var(--cloudColor) h calc(var(--sm) * 2) calc(100% / 2) / 50%
  );
  --cloudColor: hsl(var(--skyHue1) calc(var(--sm) * 2) calc(75% / 2) / 25%);
  --skyColor3: hsl(var(--skyHue3) calc(var(--sm) * 2) calc(50% / 2));
  --skyColor2: hsl(var(--skyHue2) calc(var(--sm) * 2) calc(25% / 2));
  --skyColor1: hsl(var(--skyHue1) calc(var(--sm) * 2) calc(12.5% / 2));
  --skyMist: hsl(var(--skyHue1) calc(var(--sm) * 2) calc(6.25% / 2));
  --seaMist: hsl(var(--seaHue1) calc(var(--sm) * 2) calc(6.25% / 2));
  --seaColor1: hsl(var(--seaHue1) calc(var(--sm) * 2) calc(12.5% / 2));
  --seaColor2: hsl(var(--seaHue2) calc(var(--sm) * 2) calc(25% / 2));
  --seaColor3: hsl(var(--seaHue3) calc(var(--sm) * 2) calc(50% / 2));
  --swellColor: hsl(var(--seaHue1) calc(var(--sm) * 2) calc(75% / 2) / 25%);
  --swellLight: hsl(
    from var(--swellColor) h calc(var(--sm) * 2) calc(100% / 2) / 50%
  );
}

* {
  transition: all 0.5s;
}

html {
  height: 100%;
  background: black;
  color: var(--ct);
  font-family: "Nunito", sans-serif;
  font-size: 1pc;
  line-height: 1;
  scroll-padding-top: 6rem;
  scroll-behavior: smooth;
}

body {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  min-height: 100vh;
  padding: 0;
  margin: 0;
}

a {
  border: 0;
  color: var(--cm);
  text-decoration: underline;
  text-shadow: 1pt 1pt 1pt transparent;
  cursor: pointer;
}
a:link, a:visited {
  color: var(--cm50);
}
a:hover {
  color: var(--cm55);
}
a:active {
  color: var(--cm60);
}
a:hover, a:active {
  text-shadow: 1pt 1pt 1pt var(--shade);
}
a img {
  border: 0;
}

code {
  white-space: normal;
}

/* Styles for the header */
header {
  /* Layout */
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-flow: column;
  /* Sizing */
  max-height: 100vh;
  overflow-y: hidden;
  /* Spacing */
  padding: 0;
  /* Borders */
  border: 0;
  /* Background */
  background: black;
  /* Typography */
  text-align: center;
  /* Don't display in print mode */
  /* Links have no underlines in the header*/
  /* Styles for the main heading */
  /* Styles for navigation */
}
@media (min-width: 40rem) {
  header {
    top: calc(-1 * (3 * max(1.5rem, 4vw) + 2vw + 0.5rem));
    overflow-y: visible;
  }
}
@media only print {
  header {
    display: none;
  }
}
header a {
  text-decoration: none;
}
header h1 {
  /* Geenral */
  display: flex;
  justify-content: center;
  align-items: center;
  /* Sizing */
  box-sizing: border-box;
  width: 100%;
  /* Spacing */
  margin: 0 auto;
  padding: 1vw 3vw;
  /* Borders */
  border: 0.25em solid black;
  border-radius: 0.5em;
  outline: 1pt solid black;
  /* hides some unsightly glitches at the edges */
  /* Basic background colors of sky and sea with mist for depth built in
     (will be overridden with fancier layers at large viewport widths) */
  background: linear-gradient(to bottom, var(--skyColor2) 0%, var(--skyColor1) 37.5%, var(--skyMist) 48%, var(--white) 50%, var(--seaMist) 52%, var(--seaColor1) 62.5%, var(--seaColor2) 100%);
  /* Typography */
  font-family: "Princess Sofia", "Itim", "Nunito", sans-serif;
  font-size: max(1.5rem, 4vw);
  white-space: nowrap;
  letter-spacing: 0.1em;
  line-height: 2;
  /* Proper fill and stroke when supported */
  -webkit-text-fill-color: var(--cm);
  -webkit-text-stroke: 0.03125em black;
  paint-order: stroke fill;
  /* Basic color fill and text-shadow to fake strokes otherwise */
  color: var(--cm);
  --sW: calc(1em / 32);
  --sC: hsl(from var(--white) h s l / 50%);
  /* Text shadow also adds a softer touch even when proper stroke is supported */
  text-shadow: 0.0125em 0.0125em 0.0125em #000, 0.025em 0.025em 0.025em #0008, 0.05em 0.05em 0.05em #0004, 0.1em 0.1em 0.1em #0002, var(--sW) var(--sW) var(--sW) var(--sC), 0 var(--sW) var(--sW) var(--sC), calc(-1 * var(--sW)) var(--sW) var(--sW) var(--sC), calc(-1 * var(--sW)) 0 var(--sW) var(--sC), calc(-1 * var(--sW)) calc(-1 * var(--sW)) var(--sW) var(--sC), 0 calc(-1 * var(--sW)) var(--sW) var(--sC), var(--sW) calc(-1 * var(--sW)) var(--sW) var(--sC), var(--sW) 0 var(--sW) var(--sC);
  /* Details for small viewport widths */
  /* Places the logo in a ::before pseudo-element */
  /* Places a hamburger menu in an ::after pseudo-element */
  /* In light mode, it's unfiltered
     (and therefore black against the light background) */
  /* In dark mode, it's inverted
      (and therefore white against the dark background) */
  /* Makes different spans of text all equal sizes as each other */
  /* Hides the first span
     (e.g. "Forrest Cameranesi");
     To be shown only at larger viewport widths */
  /* Overrides for large viewport widths */
}
header h1::before {
  content: "";
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background: center/contain no-repeat url(/_media/images/logo.png);
  flex-shrink: 0;
}
header h1::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background: center/contain no-repeat url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0.0em" y="0.0em" width="1.0em" height="1.0em" viewBox="0 0 1.0em 1.0em" ><rect x="0.0em" y="0.0em" width="1.0em" height="0.2em" /><rect x="0.0em" y="0.4em" width="1.0em" height="0.2em" /><rect x="0.0em" y="0.8em" width="1.0em" height="0.2em" /></svg>');
  flex-shrink: 0;
}
@media (prefers-color-scheme: light) {
  header h1::after {
    filter: none;
  }
}
header h1[data-color-scheme=light]::after, html[data-color-scheme=light] header h1::after {
  filter: none;
}
@media (prefers-color-scheme: dark) {
  header h1::after {
    filter: invert(1);
  }
}
header h1[data-color-scheme=dark]::after, html[data-color-scheme=dark] header h1::after {
  filter: invert(1);
}
header h1 > span {
  flex-grow: 1;
  flex-basis: 100%;
  /* Hides sub-spans at smallest viewport widths,
     to collapse phrases down to acronyms
     (e.g. "Geek of all Trades" => "GoaT") */
}
header h1 > span > span {
  display: none;
  /* Shows sub-spans again at slightly larger viewport widths */
}
@media (min-width: 20rem) {
  header h1 > span > span {
    display: inline;
  }
}
header h1 > span:first-of-type {
  display: none;
}
@media (min-width: 40rem) {
  header h1 {
    /* Wind and waves background */
    background: linear-gradient(transparent calc(50% - 1em), var(--skyMist) 50%, var(--seaMist) 50%, transparent calc(50% + 1em)), linear-gradient(to bottom, transparent 0%, var(--cloudColor) 18.75%, var(--cloudLight) 21.875%, transparent 25%, var(--cloudColor) 34.375%, var(--cloudLight) 35.9375%, transparent 37.5%, var(--cloudColor) 42.1875%, var(--cloudLight) 42.96875%, transparent 43.75%, var(--cloudColor) 46.09375%, var(--cloudLight) 46.484375%, transparent 46.875%, var(--cloudColor) 48.046875%, var(--cloudLight) 48.2421875%, transparent 48.4375%, var(--cloudColor) 49.0234375%, var(--cloudLight) 49.12109375%, transparent 49.21875%, var(--cloudColor) 49.51171875%, var(--cloudLight) 49.560546875%, transparent 49.609375%, var(--cloudColor) 49.755859375%, var(--cloudLight) 49.7802734375%, transparent 49.8046875%, var(--cloudColor) 49.8779296875%, var(--cloudLight) 49.8901367188%, transparent 49.90234375%, var(--cloudColor) 49.9389648438%, var(--cloudLight) 49.9450683594%, transparent 49.951171875%, transparent 50.048828125%, var(--swellLight) 50.0793457031%, var(--swellColor) 50.0854492188%, transparent 50.09765625%, var(--swellLight) 50.1586914063%, var(--swellColor) 50.1708984375%, transparent 50.1953125%, var(--swellLight) 50.3173828125%, var(--swellColor) 50.341796875%, transparent 50.390625%, var(--swellLight) 50.634765625%, var(--swellColor) 50.68359375%, transparent 50.78125%, var(--swellLight) 51.26953125%, var(--swellColor) 51.3671875%, transparent 51.5625%, var(--swellLight) 52.5390625%, var(--swellColor) 52.734375%, transparent 53.125%, var(--swellLight) 55.078125%, var(--swellColor) 55.46875%, transparent 56.25%, var(--swellLight) 60.15625%, var(--swellColor) 60.9375%, transparent 62.5%, var(--swellLight) 70.3125%, var(--swellColor) 71.875%, transparent 75%, var(--swellLight) 90.625%, var(--swellColor) 93.75%, transparent 100%), linear-gradient(to bottom, var(--skyColor3) 0%, var(--skyColor2) 37.5%, var(--skyColor1) 48%, var(--skyMist) 50%, var(--seaMist) 50%, var(--seaColor1) 52%, var(--seaColor2) 62.5%, var(--seaColor3) 100%);
    background-size: 100%, 100% 100%, auto;
    background-position: center, center, center;
    /* Animation */
    animation-name: windAndWaves;
    animation-duration: 12s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    /* Custom animation timing function aiming to make loop look seamless */
    animation-timing-function: cubic-bezier(0, 0, 1, 0.75);
    /* Borders and shadows to create windowframe effect */
    padding: 1vw;
    border: 0.5rem solid black;
    border-radius: 6.25vw 6.25vw 0 0;
    box-shadow: inset 0 0 0.5vw 0 #0008, inset 0 0 0 0.5vw #000c;
    /* Scale up the logo (previously set in this ::before pseudo-element) */
    /* Hide the hamburger menu (previously set in this ::after pseudo-element) */
    /* Display the first line of text, now that there's room;
       and sort it before the logo */
  }
  @keyframes windAndWaves {
    from {
      background-size: 100%, 100% 100%, auto;
    }
    to {
      background-size: 100%, 100% 200%, auto;
    }
  }
  header h1::before {
    width: 3em;
    height: 3em;
  }
  header h1::after {
    display: none;
  }
  header h1 > span:first-of-type {
    display: inline;
    order: -1;
  }
}
header nav {
  /* Layout */
  position: relative;
  z-index: 1;
  display: none;
  --display: flex;
  flex-flow: column nowrap;
  flex-shrink: 1;
  /* Sizing */
  overflow-x: hidden;
  overflow-y: auto;
  /* Spacing */
  padding: 0 0.5em;
  gap: 0 0.5em;
  /* Background gradient used throughout child elements */
  --nav-grad: linear-gradient(
    to var(--curve),
    var(--cc95) calc(0 * 100% / 6),
    var(--cc85) calc(1 * 100% / 6),
    var(--cc85) calc(5 * 100% / 6),
    var(--cc75) calc(6 * 100% / 6)
  );
  /* At larger viewport widths, show fully by default */
  /* Styles for breadcrumbs */
  /* Styles for menus */
  /* Show the menu associated with the last breadcrumb by default */
}
header nav * {
  --display: ;
}
@media (min-width: 40rem) {
  header nav {
    display: flex;
    flex-flow: row wrap;
    min-height: auto;
    overflow-x: visible;
    overflow-y: visible;
    background-position-y: 0;
  }
}
header nav > a {
  /* Layout */
  display: block;
  float: left;
  z-index: 1;
  flex: 1 1 auto;
  order: -1;
  opacity: 50%;
  /* Sizing */
  min-height: 2em;
  overflow: hidden;
  /* Spacing */
  margin: 0;
  margin-bottom: -2em;
  padding: 0 1em;
  padding-bottom: 2em;
  /* Background */
  background: var(--nav-grad);
  background-size: 100% 300%;
  background-position-y: 50%;
  /* Borders */
  border: none;
  border-top: 0pt solid white;
  outline: none;
  border-top-left-radius: calc(0.5 * var(--rounding));
  border-top-right-radius: calc(0.5 * var(--rounding));
  box-shadow: 1pt 1pt 0pt transparent inset, -1pt 0pt 0pt transparent inset, 1pt 1pt 0 0 var(--shade) inset;
  /* Typography */
  color: var(--ct);
  text-align: center;
  text-decoration: none;
  line-height: 2;
  text-overflow: ellipsis;
  /* Fade out opacity from latest to earlier breadcrumbs */
  /* At larger viewport widths ... */
}
header nav > a:nth-last-of-type(1) {
  opacity: 100%;
}
header nav > a:nth-last-of-type(2) {
  opacity: 87.5%;
}
header nav > a:nth-last-of-type(3) {
  opacity: 75%;
}
header nav > a:nth-last-of-type(4) {
  opacity: 62.5%;
}
header nav > a:nth-last-of-type(5) {
  opacity: 50%;
}
@media (min-width: 40rem) {
  header nav > a {
    /* No gap between breadcrumbs and menus */
    margin-bottom: 0;
    padding-bottom: 0;
    /* On interaction... */
  }
  header nav > a:hover, header nav > a:focus, header nav > a:active, header nav > a.current {
    /* Get skeueomorphic */
    box-shadow: 1pt 1pt 0pt var(--gloss) inset, -1pt 0pt 0pt var(--shade) inset, 1pt 1pt 0 0 transparent inset;
    /* Shift background gradient to top (for highlight effect) */
    background-position-y: 0%;
    /* Come to full opacity */
    opacity: 100%;
    /* If it's not the last one, dim the last one a little in comparison */
  }
  header nav > a:hover ~ a:last-of-type, header nav > a:focus ~ a:last-of-type, header nav > a:active ~ a:last-of-type, header nav > a.current ~ a:last-of-type {
    opacity: 93.75%;
  }
}
header nav > ul {
  /* Layout */
  z-index: 1;
  display: none;
  --display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  flex-basis: auto;
  flex-shrink: 1;
  clear: both;
  /* Sizing */
  box-sizing: border-box;
  overflow-y: auto;
  /* Spacing */
  margin: 0 -0.5em;
  padding: 0.5em;
  gap: 0.5em;
  /* Background */
  background: var(--nav-grad);
  background-size: 100% 300%;
  background-position-y: 50%;
  /* Borders */
  border: 0;
  box-shadow: 0pt -1pt 0 0 var(--shade);
  /* Typography */
  text-align: center;
  line-height: 2.5;
  /* Effects */
  transition: all 0.25s;
  will-change: height, padding-top, padding-bottom, row-gap;
  /* At large viewport widths... */
  /* Styles for menu items */
}
header nav > ul * {
  --display: ;
}
@media (min-width: 40rem) {
  header nav > ul {
    /* Go full width and grow tall as needed */
    flex-basis: 100vw;
    overflow-y: visible;
    /* Get skeueomorphic on interaction */
    box-shadow: 0pt -1pt 0pt transparent inset, 0pt 1pt 1pt transparent, 0 -1pt 0 0 var(--shade) inset;
  }
  header nav > ul:hover, header nav > ul:focus, header nav > ul:active {
    box-shadow: 0pt -1pt 0pt var(--shade) inset, 0pt 1pt 1pt var(--shade), 0 -1pt 0 0 transparent inset;
    background-position-y: 100%;
  }
}
header nav > ul li {
  /* Layout */
  position: relative;
  display: inline-block;
  flex: 1 1 100%;
  /* Sizing */
  height: auto;
  /* Spacing */
  margin: 0;
  padding: 0;
  /* Borders */
  border-radius: calc(0.5 * var(--rounding));
  /* Typography */
  line-height: 1;
  white-space: normal;
  /* Miscelleneous */
  list-style-type: none;
  /* At larger viewpoint widths ... */
  /* Menu item link */
  /* Styles for active menu items */
  /* Styles for menu items with submenus */
  /* For the dropdown menu arrows */
  /* Basic dropdown functionality for when no Javascript */
  /* Hide submenus by default (even if menu item isn't classed ".submenu") */
}
@media (min-width: 40rem) {
  header nav > ul li {
    /* Accommodate content but no more */
    flex: 1 0 0%;
    /* No line wrapping */
    white-space: nowrap;
  }
}
header nav > ul li a {
  /* Layout */
  display: inline-block;
  /* Sizing */
  width: 100%;
  box-sizing: border-box;
  /* Spacing */
  margin: 0;
  padding: 0.5em 2em;
  /* Background */
  background: radial-gradient(transparent, var(--ccg)), linear-gradient(to var(--curve), var(--cc95) 0%, var(--cc75) 100%);
  /* Background is scaled up and centered to create illusory flatness
     that can then be scaled back down to animate in skeuomorphism */
  background-size: 1000% 1000%;
  background-position-y: 50%;
  /* Borders */
  border: none;
  border-radius: calc(0.5 * var(--rounding));
  box-shadow: 1pt 1pt 0pt transparent inset, -1pt -1pt 0pt transparent inset, 1pt 1pt 1pt transparent, 0 0 0 1pt var(--shade) inset;
  /* Typography */
  font-weight: normal;
  text-transform: none;
  text-decoration: none;
  overflow-wrap: break-word;
  line-height: 1;
  /* Text color should be ordinary text color in all circumstances */
  /* Effects */
  /* Skeuomorphisms on all interaction*/
  transition: all 1s;
  /* Different colors for hover and active states */
}
header nav > ul li a, header nav > ul li a:active, header nav > ul li a:hover, header nav > ul li a:focus, header nav > ul li a:link, header nav > ul li a:visited {
  color: var(--ct);
}
header nav > ul li a:hover, header nav > ul li a:focus, header nav > ul li a:active {
  box-shadow: 1pt 1pt 0pt var(--gloss) inset, -1pt -1pt 0pt var(--shade) inset, 1pt 1pt 1pt var(--shade), 0 0 0 1pt transparent inset;
  /* Scale background back to normal to animate in gradient */
  background-size: 100% 100%;
}
header nav > ul li a:hover {
  background: radial-gradient(transparent, var(--cmg)), linear-gradient(to var(--curve), var(--cm95), var(--cm75));
}
header nav > ul li a:active {
  background: radial-gradient(transparent, var(--cwg)), linear-gradient(to var(--curve), var(--cw95), var(--cw75));
}
header nav > ul li.current, header nav > ul li:not(.submenu):has(ul):hover {
  /* To pop out in front of other items */
  position: relative;
  z-index: 1;
  /* Menu item link */
}
header nav > ul li.current a, header nav > ul li:not(.submenu):has(ul):hover a {
  background: radial-gradient(transparent, var(--cmg)), linear-gradient(to var(--curve), var(--cm95), var(--cm75));
  background-size: 1000% 1000%;
  /* When hovered */
  /* When active */
}
header nav > ul li.current a:hover, header nav > ul li:not(.submenu):has(ul):hover a:hover {
  background: radial-gradient(transparent, var(--cwg)), linear-gradient(to var(--curve), var(--cw95), var(--cw75));
  background-size: 100% 100%;
}
header nav > ul li.current a:active, header nav > ul li:not(.submenu):has(ul):hover a:active {
  background: radial-gradient(transparent, var(--cwg)), linear-gradient(to var(--curve), var(--cw95), var(--cw75));
  background-size: 100% 100%;
}
header nav > ul li.submenu, header nav > ul li:has(ul) {
  /* But when the menu item is active ... */
}
header nav > ul li.submenu > a, header nav > ul li:has(ul) > a {
  /* Rotate the left one counter-clockwise by default */
  /* Rotate the right one clockwise by default */
  /* Reverse the shadow of the left one
     since they're in opposite orientations now */
}
header nav > ul li.submenu > a::before, header nav > ul li.submenu > a::after, header nav > ul li:has(ul) > a::before, header nav > ul li:has(ul) > a::after {
  content: "▼";
  position: absolute;
  display: inline-block;
  top: 0.5em;
  opacity: 0.25;
  vertical-align: middle;
  transform: rotate(0deg);
}
header nav > ul li.submenu > a::before, header nav > ul li:has(ul) > a::before {
  left: 0.5em;
  margin-right: 0.5em;
  transform: rotate(-90deg);
}
header nav > ul li.submenu > a::after, header nav > ul li:has(ul) > a::after {
  right: 0.5em;
  margin-left: 0.5em;
  transform: rotate(90deg);
}
header nav > ul li.submenu > a:hover::before, header nav > ul li:has(ul) > a:hover::before {
  text-shadow: -1pt 1pt 1pt var(--shade);
}
header nav > ul li.submenu.current a, header nav > ul li:has(ul).current a {
  /* Flip the dropdown menu arrows back to normal */
  /* Reverse the shadow of the left one back again */
}
header nav > ul li.submenu.current a::before, header nav > ul li.submenu.current a::after, header nav > ul li:has(ul).current a::before, header nav > ul li:has(ul).current a::after {
  transform: rotate(0deg);
}
header nav > ul li.submenu.current a:hover::before, header nav > ul li:has(ul).current a:hover::before {
  text-shadow: 1pt 1pt 1pt var(--shade);
}
header nav > ul li.submenu ul, header nav > ul li:has(ul) ul {
  /* Layout */
  position: static;
  display: none;
  z-index: -1;
  top: 0;
  left: 0.5em;
  overflow-y: auto;
  /* Sizing */
  width: 100%;
  /* Spacing */
  padding: 0.125em 0;
  margin: 0;
  /* Background */
  background: linear-gradient(to right, var(--cm70), var(--cm80), var(--cm70));
  background-size: 1000% 1000%;
  background-position-x: 50%;
  /* Borders */
  border-radius: calc(0.5 * var(--rounding));
  box-shadow: 1pt 1pt 0pt transparent inset, -1pt -1pt 0pt transparent inset, 1pt 1pt 1pt transparent, 0 0 0 1pt var(--shade) inset;
  /* At larger viewport widths, drop down instead of just expanding in place */
  /* Submenu items */
}
header nav > ul li.submenu ul:hover, header nav > ul li.submenu ul:focus, header nav > ul li.submenu ul:active, header nav > ul li:has(ul) ul:hover, header nav > ul li:has(ul) ul:focus, header nav > ul li:has(ul) ul:active {
  box-shadow: 1pt 1pt 0pt var(--gloss) inset, -1pt -1pt 0pt var(--shade) inset, 1pt 1pt 1pt var(--shade), 0 0 0 1pt transparent inset;
  background-size: 100% 100%;
}
@media (min-width: 40rem) {
  header nav > ul li.submenu ul, header nav > ul li:has(ul) ul {
    position: absolute;
    width: 100%;
    box-sizing: border-box;
    max-height: calc(100vh - 10em);
    margin: 0 -0.5em;
    padding: 2em 0 0;
  }
}
header nav > ul li.submenu ul li, header nav > ul li:has(ul) ul li {
  display: block;
  margin: 0.5em;
  white-space: normal;
  /* Item links */
}
header nav > ul li.submenu ul li a, header nav > ul li:has(ul) ul li a {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5em 1em;
}
header nav > ul li:not(.submenu):has(ul):hover > ul {
  display: block;
}
header nav > ul li > ul {
  display: none;
}
header nav > a:last-of-type + ul {
  display: flex;
}

/* Styles for the main */
main {
  /* Layout */
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: center;
  flex: 1 1 auto;
  /* Sizing */
  margin: 0;
  padding: var(--spacingAbs);
  gap: var(--spacingAbs);
  /* Borders */
  border: 0;
  outline: 0;
  /* Background */
  background: radial-gradient(farthest-corner, var(--cw75) 0%, var(--cw95) 100%);
  background-position: center;
  background-size: 100% 100%;
  /* Typography */
  font-size: clamp(1rem, 1rem + (100vw - 20rem) * 0.25 / 60, 1.25rem);
  line-height: 1.5;
  /* Animation */
  animation-name: mainLighting;
  animation-duration: 44s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  transition-timing-function: cubic-bezier(0.666, 2, 0.333, -1);
  /* Direct children layout */
  /* All children transitions */
  /* Give some selected elements zero transition delay
  so they just appear immediately with their parents */
  /* Styles for headings */
  /* Scale all sizes from one-and-a-fraction rem at the first breakpoint up to
     one-to-three-times the main font size (mfs) at the fourth breakpoint */
  /* Styles for other elements */
  /* Paragraphs */
  /* Lists */
  /* Blockquotes */
  /* Horizontal rules */
  /* Tables */
  /* Styles for sections */
  /* Styles for the toggle-all-sections controls */
}
@keyframes mainLighting {
  from {
    background-size: 100% 100%;
  }
  to {
    background-size: 400% 200%;
  }
}
main > * {
  flex: 0 1 auto;
}
main * {
  transition: all var(--dur), opacity var(--dur) linear, transform var(--dur) cubic-bezier(0, 2, 0.5, 0.75) calc(var(--delA) + var(--delB));
  --dur: 1s;
  --delA: 0s;
  --delB: 0s;
  /* Children of children have longer delays so they transition in in sequence */
  /* Styles for off-screen elements to transition back in from when they enter */
}
main *.off-screen > * {
  --delA: calc(1s / 32);
}
main *.off-screen > *.off-screen > * {
  --delA: calc(2s / 32);
}
main *.off-screen > *.off-screen > *.off-screen > * {
  --delA: calc(3s / 32);
}
main *.off-screen > *.off-screen > *.off-screen > *.off-screen > * {
  --delA: calc(4s / 32);
}
main *.off-screen {
  transition-delay: 0s;
  --dur: 0s;
}
@media only screen {
  main *.off-screen {
    opacity: 0;
    transform: rotateY(0.25turn);
  }
}
main a,
main em,
main strong,
main i,
main b,
main span {
  --dur: 0s;
}
main h2,
main h3,
main h4,
main h5,
main h6 {
  /* Layout */
  position: relative;
  /* Sizing */
  overflow-wrap: anywhere;
  /* Spacing */
  margin: 0 auto;
  padding: 0 var(--spacing);
  /* Borders */
  border: none;
  outline: none;
  /* Typography */
  color: var(--cm);
  font-family: "Itim", "Nunito", sans-serif;
  font-weight: normal;
  text-align: center;
  line-height: 1.25;
  text-shadow: 0.0625em 0.0625em 0.0625em transparent;
  /* To allow for select non-wrapping text with spans */
}
main h2:not(:has(+ .description)),
main h3:not(:has(+ .description)),
main h4:not(:has(+ .description)),
main h5:not(:has(+ .description)),
main h6:not(:has(+ .description)) {
  padding-bottom: calc(2 * var(--spacing));
  border-bottom: 1pt groove var(--cw75);
  border-radius: var(--rounding);
  margin-bottom: var(--spacing);
}
main h2:hover, main h2:focus, main h2:active, *:hover > main h2, *:focus > main h2, *:active > main h2,
main h3:hover,
main h3:focus,
main h3:active,
*:hover > main h3,
*:focus > main h3,
*:active > main h3,
main h4:hover,
main h4:focus,
main h4:active,
*:hover > main h4,
*:focus > main h4,
*:active > main h4,
main h5:hover,
main h5:focus,
main h5:active,
*:hover > main h5,
*:focus > main h5,
*:active > main h5,
main h6:hover,
main h6:focus,
main h6:active,
*:hover > main h6,
*:focus > main h6,
*:active > main h6 {
  text-shadow: 0.0625em 0.0625em 0.0625em var(--shade);
}
main h2 span,
main h3 span,
main h4 span,
main h5 span,
main h6 span {
  white-space: nowrap;
}
main h2 {
  font-size: clamp(1.5rem, 1.5rem + (100vw - 20rem) * 2.25 / 60, 3.75rem);
}
main h3 {
  font-size: clamp(1.4rem, 1.4rem + (100vw - 20rem) * 1.1 / 60, 2.5rem);
}
main h4 {
  font-size: clamp(1.3rem, 1.3rem + (100vw - 20rem) * 0.575 / 60, 1.875rem);
}
main h5 {
  font-size: clamp(1.2rem, 1.2rem + (100vw - 20rem) * 0.3625 / 60, 1.5625rem);
}
main h6 {
  font-size: clamp(1.1rem, 1.1rem + (100vw - 20rem) * 0.30625 / 60, 1.40625rem);
}
main p {
  text-indent: 2em;
  /* Special description paragraphs for below section headiings */
}
main p.description {
  padding: var(--spacing);
  padding-top: 0;
  border-radius: var(--rounding);
  border: none;
  border-bottom: 1pt groove var(--cw75);
  color: var(--cm50);
  text-align: center;
  text-indent: 0;
}
main ul,
main ol {
  overflow: hidden;
  margin: 0;
  padding: 0;
  padding-left: 1.5ch;
  /* List items */
}
main ul li,
main ol li {
  margin: var(--spacing) 0;
  padding: 0;
}
main blockquote {
  position: relative;
  margin: 0 auto;
  padding: var(--spacing) calc(2 * var(--spacing));
  border: 1pt dashed var(--cw75);
  border-radius: calc(0.5 * var(--rounding));
  /* Decorative quotation marks */
}
main blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: 1rem;
  display: block;
  width: 1em;
  height: 1em;
  font-size: 2em;
  text-align: left;
}
main blockquote:after {
  content: "”";
  position: absolute;
  bottom: 0;
  right: 1rem;
  display: block;
  width: 1em;
  height: 1em;
  font-size: 2em;
  text-align: right;
}
main hr {
  content: url(/_media/images/hr-vine.svg);
  clear: both;
  width: 100%;
  margin: var(--spacing) auto;
  padding: 0;
  border: 0;
  outline: 0;
  filter: drop-shadow(0 2pt 1pt var(--shade));
}
main table {
  width: 100%;
  box-sizing: border-box;
  font-size: 1em;
  border: 1pt solid black;
  margin: var(--spacing) auto auto auto;
  background: #ccc;
  /* Head and data cell common styles */
  /* Head cell specific styles */
  /* Data cell specific styles */
}
main table th,
main table td {
  padding: var(--spacing);
  border: 1pt solid black;
  text-align: center;
}
main table th {
  background: var(--cm95);
  text-align: center;
}
main table td {
  background: var(--white);
}
main section {
  /* Layout */
  clear: both;
  /* Sizing */
  width: 100%;
  box-sizing: border-box;
  /* Spacing */
  max-width: calc(80ch + 2 * var(--spacing));
  margin: 0 auto;
  /* First-order sections have flex gap between them, so no vertical margins */
  padding: var(--spacing);
  /* Borders */
  border: 0;
  outline: 0;
  /* Deeper nested subsections get less rounded */
  border-radius: calc(2 * var(--rounding));
  box-shadow: 2pt 2pt 2pt transparent, -2pt -2pt 2pt transparent, 1pt 1pt 0pt transparent inset, -1pt -1pt 0pt transparent inset, 0 0 0 1pt var(--gloss) inset;
  /* Background */
  background: radial-gradient(farthest-corner, var(--cbi), var(--cbo));
  background-position: center;
  /* Typography */
  text-shadow: 0 0 0.5em var(--cbi);
  /* Effects */
  transition: all 0.5s;
  /* Deeper nested subsections transition more slowly */
  --dur: 0.5s;
  /* Clear fix so floating figures don't extend beyond their sections */
  /* Get rid of padding on print */
  /* Styles for section animations */
  animation-name: mainLighting;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: cubic-bezier(0.666, 2, 0.333, -1);
  /* Different delays for different level of section nesting,
    faster and shorter cycles at deeper nesting levels,
    to make the animation look more varied */
  /* First level (5s loop over 10 sections) */
  animation-duration: 5s;
  /* Second level (4s loop over 8 sections) */
  /* Styles for sections that can be toggled */
  /* Styles for figures */
  /* Styles for duos of sections side by side when possible */
  /* Styles for galleries */
}
main section section:not(:last-child) {
  /* But sections within sections do get bottom margins, unless they're last */
  margin-bottom: var(--spacing);
}
main section > *:last-child {
  margin-bottom: 0;
}
main section section {
  border-radius: calc(1.75 * var(--rounding));
}
main section section section {
  border-radius: calc(1.5 * var(--rounding));
}
main section section section section {
  border-radius: calc(1.25 * var(--rounding));
}
main section section section section section {
  border-radius: calc(1 * var(--rounding));
}
main section:hover, main section:focus, main section:active {
  box-shadow: 2pt 2pt 2pt var(--shade), -2pt -2pt 2pt var(--gloss), 1pt 1pt 0pt var(--gloss) inset, -1pt -1pt 0pt var(--shade) inset, 0 0 0 1pt transparent inset;
}
main section section {
  --dur: 0.25s;
}
main section section section {
  --dur: 0.5s;
}
main section section section section {
  --dur: 0.75s;
}
main section section section section section {
  --dur: 1s;
}
main section:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
}
@media only print {
  main section {
    padding-left: 0;
    padding-right: 0;
  }
}
main section:nth-of-type(10n + 1) {
  animation-delay: 0s;
}
main section:nth-of-type(10n + 2) {
  animation-delay: 0.5s;
}
main section:nth-of-type(10n + 3) {
  animation-delay: 1s;
}
main section:nth-of-type(10n + 4) {
  animation-delay: 1.5s;
}
main section:nth-of-type(10n + 5) {
  animation-delay: 2s;
}
main section:nth-of-type(10n + 6) {
  animation-delay: 2.5s;
}
main section:nth-of-type(10n + 7) {
  animation-delay: 3s;
}
main section:nth-of-type(10n + 8) {
  animation-delay: 3.5s;
}
main section:nth-of-type(10n + 9) {
  animation-delay: 4s;
}
main section:nth-of-type(10n + 0) {
  animation-delay: 4.5s;
}
main section section {
  animation-duration: 4s;
  /* Third level (3s loop over 6 sections) */
}
main section section:nth-of-type(8n + 1) {
  animation-delay: 0s;
}
main section section:nth-of-type(8n + 2) {
  animation-delay: 0.5s;
}
main section section:nth-of-type(8n + 3) {
  animation-delay: 1s;
}
main section section:nth-of-type(8n + 4) {
  animation-delay: 1.5s;
}
main section section:nth-of-type(8n + 5) {
  animation-delay: 2s;
}
main section section:nth-of-type(8n + 6) {
  animation-delay: 2.5s;
}
main section section:nth-of-type(8n + 7) {
  animation-delay: 3s;
}
main section section:nth-of-type(8n + 0) {
  animation-delay: 3.5s;
}
main section section section {
  animation-duration: 3s;
  /* Fourth level (2s loop over 4 sections) */
}
main section section section:nth-of-type(6n + 1) {
  animation-delay: 0s;
}
main section section section:nth-of-type(6n + 2) {
  animation-delay: 1.5s;
}
main section section section:nth-of-type(6n + 3) {
  animation-delay: 1s;
}
main section section section:nth-of-type(6n + 4) {
  animation-delay: 1.5s;
}
main section section section:nth-of-type(6n + 5) {
  animation-delay: 2s;
}
main section section section:nth-of-type(6n + 0) {
  animation-delay: 2.5s;
}
main section section section section {
  animation-duration: 2s;
  /* Fifth level (1s loop over 2 sections) */
}
main section section section section:nth-of-type(4n + 1) {
  animation-delay: 0s;
}
main section section section section:nth-of-type(4n + 2) {
  animation-delay: 0.5s;
}
main section section section section:nth-of-type(4n + 3) {
  animation-delay: 1s;
}
main section section section section:nth-of-type(4n + 0) {
  animation-delay: 1.5s;
}
main section section section section section {
  animation-duration: 1s;
}
main section section section section section:nth-of-type(2n + 1) {
  animation-delay: 0s;
}
main section section section section section:nth-of-type(2n + 2) {
  animation-delay: 0.5s;
}
main section.toggleable {
  /* Only on screens so as not to mess up printing */
}
@media only screen {
  main section.toggleable {
    /* For all their headings ... */
  }
  main section.toggleable > h2, main section.toggleable > h3, main section.toggleable > h4, main section.toggleable > h5, main section.toggleable > h6 {
    /* Make space for the toggle controls */
    padding-left: 1em;
    padding-right: 1em;
    /* Create the toggle controls in ::before and ::after pseudo-elements */
    /* Align them to the left and right */
    /* Delay their appearance when the section transitions into view */
    /* Make them more opaque on hover */
  }
  main section.toggleable > h2::before, main section.toggleable > h2::after, main section.toggleable > h3::before, main section.toggleable > h3::after, main section.toggleable > h4::before, main section.toggleable > h4::after, main section.toggleable > h5::before, main section.toggleable > h5::after, main section.toggleable > h6::before, main section.toggleable > h6::after {
    content: "▼";
    opacity: 0.0625;
    position: absolute;
    top: 0;
    bottom: auto;
    display: flex;
    align-items: center;
  }
  main section.toggleable > h2::before, main section.toggleable > h3::before, main section.toggleable > h4::before, main section.toggleable > h5::before, main section.toggleable > h6::before {
    left: 0;
  }
  main section.toggleable > h2::after, main section.toggleable > h3::after, main section.toggleable > h4::after, main section.toggleable > h5::after, main section.toggleable > h6::after {
    right: 0;
  }
  main section.toggleable > h2::before, main section.toggleable > h2::after, main section.toggleable > h3::before, main section.toggleable > h3::after, main section.toggleable > h4::before, main section.toggleable > h4::after, main section.toggleable > h5::before, main section.toggleable > h5::after, main section.toggleable > h6::before, main section.toggleable > h6::after {
    --dur: 1s;
    transition: all var(--dur), opacity var(--dur) var(--dur);
  }
  main section.toggleable > h2.off-screen::before, main section.toggleable > h2.off-screen::after, main section.toggleable > h3.off-screen::before, main section.toggleable > h3.off-screen::after, main section.toggleable > h4.off-screen::before, main section.toggleable > h4.off-screen::after, main section.toggleable > h5.off-screen::before, main section.toggleable > h5.off-screen::after, main section.toggleable > h6.off-screen::before, main section.toggleable > h6.off-screen::after {
    opacity: 0;
    transition-delay: 0s;
  }
  main section.toggleable > h2:hover::before, main section.toggleable > h2:hover::after, main section.toggleable > h3:hover::before, main section.toggleable > h3:hover::after, main section.toggleable > h4:hover::before, main section.toggleable > h4:hover::after, main section.toggleable > h5:hover::before, main section.toggleable > h5:hover::after, main section.toggleable > h6:hover::before, main section.toggleable > h6:hover::after {
    opacity: 0.25;
  }
}
main section.collapsed {
  /* When the sections are collapsed ... */
  /* Don't hide contents of collapsed sections on print */
}
main section.collapsed > h1, main section.collapsed > h2, main section.collapsed > h3, main section.collapsed > h4, main section.collapsed > h5, main section.collapsed > h6 {
  /* Rotate the toggle controls inward */
}
main section.collapsed > h1::before, main section.collapsed > h2::before, main section.collapsed > h3::before, main section.collapsed > h4::before, main section.collapsed > h5::before, main section.collapsed > h6::before {
  transform: rotate(-90deg);
  opacity: 0.25;
}
main section.collapsed > h1::after, main section.collapsed > h2::after, main section.collapsed > h3::after, main section.collapsed > h4::after, main section.collapsed > h5::after, main section.collapsed > h6::after {
  transform: rotate(90deg);
  opacity: 0.25;
}
@media only print {
  main section.collapsed > *:not(h2, h3, h4, h5, h6, .description) {
    display: initial !important;
    opacity: initial !important;
    height: initial !important;
  }
}
main section figure {
  float: none;
  display: block;
  width: 100%;
  max-width: 100%;
  margin: var(--spacing) auto;
  --dur: 0.5s;
  /* Figure images */
  /* To transform in and out as they enter or exit the viewport */
  /* Figures that can be inverted with light and dark mode */
  /* Figures that aren't freeform within sections but rather 
     are contained within definite borders with backgrounds */
  /* At larger viewports, float figures alternately left or right */
  /* At even larger viewports, float figures even outside of their sections */
}
main section figure img {
  display: block;
  max-width: 100%;
  margin: auto;
}
main section figure.off-screen {
  /* But only on screen so as not to mess up printing */
}
@media only screen {
  main section figure.off-screen img {
    transform: scale(0);
  }
}
@media (prefers-color-scheme: light) {
  main section figure.invertible img {
    filter: none;
  }
}
main section figure.invertible[data-color-scheme=light] img, html[data-color-scheme=light] main section figure.invertible img {
  filter: none;
}
@media (prefers-color-scheme: dark) {
  main section figure.invertible img {
    filter: invert(1) hue-rotate(0.5turn);
  }
}
main section figure.invertible[data-color-scheme=dark] img, html[data-color-scheme=dark] main section figure.invertible img {
  filter: invert(1) hue-rotate(0.5turn);
}
main section figure.contained {
  overflow: hidden;
  border: 1pt solid var(--cw75);
  border-radius: var(--rounding);
  box-shadow: 2pt 2pt 1pt transparent, -2pt -2pt 2pt transparent, 1pt 1pt 0pt transparent inset, -1pt -1pt 0pt transparent inset, 0 0 0 1pt var(--shade) inset;
  background: var(--cw75);
  /* Don't do separate transitions on their images when entering viewport */
}
main section figure.contained:hover, main section figure.contained:focus, main section figure.contained:active {
  box-shadow: 2pt 2pt 1pt var(--shade), -2pt -2pt 2pt var(--gloss), 1pt 1pt 0pt var(--gloss) inset, -1pt -1pt 0pt var(--shade) inset, 0 0 0 1pt transparent inset;
}
main section figure.contained.off-screen img {
  transform: none;
}
@media (min-width: 40rem) {
  main section figure {
    --fw: calc(50% - 1.5 * var(--spacing));
    max-width: var(--fw);
    margin-top: 0;
    margin-bottom: var(--spacing);
    /* Unless they're classed "solo" */
    /* Otherwise ... */
    /* Imperfect hack to continue alternation across multiple sections */
  }
  main section figure.solo {
    float: none;
    transform-origin: center;
    max-width: 100%;
  }
  main section figure:not(.solo):nth-of-type(odd) {
    float: left;
    transform-origin: left;
    margin-right: var(--spacing);
    margin-left: 0;
  }
  main section figure:not(.solo):nth-of-type(even) {
    float: right;
    transform-origin: right;
    margin-left: var(--spacing);
    margin-right: 0;
  }
  main section:nth-of-type(even) figure:not(.solo):nth-of-type(odd) {
    float: right;
    transform-origin: right;
    margin-left: var(--spacing);
    margin-right: 0;
  }
  main section:nth-of-type(even) figure:not(.solo):nth-of-type(even) {
    float: left;
    transform-origin: left;
    margin-right: var(--spacing);
    margin-left: 0;
  }
}
@media (min-width: 60rem) {
  main section figure {
    /* Fancy negative margin size to pull them outside of their sections */
    --fms: calc(-1 * min(calc((100vw - 100%) / 2), 100%) + var(--spacing));
    /* Fancy max-width size to scale them appropriately for the larger width */
    --fmw: min(
      calc(100% - 5 * var(--spacing)),
      calc(var(--fw) - 0.5 * var(--fms))
    );
    /* Those classed as "solo" extent out beyond both sides of their sections */
    /* The rest of them... */
    /* They need a section-like padding, borders and backgrounds to look nice */
    padding: var(--spacing);
    border-radius: calc(2 * var(--spacing));
    box-shadow: 2pt 2pt 2pt transparent, -2pt -2pt 2pt transparent, 1pt 1pt 0pt transparent inset, -1pt -1pt 0pt transparent inset, 0 0 0 1pt var(--shade) inset;
    /* And to transition in with different timing than other section content */
    transition-duration: calc(4 * var(--dur)), 0.5s;
    transition-property: transform, all;
  }
  main section figure.solo {
    width: 100vw;
    max-width: min(300%, 100% - 2 * var(--fms) - 2 * var(--spacing));
    margin-left: var(--fms);
    margin-right: var(--fms);
    transform-origin: center;
    transition-duration: calc(2 * var(--dur));
  }
  main section figure:not(.solo) {
    max-width: var(--fmw);
    /* These need to be applied to those in alternating sections too */
  }
  main section figure:not(.solo):nth-of-type(odd) {
    margin-left: var(--fms);
    margin-right: var(--spacing);
    transform-origin: right;
  }
  main section figure:not(.solo):nth-of-type(even) {
    margin-right: var(--fms);
    margin-left: var(--spacing);
    transform-origin: left;
  }
  main section:nth-of-type(even) figure:not(.solo):nth-of-type(odd) {
    margin-right: var(--fms);
    margin-left: var(--spacing);
    transform-origin: left;
  }
  main section:nth-of-type(even) figure:not(.solo):nth-of-type(even) {
    margin-left: var(--fms);
    margin-right: var(--spacing);
    transform-origin: right;
  }

  main section figure:hover, main section figure:focus, main section figure:active {
    box-shadow: 2pt 2pt 2pt var(--shade), -2pt -2pt 2pt var(--gloss), 1pt 1pt 0pt var(--gloss) inset, -1pt -1pt 0pt var(--shade) inset, 0 0 0 1pt transparent inset;
  }
  main section figure, main section figure.contained {
    border: none;
    background: radial-gradient(farthest-corner, var(--cbi), var(--cbo));
    animation-name: mainLighting;
    animation-duration: 5s;
  }
  main section figure img {
    /* Images transition in immediately with their figures now */
    transition-duration: 0s;
    transition-property: transform;
    /* And don't get too big now that they have more opportunity to grow */
    max-height: calc(100vh - 10rem);
    object-fit: contain;
  }
}
main section .duo {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: stretch;
  text-align: left;
  gap: var(--spacing);
  /* Child elements */
}
main section .duo > section {
  display: inline-block;
  float: none;
  flex: 1 1 20ch;
  width: 36em;
  max-width: 100%;
  box-sizing: border-box;
  padding: var(--spacing);
  margin: 0;
  vertical-align: top;
}
main section .gallery {
  /* Layout */
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: stretch;
  /* Sizing */
  max-width: 100%;
  /* Spacing */
  margin: 0;
  padding: 0;
  gap: var(--spacing);
  /* Borders */
  border: 0;
  outline: 0 solid black;
  border-radius: 0;
  /* Background */
  /* Typography */
  text-align: center;
  box-shadow: none;
  /* Animation */
  animation-name: mainLighting;
  animation-duration: 5s;
  /* Gallery item fitting*/
  /* Style details for gallery items */
  /* Styles for galleries that expand beyond the main section width */
}
main section .gallery, main section .gallery:hover, main section .gallery:active, main section .gallery:focus {
  box-shadow: none;
}
main section .gallery, main section .gallery:hover, main section .gallery:active, main section .gallery:focus {
  background: none;
}
main section .gallery > .item {
  /* Gallery item number (how many columns should there be)
    assuming the gallery is within an 80ch wide section */
  --gin: 3;
  /* Gallery item measurement (to make them fit those columns) */
  --gim: calc(
    (
        80ch - (var(--gin) - 1 + 2 * 5) * var(--spacing) - var(--gin) * 2 *
          1pt - 1pt
      ) / var(--gin)
  );
  /* Assuming one column by default at smallest viewport widths */
  flex: 1 0 var(--gim);
  box-sizing: border-box;
  /* Make two-column gallery items transition in with appropriate timing */
  /* Make three-column gallery items transition in with appropriate timing */
}
@media (min-width: 34rem) {
  main section .gallery > .item:nth-of-type(2n + 1), main section .gallery > .item:nth-of-type(2n + 1) * {
    --delB: calc(1s / 2);
  }
  main section .gallery > .item:nth-of-type(2n + 0), main section .gallery > .item:nth-of-type(2n + 0) * {
    --delB: calc(2s / 2);
  }
}
@media (min-width: 53rem) {
  main section .gallery > .item:nth-of-type(3n + 1), main section .gallery > .item:nth-of-type(3n + 1) * {
    --delB: calc(1s / 3);
  }
  main section .gallery > .item:nth-of-type(3n + 2), main section .gallery > .item:nth-of-type(3n + 2) * {
    --delB: calc(2s / 3);
  }
  main section .gallery > .item:nth-of-type(3n + 0), main section .gallery > .item:nth-of-type(3n + 0) * {
    --delB: calc(3s / 3);
  }
}
main section .gallery .item {
  /* Layout */
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  /* Sizing */
  max-width: 80ch;
  overflow: hidden;
  /* Spacing */
  margin: 1pt;
  padding: var(--spacing);
  gap: var(--spacing);
  /* Borders */
  border: 0pt solid var(--cw75);
  border-radius: var(--rounding);
  box-shadow: 2pt 2pt 1pt transparent, -2pt -2pt 2pt transparent, 1pt 1pt 0pt transparent inset, -1pt -1pt 0pt transparent inset, 0 0 0 1pt var(--gloss) inset, 0 0 0 1pt var(--shade);
  /* Background */
  background-color: white;
  /* Typography */
  text-align: center;
  vertical-align: top;
  color: var(--ct);
  /* Reset text color since these backgrounds are always white */
  --ct: hsl(from black h s l / 75%);
  /* Transitions */
  transition-timing-function: cubic-bezier(0.75, 1.75, 0.75, 0.75), ease;
  transition-property: transform, all;
  /* Miscellaneous */
  list-style: none;
  /* Images */
  /* Styles for when the images are off-screen waiting to transition in */
  /* Text */
  /* Links in general */
}
main section .gallery .item:hover, main section .gallery .item:focus, main section .gallery .item:active {
  box-shadow: 2pt 2pt 1pt var(--shade), -2pt -2pt 2pt var(--gloss), 1pt 1pt 0pt var(--gloss) inset, -1pt -1pt 0pt var(--shade) inset, 0 0 0 1pt transparent inset, 0 0 0 1pt transparent;
}
main section .gallery .item img {
  display: inline-block;
  max-width: calc(var(--gim) - 2 * var(--spacing));
  max-height: calc(var(--gim) - 2 * var(--spacing));
  margin: auto;
  background: white;
  transition: all var(--dur) calc(var(--delA) + var(--delB));
}
main section .gallery .item.off-screen {
  /* Only apply these on screens, so that printing doesn't get messsed up */
}
@media only screen {
  main section .gallery .item.off-screen img {
    transform: scale(0);
    border-radius: 100%;
    transition-delay: 0s;
  }
}
main section .gallery .item p {
  margin: 0 auto;
  padding: 0;
  border: 0;
  font-size: 1rem;
  text-indent: 0;
  text-align: center;
  line-height: 1.5;
  color: black;
  /* Titles and 'More' links */
  /* Links within text element*/
}
main section .gallery .item p.title, main section .gallery .item p.more {
  font-family: "Nunito", sans-serif;
  font-size: 1em;
}
main section .gallery .item p a {
  position: relative;
  z-index: 1;
  text-decoration: underline;
  color: var(--cm25);
}
@media (prefers-color-scheme: dark) {
  main section .gallery .item p a {
    color: var(--cm75);
  }
}
main section .gallery .item p a[data-color-scheme=dark], html[data-color-scheme=dark] main section .gallery .item p a {
  color: var(--cm75);
}
main section .gallery .item a {
  margin: auto 0;
  color: var(--ct);
  text-decoration: none;
  /* Links that cover the entire gallery item, making it clickable as a whole */
}
main section .gallery .item a, main section .gallery .item a:hover, main section .gallery .item a:focus, main section .gallery .item a:active {
  text-shadow: none;
}
main section .gallery .item a.cover {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
main section .gallery .item a.cover, main section .gallery .item a.cover:hover, main section .gallery .item a.cover:focus, main section .gallery .item a.cover:active {
  color: transparent;
}
main section .gallery.expansive {
  /* Only applies at larger viewport widths */
}
@media (min-width: 60rem) {
  main section .gallery.expansive {
    /* Layout */
    justify-content: center;
    /* Sizing */
    box-sizing: border-box;
    width: 100vw;
    max-width: calc(100vw - 2 * var(--spacingAbs) - 2 * var(--spacing));
    /* Spacing */
    margin-left: calc(50% - 50vw + var(--spacingAbs) + var(--spacing));
    padding: var(--spacing);
    /* Borders */
    border-radius: calc(2 * var(--rounding));
    box-shadow: 2pt 2pt 2pt transparent, -2pt -2pt 2pt transparent, 1pt 1pt 0pt transparent inset, -1pt -1pt 0pt transparent inset, 0 0 0 1pt var(--shade) inset;
    /* Background */
    background: radial-gradient(farthest-corner, var(--cbi), var(--cbo));
    /* Gallery item max-width sides multiple, used in max-width below */
    --gimwsm: 2;
  }
  main section .gallery.expansive:hover, main section .gallery.expansive:focus, main section .gallery.expansive:active {
    box-shadow: 2pt 2pt 2pt var(--shade), -2pt -2pt 2pt var(--gloss), 1pt 1pt 0pt var(--gloss) inset, -1pt -1pt 0pt var(--shade) inset, 0 0 0 1pt transparent inset;
  }
  main section .gallery.expansive section {
    --gimwsm: 4;
  }
  main section .gallery.expansive section section {
    --gimwsm: 6;
  }
  main section .gallery.expansive section section section {
    --gimwsm: 8;
  }
  main section .gallery.expansive section section section section {
    --gimwsm: 10;
  }
  main section .gallery.expansive > .item {
    /* Make the last item in a gallery looks contained in the parent section */
    max-width: calc(80ch - var(--gimwsm) * var(--spacing));
    /* Make four-column gallery items transition in with appropriate timing */
    /* Make five-column gallery items transition in with appropriate timing */
    /* Make six-column gallery items transition in with appropriate timing */
    /* Make seven-column gallery items transition in with appropriate timing */
    /* Make eight-column gallery items transition in with appropriate timing */
    /* Make nine-column gallery items transition in with appropriate timing */
  }
  main section .gallery.expansive > .item:nth-of-type(4n + 1), main section .gallery.expansive > .item:nth-of-type(4n + 1) * {
    --delB: calc(1s / 4);
  }
  main section .gallery.expansive > .item:nth-of-type(4n + 2), main section .gallery.expansive > .item:nth-of-type(4n + 2) * {
    --delB: calc(2s / 4);
  }
  main section .gallery.expansive > .item:nth-of-type(4n + 3), main section .gallery.expansive > .item:nth-of-type(4n + 3) * {
    --delB: calc(3s / 4);
  }
  main section .gallery.expansive > .item:nth-of-type(4n + 0), main section .gallery.expansive > .item:nth-of-type(4n + 0) * {
    --delB: calc(4s / 4);
  }
}
@media (min-width: 60rem) and (min-width: 91rem) {
  main section .gallery.expansive > .item:nth-of-type(5n + 1), main section .gallery.expansive > .item:nth-of-type(5n + 1) * {
    --delB: calc(1s / 5);
  }
  main section .gallery.expansive > .item:nth-of-type(5n + 2), main section .gallery.expansive > .item:nth-of-type(5n + 2) * {
    --delB: calc(2s / 5);
  }
  main section .gallery.expansive > .item:nth-of-type(5n + 3), main section .gallery.expansive > .item:nth-of-type(5n + 3) * {
    --delB: calc(3s / 5);
  }
  main section .gallery.expansive > .item:nth-of-type(5n + 4), main section .gallery.expansive > .item:nth-of-type(5n + 4) * {
    --delB: calc(4s / 5);
  }
  main section .gallery.expansive > .item:nth-of-type(5n + 0), main section .gallery.expansive > .item:nth-of-type(5n + 0) * {
    --delB: calc(5s / 5);
  }
}
@media (min-width: 60rem) and (min-width: 106rem) {
  main section .gallery.expansive > .item:nth-of-type(6n + 1), main section .gallery.expansive > .item:nth-of-type(6n + 1) * {
    --delB: calc(1s / 6);
  }
  main section .gallery.expansive > .item:nth-of-type(6n + 2), main section .gallery.expansive > .item:nth-of-type(6n + 2) * {
    --delB: calc(2s / 6);
  }
  main section .gallery.expansive > .item:nth-of-type(6n + 3), main section .gallery.expansive > .item:nth-of-type(6n + 3) * {
    --delB: calc(3s / 6);
  }
  main section .gallery.expansive > .item:nth-of-type(6n + 4), main section .gallery.expansive > .item:nth-of-type(6n + 4) * {
    --delB: calc(4s / 6);
  }
  main section .gallery.expansive > .item:nth-of-type(6n + 5), main section .gallery.expansive > .item:nth-of-type(6n + 5) * {
    --delB: calc(5s / 6);
  }
  main section .gallery.expansive > .item:nth-of-type(6n + 0), main section .gallery.expansive > .item:nth-of-type(6n + 0) * {
    --delB: calc(6s / 6);
  }
}
@media (min-width: 60rem) and (min-width: 120rem) {
  main section .gallery.expansive > .item:nth-of-type(7n + 1), main section .gallery.expansive > .item:nth-of-type(7n + 1) * {
    --delB: calc(1s / 7);
  }
  main section .gallery.expansive > .item:nth-of-type(7n + 2), main section .gallery.expansive > .item:nth-of-type(7n + 2) * {
    --delB: calc(2s / 7);
  }
  main section .gallery.expansive > .item:nth-of-type(7n + 3), main section .gallery.expansive > .item:nth-of-type(7n + 3) * {
    --delB: calc(3s / 7);
  }
  main section .gallery.expansive > .item:nth-of-type(7n + 4), main section .gallery.expansive > .item:nth-of-type(7n + 4) * {
    --delB: calc(4s / 7);
  }
  main section .gallery.expansive > .item:nth-of-type(7n + 5), main section .gallery.expansive > .item:nth-of-type(7n + 5) * {
    --delB: calc(5s / 7);
  }
  main section .gallery.expansive > .item:nth-of-type(7n + 6), main section .gallery.expansive > .item:nth-of-type(7n + 6) * {
    --delB: calc(6s / 7);
  }
  main section .gallery.expansive > .item:nth-of-type(7n + 0), main section .gallery.expansive > .item:nth-of-type(7n + 0) * {
    --delB: calc(7s / 7);
  }
}
@media (min-width: 60rem) and (min-width: 137rem) {
  main section .gallery.expansive > .item:nth-of-type(8n + 1), main section .gallery.expansive > .item:nth-of-type(8n + 1) * {
    --delB: calc(1s / 8);
  }
  main section .gallery.expansive > .item:nth-of-type(8n + 2), main section .gallery.expansive > .item:nth-of-type(8n + 2) * {
    --delB: calc(2s / 8);
  }
  main section .gallery.expansive > .item:nth-of-type(8n + 3), main section .gallery.expansive > .item:nth-of-type(8n + 3) * {
    --delB: calc(3s / 8);
  }
  main section .gallery.expansive > .item:nth-of-type(8n + 4), main section .gallery.expansive > .item:nth-of-type(8n + 4) * {
    --delB: calc(4s / 8);
  }
  main section .gallery.expansive > .item:nth-of-type(8n + 5), main section .gallery.expansive > .item:nth-of-type(8n + 5) * {
    --delB: calc(5s / 8);
  }
  main section .gallery.expansive > .item:nth-of-type(8n + 6), main section .gallery.expansive > .item:nth-of-type(8n + 6) * {
    --delB: calc(6s / 8);
  }
  main section .gallery.expansive > .item:nth-of-type(8n + 7), main section .gallery.expansive > .item:nth-of-type(8n + 7) * {
    --delB: calc(7s / 8);
  }
  main section .gallery.expansive > .item:nth-of-type(8n + 0), main section .gallery.expansive > .item:nth-of-type(8n + 0) * {
    --delB: calc(8s / 8);
  }
}
@media (min-width: 60rem) and (min-width: 152rem) {
  main section .gallery.expansive > .item:nth-of-type(9n + 1), main section .gallery.expansive > .item:nth-of-type(9n + 1) * {
    --delB: calc(1s / 9);
  }
  main section .gallery.expansive > .item:nth-of-type(9n + 2), main section .gallery.expansive > .item:nth-of-type(9n + 2) * {
    --delB: calc(2s / 9);
  }
  main section .gallery.expansive > .item:nth-of-type(9n + 3), main section .gallery.expansive > .item:nth-of-type(9n + 3) * {
    --delB: calc(3s / 9);
  }
  main section .gallery.expansive > .item:nth-of-type(9n + 4), main section .gallery.expansive > .item:nth-of-type(9n + 4) * {
    --delB: calc(4s / 9);
  }
  main section .gallery.expansive > .item:nth-of-type(9n + 5), main section .gallery.expansive > .item:nth-of-type(9n + 5) * {
    --delB: calc(5s / 9);
  }
  main section .gallery.expansive > .item:nth-of-type(9n + 6), main section .gallery.expansive > .item:nth-of-type(9n + 6) * {
    --delB: calc(6s / 9);
  }
  main section .gallery.expansive > .item:nth-of-type(9n + 7), main section .gallery.expansive > .item:nth-of-type(9n + 7) * {
    --delB: calc(7s / 9);
  }
  main section .gallery.expansive > .item:nth-of-type(9n + 8), main section .gallery.expansive > .item:nth-of-type(9n + 8) * {
    --delB: calc(8s / 9);
  }
  main section .gallery.expansive > .item:nth-of-type(9n + 0), main section .gallery.expansive > .item:nth-of-type(9n + 0) * {
    --delB: calc(9s / 9);
  }
}
main .toggleAllControls {
  /* The container */
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: calc(80ch - 2 * var(--spacing));
  gap: var(--spacing);
  --dur: 0.5s;
  /* The individual buttons */
  /* Don't show any of this in print */
}
@media (min-width: 40rem) {
  main .toggleAllControls {
    flex-wrap: nowrap;
  }
}
main .toggleAllControls a {
  /* Layout */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 100%;
  /* Spacing */
  padding: 0.25em 2em;
  /* Borders */
  border: 1pt solid var(--gloss);
  border-radius: calc(0.5 * var(--rounding));
  /* Background */
  background: var(--white);
  opacity: 0.75;
  /* Typography */
  font-size: 0.75rem;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.125ch;
  /* Toggle direction indicators */
  /* All disabled buttons fade out and don't react to pointer */
}
main .toggleAllControls a.expandAll, main .toggleAllControls a.collapseAll {
  /* Same basics for both expand and collapse */
}
main .toggleAllControls a.expandAll::before, main .toggleAllControls a.expandAll::after, main .toggleAllControls a.collapseAll::before, main .toggleAllControls a.collapseAll::after {
  content: "▼";
  opacity: 0.25;
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
}
main .toggleAllControls a.expandAll::before, main .toggleAllControls a.collapseAll::before {
  left: 0.5em;
}
main .toggleAllControls a.expandAll::after, main .toggleAllControls a.collapseAll::after {
  right: 0.5em;
}
main .toggleAllControls a.collapseAll {
  /* Collapse has them pointing inward */
}
main .toggleAllControls a.collapseAll::before {
  transform: rotate(-90deg);
}
main .toggleAllControls a.collapseAll::after {
  transform: rotate(90deg);
}
main .toggleAllControls a.collapseAll:hover::before {
  text-shadow: -1pt 1pt 1pt var(--shade);
}
main .toggleAllControls a.anchorTarget {
  /* Anchor target gets its own unique styling */
  border-left-width: 0;
  border-right-width: 0;
  border-radius: 0;
  order: 3;
  /* Different indicators to illustrate its unique function */
  /* Hide indicators when disabled */
}
@media (min-width: 40rem) {
  main .toggleAllControls a.anchorTarget {
    order: unset;
  }
}
main .toggleAllControls a.anchorTarget::before, main .toggleAllControls a.anchorTarget::after {
  content: "↴";
}
main .toggleAllControls a.anchorTarget::before {
  margin-right: 1ch;
  transform: scaleY(-1) rotate(-90deg);
}
main .toggleAllControls a.anchorTarget::after {
  margin-left: 1ch;
}
main .toggleAllControls a.anchorTarget.disabled {
  opacity: 0.125;
}
main .toggleAllControls a.anchorTarget.disabled::before, main .toggleAllControls a.anchorTarget.disabled::after {
  display: none;
}
main .toggleAllControls a.disabled {
  pointer-events: none;
  opacity: 0.25;
  display: none;
}
@media (min-width: 40rem) {
  main .toggleAllControls a.disabled {
    display: block;
  }
}
main .toggleAllControls:last-of-type .anchorTarget {
  order: -1;
  /* Indicators get spun around to point up instead of down */
}
@media (min-width: 40rem) {
  main .toggleAllControls:last-of-type .anchorTarget {
    order: unset;
  }
}
main .toggleAllControls:last-of-type .anchorTarget::before {
  transform: rotate(-90deg);
}
main .toggleAllControls:last-of-type .anchorTarget::after {
  transform: scaleY(-1);
}
main .toggleAllControls:last-of-type .anchorTarget:hover::before {
  text-shadow: -1pt 1pt 1pt var(--shade);
}
main .toggleAllControls:last-of-type .anchorTarget:hover::after {
  text-shadow: 1pt -1pt 1pt var(--shade);
}
@media only print {
  main .toggleAllControls {
    display: none;
  }
}

/* Styles for the footer */
footer {
  /* Layout */
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  /* Spacing */
  margin: 0;
  padding: calc(2 * var(--spacing));
  gap: calc(2 * var(--spacing));
  /* Borders */
  border: 0;
  border-top: 3pt ridge var(--cw75);
  outline: 0;
  box-shadow: 0 0.5em 0.5em var(--shade) inset;
  /* Background */
  --seaShadow: hsla(from var(--seaColor1) h 100% 0% / 100%);
  background: linear-gradient(to bottom, transparent, var(--seaShadow)), linear-gradient(to bottom, transparent 0%, transparent 3.125%, var(--swellLight) 3.90625%, var(--swellColor) 4.6875%, transparent 6.25%, var(--swellLight) 7.8125%, var(--swellColor) 9.375%, transparent 12.5%, var(--swellLight) 15.625%, var(--swellColor) 18.75%, transparent 25%, var(--swellLight) 31.25%, var(--swellColor) 37.5%, transparent 50%, var(--swellLight) 62.5%, var(--swellColor) 75%, transparent 100%), linear-gradient(to bottom, var(--seaColor1) 0%, var(--seaColor2) 50%, var(--seaColor3) 100%);
  background-size: 100% 100%, auto;
  background-position: center, top, center;
  /* Animation */
  animation-name: waves;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-timing-function: linear;
  /* Typography */
  font-family: "Itim", "Nunito", sans-serif;
  color: var(--cw25);
  text-align: center;
  /* Paragraphs */
  /* Links */
  /* Hide whoel footer on print */
}
@keyframes waves {
  from {
    background-size: 100%, 100% 100%, auto;
  }
  to {
    background-size: 100%, 100% 200%, auto;
  }
}
footer p {
  margin: 0;
  padding: 0;
  font-size: min(2rem, 4vw);
  letter-spacing: 0.5ch;
  color: white;
  -webkit-text-fill-color: white;
  -webkit-text-stroke: 0.0625em black;
  paint-order: stroke fill;
  text-shadow: 0.0125em 0.0125em 0.0125em #000, 0.025em 0.025em 0.025em #0008, 0.05em 0.05em 0.05em #0004, 0.1em 0.1em 0.1em #0002;
}
footer a {
  text-decoration: none;
  text-shadow: inherit;
}
@media only print {
  footer {
    display: none;
  }
}

/* Color scheme switcher */
.color-scheme-switcher {
  /* The container */
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: 40rem;
  gap: var(--spacing);
  --dur: 0.5s;
  /* The individual buttons */
  /* Don't show any of this in print */
}
.color-scheme-switcher#themeSwitcher {
  flex-wrap: wrap;
}
@media (min-width: 40rem) {
  .color-scheme-switcher#themeSwitcher {
    flex-wrap: nowrap;
  }
}
.color-scheme-switcher a {
  /* Layout */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 100%;
  /* Spacing */
  padding: 0.25em 2em;
  /* Borders */
  border: 1pt solid var(--gloss);
  border-radius: calc(0.5 * var(--rounding));
  /* Background */
  background: var(--white);
  opacity: 0.75;
  /* Typography */
  font-size: 0.75rem;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.125ch;
  /* Light and dark mode switchers */
  /* Custom theme switchers */
}
html[data-color-scheme=light] .color-scheme-switcher a.lightMode {
  opacity: 1;
  outline: 1px solid var(--black);
}

html:not([data-color-scheme]) .color-scheme-switcher a.autoMode {
  opacity: 1;
  outline: 1px solid var(--black);
}

html[data-color-scheme=dark] .color-scheme-switcher a.darkMode {
  opacity: 1;
  outline: 1px solid var(--black);
}

html[data-theme=grays] .color-scheme-switcher a.grays-theme {
  opacity: 1;
  outline: 1px solid var(--black);
}

html[data-theme=warmer] .color-scheme-switcher a.warmer-theme {
  opacity: 1;
  outline: 1px solid var(--black);
}

html:not([data-theme]) .color-scheme-switcher a.natural-theme, html[data-theme=natural] .color-scheme-switcher a.natural-theme {
  opacity: 1;
  outline: 1px solid var(--black);
}

html[data-theme=cooler] .color-scheme-switcher a.cooler-theme {
  opacity: 1;
  outline: 1px solid var(--black);
}

html[data-theme=alien] .color-scheme-switcher a.alien-theme {
  opacity: 1;
  outline: 1px solid var(--black);
}

@media only print {
  .color-scheme-switcher {
    display: none;
  }
}

/* Styles for the lightbox */
.lightbox {
  /* Layout */
  position: fixed;
  z-index: 3;
  inset: 0;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  float: none;
  /* Sizing */
  overflow: hidden;
  /* Spacing */
  margin: 0;
  padding: 0;
  gap: var(--spacing);
  /* Background */
  background: radial-gradient(black, rgba(0, 0, 0, 0.9375));
  /* Typography */
  color: grey;
  font-size: calc(1rem + 1vmin);
  text-align: center;
  /* If the lightbox is modal, hide it by default */
  /* Image */
  /* Caption and navigation common styles*/
  /* Navigation style details */
}
.lightbox.modal {
  opacity: 0;
}
.lightbox img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: calc(100vw - 2em);
  max-height: calc(100vh - 12em);
  box-sizing: border-box;
  object-fit: scale-down;
  transform: translate(-50%, -50%);
  margin: 0 auto;
  border: 1vh solid white;
  box-shadow: 0 0 3em 3em black;
  background: white;
}
.lightbox #caption,
.lightbox nav {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  z-index: 4;
  width: auto;
  max-height: 1em;
  padding: 1em;
  gap: 0.5ch;
  border: none;
  border-bottom: none;
  color: grey;
  font-size: 2em;
  line-height: 1em;
}
.lightbox nav {
  top: auto;
  bottom: 0;
  background: none;
  /* Navigation buttons */
}
.lightbox nav a {
  display: inline-block;
  width: 1em;
  margin: 0 1em;
  padding: 0;
  border-radius: var(--rounding);
  background: none;
  color: grey;
  font-weight: bold;
  text-decoration: none;
  text-shadow: 0 0 0.125em transparent;
  user-select: none;
  cursor: pointer;
}
.lightbox nav a:hover, .lightbox nav a:focus, .lightbox nav a:active {
  text-shadow: 0 0 0.125em black;
}
.lightbox nav a:hover, .lightbox nav a:focus {
  color: white;
}

/*# sourceMappingURL=styles.css.map */