@font-face {
  font-family: My Optima;
  font-style: normal;
  font-weight: normal;
  src: url(Optima-Regular.eot) format("embedded-opentype"),
    url(Optima-Regular.woff) format("woff")}

@font-face {
  font-family: My Optima;
  font-style: normal;
  font-weight: 700;
  src: url(Optima-Bold.eot) format("embedded-opentype"),
    url(Optima-Bold.woff) format("woff")}

@font-face {
  font-family: My Optima;
  font-style: oblique;
  font-weight: normal;
  src: url(Optima-Italic.eot) format("embedded-opentype"),
    url(Optima-Italic.woff) format("woff")}

@font-face {
  font-family: My Optima;
  font-style: oblique;
  font-weight: 700;
  src: url(Optima-BoldItalic.eot) format("embedded-opentype"),
    url(Optima-BoldItalic.woff) format("woff")}

@font-face {
  font-family: My Optima;
  font-style: normal;
  font-weight: 900;
  src: url(Optima-ExtraBlack.eot) format("embedded-opentype"),
    url(Optima-ExtraBlack.woff) format("woff")}

@font-face {
  font-family: My PecitaBook;
  src: url(Pecita.eot) format("embedded-opentype"),
    url(Pecita.woff) format("woff"),
    url(Pecita.otf) format("opentype")}

@font-face {
  font-family: Dancing Script;
  src: url(DancingScript-Regular.eot) format("embedded-opentype"),
    url(DancingScript-Regular.woff) format("woff"),
    url(DancingScript-Regular.otf) format("opentype")}

@font-face {
  font-family: My Garamond;
  font-style: normal;
  font-weight: normal;
  src: url(AGaramondPro-Regular.eot) format("embedded-opentype"),
    url(AGaramondPro-Regular.woff) format("woff")}

@font-face {
  font-family: My Garamond;
  font-style: normal;
  font-weight: bold;
  src: url(AGaramondPro-Bold.eot) format("embedded-opentype"),
    url(AGaramondPro-Bold.woff) format("woff")}

@font-face {
  font-family: My Garamond;
  font-style: italic;
  font-weight: normal;
  src: url(AGaramondPro-Italic.eot) format("embedded-opentype"),
    url(AGaramondPro-Italic.woff) format("woff")}

@font-face {
  font-family: My Garamond;
  font-style: italic;
  font-weight: bold;
  src: url(AGaramondPro-BoldItalic.eot) format("embedded-opentype"),
    url(AGaramondPro-BoldItalic.woff) format("woff")}

html {color: black; background: #F9F9FA; quotes: "‘" "’" "“" "”";
  font: 1.126em/1.4 Optima, My Optima, sans-serif;
  font-size-adjust: 0.485}
body {background: transparent; margin: 7em 1em 1em 1em}
main {display: block; font-size: 1.2em; min-height: calc(100vh - 12.58rem);
  max-width: 40em}
nav {display: block}
address {margin: 3em 0 1em 0}
h1 {margin: 1.33em 0 0.33em 0;
  font: 400 2.33em/1.33 Impact, Arial Black, Helvetica Black, sans-serif}
h1 {text-align: center}
h2 {margin: 3.5em 0 1em 2em; text-align: right; line-height: 1.3}
p, dd, li {text-align: justify; hyphens: auto}
p {margin: 0.8em 0 0 0}
p + p {text-indent: 2em; margin-top: 0}
p.mtb {margin: 0.8em 0 0 0; text-indent: 0}
td p:first-child {margin: 0}
ul {padding-left: 1em}
li {padding-left: 1em}
a {text-decoration: none}
a:link {color: red}
a:visited {color: hsl(0,50%,50%)}
a:hover {background-color: hsl(60,100%,70%)}
blockquote {margin: 0.75em 0 0.75em 2em}
img {max-width: 100%}
.fallback {display: none}	/* Text that isn't needed when CSS is applied */
dt {display: run-in; font-weight: bold; margin-top: 0.8em}
dt::before {content: "▸"; margin-right: 0.33em}
dd {margin: 0 0 0.8em 0}
figure, section {display: block}
sup, sup {line-height: 0.2}

figure.sidefigure {float: left; width: auto; max-width: 35%;
  margin: 0.5em 1em 0.5em 0}
p + figure.sidefigure + p {text-indent: 2em; margin-top: 0}

figure {display: table; table-layout: fixed; width: 100%; margin: 1.58em auto;
  text-align: center}
figcaption {display: table-caption; caption-side: bottom; font-style: italic;
  margin: 1em 1em 0 1em; font-size: 0.833em}
figure img {vertical-align: bottom}

aside {line-height: 1.4; font-size: 90%; text-align: left; clear: left;
  background: hsla(90,50%,85%,0.75); color: hsl(90,90%,15%);
  border-radius: 0.5em; font-style: italic; margin: 1em 0; padding: 0.3em 0.4em}
aside p {text-align: left}
aside > *:first-child {margin-top: 0}
aside > *:last-child {margin-bottom: 0}

/* The navigation menu is put at the top, even though it at the end of
the source. Make it almost invisible a few seconds after loading the page
(#ddd on white) unless it is hovered or active */
nav {position: absolute; top: 0; left: 1em; right: 1em; height: 5em;
  padding-top: 1em; transition: 0.5s; animation: make-white 10s}
nav:not(:hover) {color: #ddd; transition: 1s 3s}
nav :link, nav :visited {color: inherit}
nav:focus, nav:active, nav :focus {color: black}
nav ul {display: table; border-collapse: collapse; border: hidden; margin: auto}
nav li {display: table-cell; padding: 0 1em; border: thin solid;
  line-height: 1.2; vertical-align: bottom; text-align: center}
nav li:first-child {padding-left: 0}
nav li:last-child {padding-right: 0}
li.cur a {opacity: 0.3}
.toc {-moz-columns: 14em; columns: 14em; padding: 0}
.toc li {padding: 0; list-style: decimal; margin-left: 1em; text-align: left}

@keyframes make-white {
  0% {color: black}
  80% {color: black}  
  100% {color: #ddd}
}

.e-mail {font-family: Prestige Elite Std, Courier New, Courier, monospace;
  font-size-adjust: 0.42}
.e-mail p {text-align: left}

head {display: block}
head > * {display: none}
title {display: block; color: #ccc; color: hsla(0,0%,0%,.1); position: absolute;
  font: bold 4em/1.1 Garamond Premier Pro, Adobe Garamond Pro, Garamond Pro,
    Garamond, My Garamond, serif; max-width: 17em;
  text-align: center; z-index: -1; bottom: auto; top: 7.5rem; left: 0; right: 0;
}

footer {display: none}
footer > img {position: fixed; width: inherit; left: inherit; top: 1em}

/* If the viewport is narrow, reduce the line height a bit */
@media all and (max-width: 50em) {
  html {line-height: 1.3}
}

/* If the viewport is even narrower, make the nav menu more compact
and don't make it fade */
@media all and (max-width: 30em) {
  nav {transition: none; animation: none}
  nav:not(:hover) {color: #888; transition: none}
  nav ul {display: block; text-align: center}
  nav li {display: inline; border: none; padding: 0; white-space: nowrap}
  nav li + li::before {content: " | "; white-space: normal}
}

/* If there is room, put the footer image on the left */
@media all and (min-width: 55em) {
  footer {display: block; position: fixed; left: 1em; width: 15em; bottom: 1em}
  main, nav, address, title {margin-left: 16rem}
}

/* If there is even more room, leave a margin on the right where the
<aside>s can be put */
@media all and (min-width: 65em) {
  title {margin: 0 4rem 0 7rem}
  main, nav {margin-right: 13rem}
  aside {float: right; clear: right; width: 11rem; margin: 0 -13.1rem 0.6em 0;
    font: normal 1em/1.4 PecitaBook, My PecitaBook, cursive;
    font-feature-settings: "calt" on, "liga" on, "rlig" on; text-indent: 0.2em;
    font-size-adjust: 0.33; color: hsl(240,100%,40%); padding: 0;
    background: none; position: relative; transform: rotate(-4deg)}
  aside:nth-of-type(8n+1) {transform: rotate(2deg); text-indent: -0.1em}
  aside:nth-of-type(8n+2) {transform: rotate(-5deg); text-indent: 0.3em}
  aside:nth-of-type(8n+3) {transform: rotate(3deg); text-indent: -0.3em}
  aside:nth-of-type(8n+4) {transform: rotate(-2deg); text-indent: 0.1em}
  aside:nth-of-type(8n+5) {transform: rotate(-1deg); text-indent: -0.0em}
  aside:nth-of-type(8n+6) {transform: rotate(4deg); text-indent: -0.1em}
  aside:nth-of-type(8n+7) {transform: rotate(1deg); text-indent: 0.4em}
  p + aside + p {text-indent: 2em; margin-top: 0}
  aside a:link, aside a:visited {color: inherit; text-decoration: underline}

  @supports (transform: rotate(2deg)) {
    section {padding: 1em; position: relative;
      box-shadow: 1px 3px 6px #555; background: white}
    section + section {margin-top: -1px}
    section:nth-child(3n+2) {transform: rotate(2deg)}
    section:nth-child(3n+1) {transform: rotate(1deg)}
    section:nth-child(3n) {transform: rotate(-1deg)}
  }
}

/* Even wider? Make the <aside>s wider. */
@media all and (min-width: 75em) {
  title {margin-right: 9rem}
  main, nav {margin-right: 18rem}
  aside {width: 16rem; margin-right: -18.1rem}
}
@media all and (min-width: 90em) {
  title {margin-right: 14rem}
  main, nav {margin-right: 23rem}
  aside {width: 21rem; margin-right: -23.1rem}
}

/* The animated balloons are based on the work of Aurore Dechamps */

.balloon {
    display: block;
    width: 15em;
    height: 43em;
    margin: 0 auto;
    position: relative;
}
.balloon > span {
    width: 57%;
    height: 22%;
    background: rgba(182, 15, 97, 0.9);
    border-radius: 80% 80% 80% 80%;
    margin: 0 auto;
    position: absolute;
    box-shadow: inset -0.6em -1.4em 2.625em rgba(0, 0, 0, 0.15);
    -webkit-transform-origin: bottom center;
}
.balloon > span:nth-child(4) {	/* "2" */
    background: rgba(182, 15, 97, 0.9);
    top: 1em;
    left: 0;
    -webkit-animation: balloon1 6.1s ease-in-out infinite;
    -moz-animation: balloon1 6.1s ease-in-out infinite;
    -o-animation: balloon1 6.1s ease-in-out infinite;
    animation: balloon1 6.1s ease-in-out infinite;
}
.balloon > span:nth-child(4):before {
    color: rgba(182, 15, 97, 0.9);
}
.balloon > span:nth-child(5) {	/* "0" */
    background: rgba(242, 112, 45, 0.9);
    top: 5em;
    left: 6em;
    -webkit-animation: balloon2 6s ease-in-out infinite;
    -moz-animation: balloon2 6s ease-in-out infinite;
    -o-animation: balloon2 6s ease-in-out infinite;
    animation: balloon2 6s ease-in-out infinite;
}
.balloon > span:nth-child(5):before {
    color: rgba(242, 112, 45, 0.9);
}
.balloon > span:nth-child(1) { 	/* "C" */
    background: rgba(45, 181, 167, 0.9);
    top: 14em;
    left: 1em;
    -webkit-animation: balloon4 6.2s ease-in-out infinite;
    -moz-animation: balloon4 6.2s ease-in-out infinite;
    -o-animation: balloon4 6.2s ease-in-out infinite;
    animation: balloon4 6.2s ease-in-out infinite;
}
.balloon > span:nth-child(1):before {
    color: rgba(45, 181, 167, 0.9);
}
.balloon > span:nth-child(2) {	/* "S" */
    background: rgba(190, 61, 244, 0.9);
    top: 22em;
    left: 4em;
    -webkit-animation: balloon1 5s ease-in-out infinite;
    -moz-animation: balloon1 5s ease-in-out infinite;
    -o-animation: balloon1 5s ease-in-out infinite;
    animation: balloon1 5s ease-in-out infinite;
}
.balloon > span:nth-child(2):before {
    color: rgba(190, 61, 244, 0.9);
}
.balloon > span:nth-child(3) {	/* "S" */
    background: rgba(180, 224, 67, 0.9);
    top: 26em;
    left: 1em;
    -webkit-animation: balloon3 5.1s ease-in-out infinite;
    -moz-animation: balloon3 5.1s ease-in-out infinite;
    -o-animation: balloon3 5.1s ease-in-out infinite;
    animation: balloon3 5.1s ease-in-out infinite;
}
.balloon > span:nth-child(3):before {
    color: rgba(180, 224, 67, 0.9);
}
.balloon > span:nth-child(6) {	/* "!" */
    background: rgba(242, 194, 58, 0.9);
    top: 34em;
    left: 6em;
    -webkit-animation: balloon2 3.1s ease-in-out infinite;
    -moz-animation: balloon2 3.1s ease-in-out infinite;
    -o-animation: balloon2 3.1s ease-in-out infinite;
    animation: balloon2 3.1s ease-in-out infinite;
}
.balloon > span:nth-child(6):before {
    color: rgba(242, 194, 58, 0.9);
}
.balloon > span:before {
    color: rgba(182, 15, 97, 0.9);
    position: absolute;
    bottom: -0.6em;
    left: 3.25em;
    content:"▲";
    line-height: 1;
}
.balloon > span > span {
    font-size: 4.8em;
    color: white;
    position: relative;
    top: 0.13em;
    left: 50%;
    margin-left: -0.352em;
}
/*BALLOON 1 4*/
@-webkit-keyframes balloon1 {
    0%, 100% {-webkit-transform: translateY(0) rotate(-6deg)}
    50% {-webkit-transform: translateY(-1.25em) rotate(8deg)}
}
@-moz-keyframes balloon1 {
    0%, 100% {-moz-transform: translateY(0) rotate(-6deg)}
    50% {-moz-transform: translateY(-1.25em) rotate(8deg)}
}
@-o-keyframes balloon1 {
    0%, 100% {-o-transform: translateY(0) rotate(-6deg)}
    50% {-o-transform: translateY(-1.25em) rotate(8deg)}
}
@keyframes balloon1 {
    0%, 100% {transform: translateY(0) rotate(-6deg)}
    50% {transform: translateY(-1.25em) rotate(8deg)}
}
/* BALLOON 2 5*/
@-webkit-keyframes balloon2 {
    0%, 100% {-webkit-transform: translateY(0) rotate(6eg)}
    50% {-webkit-transform: translateY(-1.875em) rotate(-8deg)}
}
@-moz-keyframes balloon2 {
    0%, 100% {-moz-transform: translateY(0) rotate(6deg)}
    50% {-moz-transform: translateY(-1.875em) rotate(-8deg)}
}
@-o-keyframes balloon2 {
    0%, 100% {-o-transform: translateY(0) rotate(6deg)}
    50% {-o-transform: translateY(-1.875em) rotate(-8deg)}
}
@keyframes balloon2 {
    0%, 100% {transform: translateY(0) rotate(6deg)}
    50% {transform: translateY(-1.875em) rotate(-8deg)}
}
/* BALLOON 0*/
@-webkit-keyframes balloon3 {
    0%, 100% {-webkit-transform: translate(0, -0.625em) rotate(6eg)}
    50% {-webkit-transform: translate(-1.25em, 1.875em) rotate(-8deg)}
}
@-moz-keyframes balloon3 {
    0%, 100% {-moz-transform: translate(0, -0.625em) rotate(6eg)}
    50% {-moz-transform: translate(-1.25em, 1.875em) rotate(-8deg)}
}
@-o-keyframes balloon3 {
    0%, 100% {-o-transform: translate(0, -0.625em) rotate(6eg)}
    50% {-o-transform: translate(-1.25em, 1.875em) rotate(-8deg)}
}
@keyframes balloon3 {
    0%, 100% {transform: translate(0, -0.625em) rotate(6eg)}
    50% {transform: translate(-1.25em, 1.875em) rotate(-8deg)}
}
/* BAllOON 3*/
@-webkit-keyframes balloon4 {
    0%, 100% {-webkit-transform: translate(0.625em, -0.625em) rotate(-8eg)}
    50% {-webkit-transform: translate(-0.9375em, 1.25em) rotate(10deg)}
}
@-moz-keyframes balloon4 {
    0%, 100% {-moz-transform: translate(0.625em, -0.625em) rotate(-8eg)}
    50% {-moz-transform: translate(-0.9375em, 0.625em) rotate(10deg)}
}
@-o-keyframes balloon4 {
    0%, 100% {-o-transform: translate(0.625em, -0.625em) rotate(-8eg)}
    50% {-o-transform: translate(-0.9375em, 0.625em) rotate(10deg)}
}
@keyframes balloon4 {
    0%, 100% {transform: translate(0.625em, -0.625em) rotate(-8eg)}
    50% {transform: translate(-0.9375em, 0.625em) rotate(10deg)}
}

/* The checkbox with id=stop controls either whether the balloons
animate or which of the two images that follow it is displayed. (The
firstimage is assumed to be an animated gif, the second a static
image. */
#stop {display: none}

/* Toggle animating */
#stop:checked ~ * > * {animation-play-state: paused}
#stop:checked ~ p > label {text-decoration: line-through}
#stop ~ p > label::before {content: "[stop animation]"}
#stop ~ p > label {color: rgb(234, 177, 15);
  animation: rainbow 10s linear infinite}

/* Toggle two images */
#stop + img {display: block}
#stop + img + img {display: none}
#stop:checked + img {display: none}
#stop:checked + img + img {display: block}
	  
@keyframes rainbow {
    0%, 100% {color: rgb(135, 11, 72)}
    16.7% {color: rgb(222, 85, 14)}
    33.3% {color: rgb(35, 140, 129)}
    50% {color: rgb(173, 14, 240)}
    66.7% {color: rgb(158, 206, 34)}
    83.3% {color: rgb(234, 177, 15)}
}

/* If the window isn't very tall, make the balloons smaller */
@media all and (max-height: 54em) { .balloon {font-size: .96em} }
@media all and (max-height: 52em) { .balloon {font-size: .92em} }
@media all and (max-height: 50em) { .balloon {font-size: .89em} }
@media all and (max-height: 48em) { .balloon {font-size: .85em} }
@media all and (max-height: 46em) { .balloon {font-size: .82em} }
@media all and (max-height: 44em) { .balloon {font-size: .78em} }
@media all and (max-height: 42em) { .balloon {font-size: .75em} }
@media all and (max-height: 40em) { .balloon {font-size: .71em} }
@media all and (max-height: 38em) { .balloon {font-size: .67em} }
@media all and (max-height: 36em) { .balloon {font-size: .64em} }
@media all and (max-height: 34em) { .balloon {font-size: .60em} }
@media all and (max-height: 32em) { .balloon {font-size: .57em} }
@media all and (max-height: 30em) { .balloon {font-size: .53em} }
@media all and (max-height: 28em) { .balloon {font-size: .50em} }
@media all and (max-height: 26em) { .balloon {font-size: .46em} }
@media all and (max-height: 24em) { .balloon {font-size: .42em} }
@media all and (max-height: 22em) { .balloon {font-size: .39em} }
@media all and (max-height: 20em) { .balloon {font-size: .35em} }
@media all and (max-height: 18em) { .balloon {font-size: .32em} }
@media all and (max-height: 16em) { .balloon {font-size: .28em} }
@media all and (max-height: 14em) { .balloon {font-size: .25em} }
@media all and (max-height: 12em) { .balloon {font-size: .21em} }

/* The navigation menu is hidden in print */
@media print {
  nav {display: none}
  abbr {text-decoration: none}
}