* {
  -webkit-overflow-scrolling: touch;
}

.future-onion {
  text-align: center;
  position: fixed;
  bottom: 2em;
  left: 1em;
  right: 1em;
  color: #b3712e;
  background: snow;
  padding: 1em;
  padding-left: 8em;
  padding-right: 8em;
  padding-top: 0;
  box-shadow: 0 0 2em 2em snow;
}
@media screen and (max-width: 480px) {
  .future-onion {
    padding-left: 1em;
    padding-right: 1em;
  }
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
  font-family: monospace;
  font-size: 18px;
  line-height: 21px;
  -webkit-font-smoothing: antialiased;
}

body {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
}

main {
  overflow: hidden;
}

a {
  color: inherit;
}

button {
  border: none;
  background: none;
  color: inherit;
  font: inherit;
}

blockquote {
  margin: 0;
  font-style: italic;
}

header h1 {
  position: absolute;
  top: 2em;
  left: 2em;
  z-index: 100;
  margin: 0;
  font-size: inherit;
  font-weight: normal;
  padding: 5px 0;
  color: black;
}
@media screen and (max-width: 800px) {
  header h1 {
    right: 6em;
  }
}
@media screen and (max-width: 480px) {
  header h1 {
    position: absolute;
    top: 0.8em;
    left: 1em;
    top: 0.5em;
    left: 0.5em;
  }
}
header h1 span {
  padding: 5px 8px;
  display: inline-block;
  margin-right: -0.5em;
}
header nav {
  position: absolute;
  top: 2em;
  right: 2em;
  z-index: 100;
}
@media screen and (max-width: 480px) {
  header nav {
    top: 1em;
    right: 1em;
    top: 0.8em;
    right: 0.8em;
  }
}
header nav ul {
  margin: 0;
  padding: 0;
}
header nav ul li {
  margin: 0;
  padding: 0;
  list-style-type: none;
  color: #0e2e5d;
  text-decoration: none;
  background: white;
  padding: 5px 8px;
  text-transform: uppercase;
  cursor: pointer;
}
header nav ul li a {
  text-decoration: none;
}
header nav ul li.current, header nav ul body.index header li#index {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}
header nav ul li:hover {
  background: rgba(255, 255, 255, 0.1);
}
header nav ul li#header-nav-link_about, header nav ul li#header-nav-link_contributors, header nav ul li#header-nav-link_support, header nav ul li#header-nav-link_masthead, header nav ul li#header-nav-link_links, header nav ul li#header-nav-link_supporters {
  display: none;
}
header nav ul li#header-nav-link_about:hover, header nav ul li#header-nav-link_contributors:hover, header nav ul li#header-nav-link_support:hover, header nav ul li#header-nav-link_masthead:hover, header nav ul li#header-nav-link_links:hover, header nav ul li#header-nav-link_supporters:hover {
  color: white;
}
header nav ul.show-all li#header-nav-link_about, header nav ul.show-all li#header-nav-link_contributors, header nav ul.show-all li#header-nav-link_support, header nav ul.show-all li#header-nav-link_masthead, header nav ul.show-all li#header-nav-link_links, header nav ul.show-all li#header-nav-link_supporters {
  display: block;
}

.onion-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  overflow: hidden;
}
.onion-container.floating {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
}
.onion-container .onion {
  position: absolute;
  border-radius: 50%;
}
.onion-container .onion .layer {
  border-width: 12px;
  border-style: solid;
  border-radius: 50%;
  box-sizing: border-box;
  mix-blend-mode: normal;
  transition: border-color ease-out 0.1s;
  cursor: pointer;
  z-index: 100;
}
.onion-container .onion .layer.current .layer {
  visibility: hidden;
}
.onion-container .onion .layer#layer-1 {
  border-color: rgba(255, 255, 255, 0.03);
}
.onion-container .onion .layer#layer-1.hover {
  border-color: MistyRose;
}
.onion-container .onion .layer#layer-2 {
  border-color: rgba(255, 255, 255, 0.06);
}
.onion-container .onion .layer#layer-2.hover {
  border-color: #b3712e;
}
.onion-container .onion .layer#layer-3 {
  border-color: rgba(255, 255, 255, 0.09);
}
.onion-container .onion .layer#layer-3.hover {
  border-color: RoyalBlue;
}
.onion-container .onion .layer#layer-4 {
  border-color: rgba(255, 255, 255, 0.12);
}
.onion-container .onion .layer#layer-4.hover {
  border-color: Tomato;
}
.onion-container .onion .layer#layer-5 {
  border-color: rgba(255, 255, 255, 0.15);
}
.onion-container .onion .layer#layer-5.hover {
  border-color: LimeGreen;
}
.onion-container .onion .layer#layer-6 {
  border-color: rgba(255, 255, 255, 0.18);
}
.onion-container .onion .layer#layer-6.hover {
  border-color: MediumAquamarine;
}
.onion-container .onion .layer#layer-7 {
  border-color: rgba(255, 255, 255, 0.21);
}
.onion-container .onion .layer#layer-7.hover {
  border-color: MidnightBlue;
}
.onion-container .onion .layer#layer-8 {
  border-color: rgba(255, 255, 255, 0.24);
}
.onion-container .onion .layer#layer-8.hover {
  border-color: DarkOrchid;
}
.onion-container .onion .layer#layer-9 {
  border-color: rgba(255, 255, 255, 0.27);
}
.onion-container .onion .layer#layer-9.hover {
  border-color: Silver;
}
.onion-container .onion .layer#layer-10 {
  border-color: rgba(255, 255, 255, 0.3);
}
.onion-container .onion .layer#layer-10.hover {
  border-color: WhiteSmoke;
}
.onion-container .onion .layer#layer-11 {
  border-color: rgba(255, 255, 255, 0.33);
}
.onion-container .onion .layer#layer-11.hover {
  border-color: DodgerBlue;
}
.onion-container .onion .layer#layer-12 {
  border-color: rgba(255, 255, 255, 0.36);
}
.onion-container .onion .layer#layer-12.hover {
  border-color: PapayaWhip;
}
.onion-container .onion .layer#layer-13 {
  border-color: rgba(255, 255, 255, 0.39);
}
.onion-container .onion .layer#layer-13.hover {
  border-color: LightPink;
}
.onion-container .onion .layer#layer-14 {
  border-color: rgba(255, 255, 255, 0.42);
}
.onion-container .onion .layer#layer-14.hover {
  border-color: PaleGreen;
}
.onion-container .onion .layer#layer-15 {
  border-color: rgba(255, 255, 255, 0.45);
}
.onion-container .onion .layer#layer-15.hover {
  border-color: MediumBlue;
}
.onion-container .onion .layer#layer-16 {
  border-color: rgba(255, 255, 255, 0.48);
}
.onion-container .onion .layer#layer-16.hover {
  border-color: Gold;
}
.onion-container .onion .layer#layer-17 {
  border-color: rgba(255, 255, 255, 0.51);
}
.onion-container .onion .layer#layer-17.hover {
  border-color: YellowGreen;
}
.onion-container .onion .layer#layer-18 {
  border-color: rgba(255, 255, 255, 0.54);
}
.onion-container .onion .layer#layer-18.hover {
  border-color: Khaki;
}
.onion-container .onion .layer#layer-19 {
  border-color: rgba(255, 255, 255, 0.57);
}
.onion-container .onion .layer#layer-19.hover {
  border-color: Coral;
}
.onion-container .onion .layer#layer-20 {
  border-color: rgba(255, 255, 255, 0.6);
}
.onion-container .onion .layer#layer-20.hover {
  border-color: SkyBlue;
}
.onion-container .onion .layer#layer-21 {
  border-color: rgba(255, 255, 255, 0.63);
}
.onion-container .onion .layer#layer-21.hover {
  border-color: BurlyWood;
}
.onion-container .onion .layer#layer-22 {
  border-color: rgba(255, 255, 255, 0.66);
}
.onion-container .onion .layer#layer-22.hover {
  border-color: White;
}
.onion-container .onion .layer#layer-23 {
  border-color: rgba(255, 255, 255, 0.69);
}
.onion-container .onion .layer#layer-23.hover {
  border-color: SlateGray;
}
.onion-container .onion .layer#layer-24 {
  border-color: rgba(255, 255, 255, 0.72);
}
.onion-container .onion .layer#layer-24.hover {
  border-color: AliceBlue;
}
.onion-container .onion .layer#layer-25 {
  border-color: rgba(255, 255, 255, 0.75);
}
.onion-container .onion .layer#layer-25.hover {
  border-color: YellowGreen;
}
.onion-container .onion .layer#layer-26 {
  border-color: rgba(255, 255, 255, 0.79);
}
.onion-container .onion .layer#layer-26.hover {
  border-color: Orchid;
}
.onion-container .onion .layer#layer-27 {
  border-color: rgba(255, 255, 255, 0.81);
}
.onion-container .onion .layer#layer-27.hover {
  border-color: RosyBrown;
}
.onion-container .onion .layer#layer-28 {
  border-color: rgba(255, 255, 255, 0.84);
}
.onion-container .onion .layer#layer-28.hover {
  border-color: DimGray;
}
.onion-container .onion .layer#layer-29 {
  border-color: rgba(255, 255, 255, 0.87);
}
.onion-container .onion .layer#layer-29.hover {
  border-color: LemonChiffon;
}
.onion-container .onion .layer#layer-30 {
  border-color: rgba(255, 255, 255, 0.9);
}
.onion-container .onion .layer#layer-30.hover {
  border-color: DarkKhaki;
}
.onion-container .onion .layer#layer-31 {
  border-color: rgba(255, 255, 255, 0.93);
}
.onion-container .onion .layer#layer-31.hover {
  border-color: Chocolate;
}
.onion-container .onion .layer#layer-32 {
  border-color: rgba(255, 255, 255, 0.96);
}
.onion-container .onion .layer#layer-32.hover {
  border-color: DarkSlateGray;
}
.onion-container .onion .layer#layer-33 {
  border-color: rgba(255, 255, 255, 0.99);
}
.onion-container .onion .layer#layer-33.hover {
  border-color: CornFlowerBlue;
}
.onion-container .onion .layer#layer-34 {
  border-color: white;
}
.onion-container .onion .layer#layer-34.hover {
  border-color: OliveDrab;
}
.onion-container .onion .layer#layer-35 {
  border-color: white;
}
.onion-container .onion .layer#layer-35.hover {
  border-color: LightCoral;
}
.onion-container .onion .layer#layer-36 {
  border-color: white;
}
.onion-container .onion .layer#layer-36.hover {
  border-color: LightSteelBlue;
}
.onion-container .onion .layer#layer-37 {
  border-color: white;
}
.onion-container .onion .layer#layer-37.hover {
  border-color: Thistle;
}
.onion-container .onion .layer#layer-38 {
  border-color: white;
}
.onion-container .onion .layer#layer-38.hover {
  border-color: DarkGray;
}
@media screen and (max-width: 480px) {
  .onion-container .onion .layer {
    border-top-width: 12px;
    border-bottom-width: 0;
  }
}

button.peel-button {
  position: fixed;
  bottom: 2em;
  left: 2em;
  width: 5em;
  height: 5em;
  border-radius: 50%;
  z-index: 100;
  padding: 5px 8px;
  cursor: pointer;
  background: white;
  transition: background ease-out 0.1s;
  display: block;
}
@media screen and (max-width: 480px) {
  button.peel-button {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2em;
    border-radius: 0;
  }
}
button.peel-button.hidden {
  display: none;
}

section {
  display: none;
  width: 100%;
}
section.current {
  position: relative;
  display: block;
}
section.current + section {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -2;
}
section.current .section-color-backdrop {
  opacity: 0.95;
}
section .section-color-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
}
section .section-color-edges {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}
@media screen and (max-width: 480px) {
  section .section-color-edges {
    bottom: 2em;
  }
}
section .section-content {
  width: 100%;
  overflow-x: hidden;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
@media screen and (max-width: 800px) {
  section .section-content {
    padding-top: 8em !important;
  }
}
section .section-content article {
  width: calc(100% - 4em);
  max-width: 600px;
  margin-bottom: 4em;
}
@media screen and (max-width: 480px) {
  section .section-content article {
    width: calc(100% - 2em);
  }
}
section .section-content article h2 {
  line-height: 1.166;
}
section .section-content article figure {
  margin: 0;
}
section .section-content article figure img {
  max-width: 100%;
}
section .section-content article figure figcaption {
  font-size: 0.8333em;
  margin-bottom: 1.5em;
}
section .section-content article figure.illustration {
  padding: 0 2em;
}
section .section-content article figure.illustration.twenty-one {
  padding: 1em 5em 0;
}
@media screen and (max-width: 480px) {
  section .section-content article figure.illustration {
    padding: 0;
  }
}
section .section-content article .text-footer {
  font-style: italic;
  margin-top: 2em;
}
section .section-content article .response {
  margin-top: 4em;
  margin-bottom: 4em;
  font-size: 0.8333em;
  line-height: 1.1666;
}
section .section-content article .excerpts, section .section-content article .side-content {
  float: right;
  margin-right: calc(100% - 100vw + 4em);
  max-width: 600px;
  margin-top: 4em;
  margin-bottom: 4em;
  font-family: serif;
}
section .section-content article .marginalia {
  float: left;
  max-width: 600px;
  margin-bottom: 4em;
  margin-left: 4em;
}
section .section-content.placement_center {
  min-height: 100vh;
  padding: 2em 0 2em;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 480px) {
  section .section-content.placement_center {
    padding: 4em 0 1em;
  }
}
section .section-content.placement_center article figure.illustration {
  margin: 0;
}
section .section-content.placement_top article {
  padding-top: 6em;
}
@media screen and (max-width: 480px) {
  section .section-content.placement_top article {
    padding-top: 4em;
  }
}
section .section-content.placement_left article {
  margin-left: 2em;
  margin-right: auto;
  margin-bottom: 10em;
  padding-top: 20em;
}
section .section-content.placement_left article p:before, section .section-content.placement_left article h2:before {
  content: "";
  width: 6em;
  display: block;
  overflow: hidden;
}
section .section-content.placement_left article figure.illustration {
  float: right;
  margin: 0;
  margin-right: calc(100% - 100vw + 4em);
  margin-top: -16em;
  width: 100%;
}
@media screen and (max-width: 480px) {
  section .section-content.placement_left article {
    margin-left: 1em;
    padding-top: 4em;
  }
  section .section-content.placement_left article figure.illustration {
    float: none;
    margin: 0;
  }
}
section .section-content.placement_right article {
  margin-right: 2em;
  margin-left: auto;
  padding-top: 20em;
}
section .section-content.placement_right article p:before, section .section-content.placement_right article h2:before {
  content: "";
  width: 6em;
  display: block;
  overflow: hidden;
}
section .section-content.placement_right article figure.illustration {
  float: left;
  margin: 0;
  margin-left: calc(100% - 100vw + 4em);
  margin-top: -16em;
  width: 100%;
}
@media screen and (max-width: 480px) {
  section .section-content.placement_right article {
    margin-right: 1em;
    padding-top: 4em;
  }
  section .section-content.placement_right article figure.illustration {
    float: none;
    margin: 0;
  }
}

section#section-0 #sky-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  overflow: hidden;
  opacity: 0;
  transition: opacity 2s;
}
section#section-0 #sky-backdrop.shown {
  opacity: 1;
}
section#section-0 #sky-backdrop img {
  max-width: none;
  min-width: 100%;
  width: auto;
  height: 150vh;
  position: absolute;
  top: 0;
}
section#section-0 .section-content {
  padding-top: 100vh !important;
}
@media screen and (max-width: 480px) {
  section#section-0 .section-content {
    padding-top: 120vh !important;
  }
}
section#section-0 .section-content h3 {
  font-size: 1em;
  margin-top: 2em;
}
section#section-0 .section-content #about {
  position: relative;
  margin: 2em;
  margin-top: -8em;
  padding-top: 2em;
}
@media screen and (max-width: 480px) {
  section#section-0 .section-content #about {
    margin: 1em;
    margin-top: -6em;
  }
}
section#section-0 .section-content #support, section#section-0 .section-content #masthead, section#section-0 .section-content #links, section#section-0 .section-content #supporters {
  position: relative;
  margin: 2em;
}
@media screen and (max-width: 480px) {
  section#section-0 .section-content #support, section#section-0 .section-content #masthead, section#section-0 .section-content #links, section#section-0 .section-content #supporters {
    margin: 1em;
  }
}
section#section-0 .section-content #support h2, section#section-0 .section-content #masthead h2, section#section-0 .section-content #links h2, section#section-0 .section-content #supporters h2 {
  padding-top: 2em;
}
section#section-0 .section-content #contributors {
  position: relative;
  z-index: 3;
  margin: -2em 2em 0;
  padding-top: 2em;
}
@media screen and (max-width: 480px) {
  section#section-0 .section-content #contributors {
    margin: -2em 1em 0;
    padding-top: 2em;
  }
}
section#section-0 .section-content #contributors h2 {
  margin-bottom: 0;
}
section#section-0 .section-content #contributors ol {
  position: relative;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
section#section-0 .section-content #contributors ol li {
  padding-top: 2em;
  padding-bottom: 2em;
  flex: 0 0 25%;
  text-align: center;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
@media screen and (max-width: 720px) {
  section#section-0 .section-content #contributors ol li {
    flex: 0 0 50%;
  }
}
section#section-0 .section-content #contributors ol li .contributor-title {
  display: inline-block;
  padding: 0.5em;
  background: transparent;
  transition: background 0.1s linear, color 0.1s linear;
}
section#section-0 .section-content #contributors ol li figure {
  margin: 0;
  width: 100%;
}
section#section-0 .section-content #contributors ol li figure img {
  width: 100%;
  filter: drop-shadow(0 0 0 black);
  pointer-events: none;
}

section#section-1 > div.section-color-backdrop {
  background: MistyRose;
}
section#section-1 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em MistyRose;
}
@media screen and (max-width: 480px) {
  section#section-1 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em MistyRose;
  }
}
section#section-1 > div.section-content {
  color: black;
  padding: 4em 0 2em;
}

section#section-2 > div.section-color-backdrop {
  background: #b3712e;
}
section#section-2 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em #b3712e;
}
@media screen and (max-width: 480px) {
  section#section-2 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em #b3712e;
  }
}
section#section-2 > div.section-content {
  color: white;
  padding: 4em 0 2em;
}

section#section-3 > div.section-color-backdrop {
  background: RoyalBlue;
}
section#section-3 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em RoyalBlue;
}
@media screen and (max-width: 480px) {
  section#section-3 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em RoyalBlue;
  }
}
section#section-3 > div.section-content {
  color: white;
}
section#section-3 > div.section-content article figure {
  filter: invert();
}

section#section-4 > div.section-color-backdrop {
  background: Tomato;
  opacity: 0.9;
}
section#section-4 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em Tomato;
}
@media screen and (max-width: 480px) {
  section#section-4 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em Tomato;
  }
}

section#section-5 > div.section-color-backdrop {
  background: LimeGreen;
}
section#section-5 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em LimeGreen;
}
@media screen and (max-width: 480px) {
  section#section-5 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em LimeGreen;
  }
}
section#section-5 table {
  border: 1px solid #000;
  border-collapse: collapse;
}
section#section-5 table tr td {
  border: 1px solid #000;
  border-collapse: collapse;
  vertical-align: top;
  padding-bottom: 0.5em;
}
section#section-5 table tr td:first-child {
  padding-right: 0.5em;
}
section#section-5 table td {
  padding: 0.5em;
}

section#section-6 > div.section-color-backdrop {
  background: MediumAquamarine;
}
section#section-6 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em MediumAquamarine;
}
@media screen and (max-width: 480px) {
  section#section-6 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em MediumAquamarine;
  }
}

section#section-7 > div.section-color-backdrop {
  background: MidnightBlue;
}
section#section-7 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em MidnightBlue;
}
@media screen and (max-width: 480px) {
  section#section-7 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em MidnightBlue;
  }
}
section#section-7 > div.section-content {
  color: white;
}
section#section-7 > div.section-content figure {
  filter: invert();
}

section#section-8 > div.section-color-backdrop {
  background: DarkOrchid;
}
section#section-8 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em DarkOrchid;
}
@media screen and (max-width: 480px) {
  section#section-8 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em DarkOrchid;
  }
}

section#section-9 > div.section-color-backdrop {
  background: Silver;
}
section#section-9 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em Silver;
}
@media screen and (max-width: 480px) {
  section#section-9 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em Silver;
  }
}

section#section-10 > div.section-color-backdrop {
  background: WhiteSmoke;
}
section#section-10 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em WhiteSmoke;
}
@media screen and (max-width: 480px) {
  section#section-10 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em WhiteSmoke;
  }
}

section#section-11 > div.section-color-backdrop {
  background: DodgerBlue;
}
section#section-11 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em DodgerBlue;
}
@media screen and (max-width: 480px) {
  section#section-11 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em DodgerBlue;
  }
}

section#section-12 > div.section-color-backdrop {
  background: PapayaWhip;
}
section#section-12 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em PapayaWhip;
}
@media screen and (max-width: 480px) {
  section#section-12 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em PapayaWhip;
  }
}

section#section-13 > div.section-color-backdrop {
  background: LightPink;
}
section#section-13 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em LightPink;
}
@media screen and (max-width: 480px) {
  section#section-13 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em LightPink;
  }
}

section#section-14 > div.section-color-backdrop {
  background: PaleGreen;
}
section#section-14 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em PaleGreen;
}
@media screen and (max-width: 480px) {
  section#section-14 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em PaleGreen;
  }
}

section#section-15 > div.section-color-backdrop {
  background: MediumBlue;
}
section#section-15 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em MediumBlue;
}
@media screen and (max-width: 480px) {
  section#section-15 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em MediumBlue;
  }
}
section#section-15 > div.section-content {
  color: white;
}
section#section-15 > div.section-content figure {
  filter: invert();
}

section#section-16 > div.section-color-backdrop {
  background: Gold;
}
section#section-16 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em Gold;
}
@media screen and (max-width: 480px) {
  section#section-16 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em Gold;
  }
}

section#section-17 > div.section-color-backdrop {
  background: YellowGreen;
}
section#section-17 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em YellowGreen;
}
@media screen and (max-width: 480px) {
  section#section-17 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em YellowGreen;
  }
}

section#section-18 > div.section-color-backdrop {
  background: Khaki;
}
section#section-18 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em Khaki;
}
@media screen and (max-width: 480px) {
  section#section-18 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em Khaki;
  }
}

section#section-19 > div.section-color-backdrop {
  background: Coral;
}
section#section-19 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em Coral;
}
@media screen and (max-width: 480px) {
  section#section-19 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em Coral;
  }
}

section#section-20 > div.section-color-backdrop {
  background: SkyBlue;
}
section#section-20 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em SkyBlue;
}
@media screen and (max-width: 480px) {
  section#section-20 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em SkyBlue;
  }
}

section#section-21 > div.section-color-backdrop {
  background: BurlyWood;
}
section#section-21 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em BurlyWood;
}
@media screen and (max-width: 480px) {
  section#section-21 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em BurlyWood;
  }
}

section#section-21 article {
  padding-top: 8em;
}
section#section-21 .highlight {
  font-style: italic;
}
section#section-21 h3 {
  font-size: 1em;
  margin-top: 2em;
  font-weight: normal;
}

section#section-22 > div.section-color-backdrop {
  background: White;
}
section#section-22 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em White;
}
@media screen and (max-width: 480px) {
  section#section-22 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em White;
  }
}

section#section-23 > div.section-color-backdrop {
  background: SlateGray;
}
section#section-23 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em SlateGray;
}
@media screen and (max-width: 480px) {
  section#section-23 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em SlateGray;
  }
}

section#section-24 > div.section-color-backdrop {
  background: AliceBlue;
}
section#section-24 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em AliceBlue;
}
@media screen and (max-width: 480px) {
  section#section-24 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em AliceBlue;
  }
}

section#section-25 > div.section-color-backdrop {
  background: YellowGreen;
}
section#section-25 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em YellowGreen;
}
@media screen and (max-width: 480px) {
  section#section-25 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em YellowGreen;
  }
}

section#section-26 > div.section-color-backdrop {
  background: Orchid;
}
section#section-26 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em Orchid;
}
@media screen and (max-width: 480px) {
  section#section-26 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em Orchid;
  }
}

section#section-27 > div.section-color-backdrop {
  background: RosyBrown;
}
section#section-27 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em RosyBrown;
}
@media screen and (max-width: 480px) {
  section#section-27 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em RosyBrown;
  }
}

section#section-28 > div.section-color-backdrop {
  background: DimGray;
}
section#section-28 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em DimGray;
}
@media screen and (max-width: 480px) {
  section#section-28 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em DimGray;
  }
}

section#section-29 > div.section-color-backdrop {
  background: LemonChiffon;
}
section#section-29 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em LemonChiffon;
}
@media screen and (max-width: 480px) {
  section#section-29 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em LemonChiffon;
  }
}

section#section-30 > div.section-color-backdrop {
  background: DarkKhaki;
}
section#section-30 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em DarkKhaki;
}
@media screen and (max-width: 480px) {
  section#section-30 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em DarkKhaki;
  }
}

section#section-31 > div.section-color-backdrop {
  background: Chocolate;
}
section#section-31 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em Chocolate;
}
@media screen and (max-width: 480px) {
  section#section-31 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em Chocolate;
  }
}

section#section-32 > div.section-color-backdrop {
  background: DarkSlateGray;
}
section#section-32 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em DarkSlateGray;
}
@media screen and (max-width: 480px) {
  section#section-32 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em DarkSlateGray;
  }
}
section#section-32 > div.section-content {
  color: white;
}
section#section-32 > div.section-content figure {
  filter: invert();
}

section#section-33 > div.section-color-backdrop {
  background: CornflowerBlue;
}
section#section-33 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em CornflowerBlue;
}
@media screen and (max-width: 480px) {
  section#section-33 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em CornflowerBlue;
  }
}

section#section-34 > div.section-color-backdrop {
  background: OliveDrab;
}
section#section-34 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em OliveDrab;
}
@media screen and (max-width: 480px) {
  section#section-34 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em OliveDrab;
  }
}

section#section-35 > div.section-color-backdrop {
  background: LightCoral;
}
section#section-35 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em LightCoral;
}
@media screen and (max-width: 480px) {
  section#section-35 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em LightCoral;
  }
}

section#section-36 > div.section-color-backdrop {
  background: LightSteelBlue;
}
section#section-36 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em LightSteelBlue;
}
@media screen and (max-width: 480px) {
  section#section-36 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em LightSteelBlue;
  }
}

section#section-37 > div.section-color-backdrop {
  background: Thistle;
}
section#section-37 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em Thistle;
}
@media screen and (max-width: 480px) {
  section#section-37 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em Thistle;
  }
}

section#section-38 article {
  padding-top: 8em;
}
section#section-38 > div.section-color-backdrop {
  background: DarkGray;
}
section#section-38 > div.section-color-edges {
  box-shadow: inset 0 0 2em 1em DarkGray;
}
@media screen and (max-width: 480px) {
  section#section-38 > div.section-color-edges {
    box-shadow: inset 0 0 0.5em 0.5em DarkGray;
  }
}

.sounds {
  position: fixed;
  z-index: -100;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
}

#life-link {
  border: 1px dotted black;
  cursor: pointer;
}

#gift-modal {
  position: fixed;
  overflow: scroll;
  z-index: 200;
  top: 2em;
  left: 2em;
  right: 2em;
  bottom: 2em;
  text-align: center;
  display: none;
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
@media screen and (max-width: 480px) {
  #gift-modal {
    top: 0.78em;
    left: 0.78em;
    right: 0.78em;
    bottom: 0.78em;
  }
}
#gift-modal.on {
  display: block;
  height: calc(100vh - 4em);
}
#gift-modal p {
  margin: 1em 2.5em;
}
@media screen and (max-width: 480px) {
  #gift-modal p {
    margin: 1em 0;
  }
}
#gift-modal .inside {
  background: white;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  padding: 1em;
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
@media screen and (max-width: 480px) {
  #gift-modal .inside {
    display: block;
  }
}
#gift-modal .inside button {
  margin-top: 0.5em;
  cursor: pointer;
  background-color: MistyRose;
  border: 1px dotted black;
  padding: 1em;
  width: 150px;
  height: 150px;
  border-radius: 50%;
}
#gift-modal .inside button:hover {
  border-style: solid;
  background-color: white;
}
#gift-modal .inside button#gift-back {
  width: auto;
  height: auto;
  border-radius: 0;
}
@media screen and (max-width: 480px) {
  #gift-modal .inside button {
    width: auto;
    height: auto;
    border-radius: 0;
    padding: 0.25em 0.5em !important;
  }
}

#sun-modal, #water-modal, #nutrients-modal, #thank-modal {
  position: absolute;
  z-index: 300;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  text-align: center;
  background: MistyRose;
  border: 1px dotted black;
  padding: 1em;
  min-height: calc(100vh - 4em);
  display: none;
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#sun-modal h2, #water-modal h2, #nutrients-modal h2, #thank-modal h2 {
  position: absolute;
  top: 2em;
  left: 2em;
  font-weight: normal;
  font-size: 1em;
  margin: 0;
}
@media screen and (max-width: 480px) {
  #sun-modal h2, #water-modal h2, #nutrients-modal h2, #thank-modal h2 {
    top: 0.8em;
    left: 0.8em;
  }
}
#sun-modal small, #water-modal small, #nutrients-modal small, #thank-modal small {
  max-width: 625px;
  margin: 0 auto;
  display: block;
  font-size: 0.7em;
  line-height: 1.3;
}
#sun-modal.on, #water-modal.on, #nutrients-modal.on, #thank-modal.on {
  display: block;
}
#sun-modal form, #water-modal form, #nutrients-modal form, #thank-modal form {
  max-width: 480px;
  margin: 2em auto;
}
#sun-modal form label, #water-modal form label, #nutrients-modal form label, #thank-modal form label {
  font-size: 0.7em;
  display: block;
  text-align: left;
  margin-bottom: 0.25em;
}
#sun-modal form span, #water-modal form span, #nutrients-modal form span, #thank-modal form span {
  margin-bottom: 1em;
  float: left;
  width: calc(50% - 0.5em);
}
#sun-modal form span.left, #water-modal form span.left, #nutrients-modal form span.left, #thank-modal form span.left {
  margin-right: 1em;
}
#sun-modal form span.email, #sun-modal form span.full, #water-modal form span.email, #water-modal form span.full, #nutrients-modal form span.email, #nutrients-modal form span.full, #thank-modal form span.email, #thank-modal form span.full {
  display: block;
  width: 100%;
}
#sun-modal form span.email input, #sun-modal form span.full input, #water-modal form span.email input, #water-modal form span.full input, #nutrients-modal form span.email input, #nutrients-modal form span.full input, #thank-modal form span.email input, #thank-modal form span.full input {
  width: 100%;
}
#sun-modal form span.slider, #water-modal form span.slider, #nutrients-modal form span.slider, #thank-modal form span.slider {
  width: 100%;
  float: none;
  padding: 0;
  border: 0;
  background: transparent;
}
#sun-modal form span.slider input, #water-modal form span.slider input, #nutrients-modal form span.slider input, #thank-modal form span.slider input {
  border: 0;
  border-top: 1px solid black;
  background: transparent;
}
#sun-modal form span.amounts, #sun-modal form span.credit-card, #sun-modal form span.gift, #water-modal form span.amounts, #water-modal form span.credit-card, #water-modal form span.gift, #nutrients-modal form span.amounts, #nutrients-modal form span.credit-card, #nutrients-modal form span.gift, #thank-modal form span.amounts, #thank-modal form span.credit-card, #thank-modal form span.gift {
  display: block;
  float: none;
  width: 100%;
}
#sun-modal form span.amounts, #water-modal form span.amounts, #nutrients-modal form span.amounts, #thank-modal form span.amounts {
  text-align: left;
}
#sun-modal form span.credit-card, #water-modal form span.credit-card, #nutrients-modal form span.credit-card, #thank-modal form span.credit-card {
  text-align: left;
}
#sun-modal form span p.prompt, #water-modal form span p.prompt, #nutrients-modal form span p.prompt, #thank-modal form span p.prompt {
  font-size: 0.7em;
  text-align: left;
  line-height: 1.3;
  margin: 1em 0;
  font-style: italic;
}
#sun-modal .submit-button-container, #water-modal .submit-button-container, #nutrients-modal .submit-button-container, #thank-modal .submit-button-container {
  max-width: 480px;
  margin: 2em auto;
  text-align: left;
}
#sun-modal .submit-button-container small, #water-modal .submit-button-container small, #nutrients-modal .submit-button-container small, #thank-modal .submit-button-container small {
  text-align: left;
  float: left;
  width: calc(100% - 150px - 2.5em);
  max-width: auto;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
}
#sun-modal .submit-button-container button.submit, #water-modal .submit-button-container button.submit, #nutrients-modal .submit-button-container button.submit, #thank-modal .submit-button-container button.submit {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  float: left;
  margin-right: 1.5em;
}
@media screen and (max-width: 480px) {
  #sun-modal, #water-modal, #nutrients-modal, #thank-modal {
    width: auto;
    height: auto;
    border-radius: 0%;
    height: auto;
    border: 1px dotted black;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
  }
}

#thank-modal.on {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
}

input, textarea {
  outline: none;
  border: 1px solid #000;
  font-family: monospace;
  font-size: 1em;
  width: 100%;
  padding: 0.25em 0.5em !important;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 1px;
  background: #000;
  border: 0;
  outline: none;
  padding: 0 !important;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background: #FFF;
  border: 1px solid #000;
  cursor: pointer;
}
.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #FFF;
  border: 1px solid #000;
  cursor: pointer;
}

img.icon {
  width: 200px;
}

button.submit, button.water {
  cursor: pointer;
  border: 1px dotted black;
}

button.submit:hover, button.water:hover, button.water:focus {
  border-style: solid;
}

button.water input {
  width: 50px;
  border: 0;
  border-bottom: 1px solid #000;
  background-color: transparent;
  color: #000;
}

button.water:hover input, button.water:focus input {
  border-bottom: 1px solid #FFF;
  color: #FFF;
}

textarea {
  resize: vertical;
}

button.back, button.water, button.amount-button {
  padding: 0.25em 0.5em !important;
  border: 1px dotted black;
  margin-top: 2em;
  display: inline-block;
  cursor: pointer;
}

button.back:hover {
  border-style: solid;
}

button.water, button.amount-button {
  margin-top: 0;
}

button.amount-button {
  margin-bottom: 1em;
}

button.amount-button.current {
  border: 1px solid black;
  background: black;
  color: white;
}

#card-errors {
  font-size: 0.7em;
  margin-top: 0.25em;
  color: black;
  padding: 0.1em;
}

.reason {
  display: none;
  margin-top: 0.25em;
}

.life-link {
  cursor: pointer;
  border-bottom: 1px solid black;
}

.link {
  border-bottom: 1px solid white;
}

.divider-star {
  margin: 2em 0;
}

.what-it-is {
  font-size: 0.7em;
}

h3 {
  font-size: 1.5em;
  margin-top: 3em;
}

.clearer {
  clear: both;
}

#contributors-iframe {
  border: 0;
  width: 100%;
  overflow: hidden;
}

.supporters-link {
  border-bottom: 1px solid black;
  cursor: pointer;
}

li.water {
  border-style: dashed;
}

li.nutrients {
  border-style: solid;
}

body.frozen {
  overflow: hidden;
}

#sun-water-nutrients {
  display: flex;
}
@media screen and (max-width: 800px) {
  #sun-water-nutrients {
    display: block;
  }
}
#sun-water-nutrients .support {
  width: 33.333%;
  margin-right: 1em;
}
#sun-water-nutrients .support:nth-child(3) {
  margin-right: 0;
}
@media screen and (max-width: 800px) {
  #sun-water-nutrients .support {
    width: 100%;
    margin-right: 0;
  }
}

#jump-2020, #jump-2021 {
  cursor: pointer;
  text-decoration: underline;
}

a.back {
  padding: 0.25em 0.5em;
  border: 1px dotted black;
  margin-top: 2em;
  display: inline-block;
  text-decoration: none;
}

#thank-modal.completed-charge {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 480px) {
  #thank-modal.completed-charge {
    display: block;
  }
}

/* PHASE 1 */
section,
header nav,
header h1,
button.peel-button,
.onion-container {
  filter: blur(2px);
  opacity: 0.95;
}

/* PHASE 2 */
section,
header nav,
header h1,
button.peel-button,
.onion-container {
  filter: blur(5px) saturate(90%);
  opacity: 0.85;
}

/* PHASE 3 */
section,
header nav,
header h1,
button.peel-button,
.onion-container {
  filter: blur(12px) saturate(70%);
  opacity: 0.6;
}

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