@charset "UTF-8";

/* General Notes: */

@font-face {
  font-family: 'Inconsolata';
  src: url('Inconsolata.otf');
  }

@font-face {
  font-family: 'Goudy Stout';
  src: url('goudysto-webfont.woff2') format('woff2'),
       url('goudysto-webfont.woff') format('woff');
}

.navbar {
   position: fixed;
   bottom: 10%;
   width: 100%;
}

.navbar span {
  display: block;
  text-align: center;
  color: blue;
  text-decoration: none;
}

.navbar a, a:hover, a:focus, a:active {
  text-decoration: none;
  color: inherit;
}

.navbar a {
  text-decoration: none;
}

.navbar a:hover {
  text-decoration: underline; 
  color: black;
}

.navbar a.active {
  color: red;
   text-decoration: none; 
}

/* special styles for poem 13.8.9 */

#thirteeneightnine {
  font-family: Calibiri;
  font-size: 70%;
  }
   
#thirteenninenine {
  font-family: 'Arial narrow'; 
  font-size: 57%;
  }

/* special styles for 15.7-9 */

.ellipse1 {
  height: 2.2em;
  width: 3.6em;
  border: 2px solid #000; 
  border-radius: 50%;
  position: absolute;
  top: 10.73em;
  left: 18.5em;  
}

.ellipse2 {
  height: 2.2em;
  width: 3.6em;
  border: 2px solid #000; 
  border-radius: 50%;
  position: absolute;
  top: 10.73em;
  left: 22em;  
}

.ellipse3 {
  height: 2.2em;
  width: 3.6em;
  border: 2px solid #000; 
  border-radius: 50%;
  position: absolute;
  top: 12.25em;
  left: 20em;  
}

/* special styles for poem 22.2-22.9 */

.antiquatable {
  font-family: cursive;
  font-size: 75%;
  }

.new {
  font-family: 'Courier new';
  font-size: 75%;
  }

/* special style for poem 24.2-9 */

.goudy {
  font-family: 'Goudy Stout';
  font-size: 70%;
}

/* special style for poem 26.7-9 and 79 */

.whiteletters {
  color: #fff;
}

/* special styles for poem 28 */

.twentyeightoffwhite {
  color: rgb(251, 228, 213);
}

.twentyeightorange {
  color: rgb(255, 192, 0);
}

.twentyeightred {
  color: rgb(255, 0, 0);
}

.twentyeightdarkerorange {
  color: rgb(196, 89, 17);
}

/* special styles for poem 34 */

.thirtyfouryellow {
  color: rgb(255, 255, 0);
}

.thirtyfourpurple {
  color: rgb(112, 48, 160);
}

.thirtyfouryellowblack {
  color: rgb(255, 255, 0);
  background-color: rgb(0, 0, 0);
}

.thirtyfourblackblack {
  background-color: rgb(0, 0, 0);
}

.thirtyfourpurpleblack {
  color: rgb(112, 48, 160);
  background-color: rgb(0, 0, 0);
}

.thirtyfourwhiteblack {
  color: rgb(255, 255, 255);  
  background-color: rgb(0, 0, 0);
}

.thirtyfourred {
  color: rgb(255, 0, 0);
}

/* special style for 40.9, 48.4, 51, 71, 87, 89, 90, 91 */

.koreanshort {
  font-size: 80%;
}

/* special style for 47.8-9 */

.fortysevenwhite {
  color: rgb(255, 255, 255);
}

/* special styles for 52 and 82*/

.underline {
  text-decoration: underline;
}

#heavyunderline {
  border-bottom: 4px solid;
}

/* special styles for 53.5-9 */
/* Turn the rectangular border into a cloud-like irregular border (if possible). But actually, the rectilinear border is better because it imitates the II and pi in the poem. It may also imitate the tank in which the urchins live in the market. */

.cloud {
  width: 7em;
  position: absolute;
  top: 12em;
  left: 25em;
  border-top: 2px blue solid;
  border-right: 2px white solid;
  border-bottom: 2px blue solid;
  border-left: 2px blue solid;
}

#fullcloud {
  width: 7em;
  position: absolute;
  top: 12em;
  left: 25em;
  border-width: 2px;
  border-color: blue;
  border-style: solid;
  background-color: blue;
  color: blue;
}

.doublecloud {
  width: 8em;
  position: absolute;
  top: 12em;
  left: 25em;
  border-width: 4px;
  border-color: blue;
  border-style: double;
}

/* special style for 54.9 and 78 */

.daze {
  color: white;
  background-color: yellow;
}

/* special style for 55.1*/

#fiftyfivesmall {
  font-size: 93%;
}

/* special styles for 57 */

.filledcircle {
  font-weight: 900;
  position: absolute;
  top: 10.45em;
  left: 2.6em;
}

.filledcircle2 {
  font-weight: 900;
  position: absolute;
  top: 10.45em;
  left: 2.45em;
}

.filledcircle3 {
  font-weight: 900;
  position: absolute;
  top: 10.5em;
  left: 2.6em;
}

.filledcircle4 {
  font-weight: 900;
  position: absolute;
  top: 10.5em;
  left: 2.45em;
}

.filledcircle5 {
  font-weight: 900;
  position: absolute;
  top: 10.55em;
  left: 2.52em;
}


.xcircle {
  position: absolute;
  top: 10.45em;
  left: 2.6em;
}

.secondfilledcircle {
  font-weight: 900;
  position: absolute;
  top: 9.2em;
  left: 2.6em;
}

.secondfilledcircle2 {
  font-weight: 900;
  position: absolute;
  top: 9.2em;
  left: 2.45em;
}

.secondfilledcircle3 {
  font-weight: 900;
  position: absolute;
  top: 9.3em;
  left: 2.46em;
}

.secondfilledcircle4 {
  font-weight: 900;
  position: absolute;
  top: 9.3em;
  left: 2.58em;
}

.crossedoutwavy {
  text-decoration: line-through wavy;
}

/* special style for 58.8-9 */

.overline {
  text-decoration: overline;
}

/* special styles for 59.2-9 */

.asteriskodd2 {
  color: yellow;
}

.asteriskodd3 {
  color: black;
}

.asteriskodd4 {
  color: yellow;
}

.asteriskodd5 {
  color: black;
}

.asteriskodd6 {
  color: yellow;
}

.asteriskodd7 {
  color: black;
}

.asteriskodd8 {
  color: yellow;
}

.asteriskodd9 {
  color: black;
}

.asteriskeven2 {
  color: black;
}

.asteriskeven3 {
  color: yellow;
}

.asteriskeven4 {
  color: black;
}

.asteriskeven5 {
  color: yellow;
}

.asteriskeven6 {
  color: black;
}

.asteriskeven7 {
  color: yellow;
}

.asteriskeven8 {
  color: black;
}

.asteriskeven9 {
  color: yellow;
}

/* special style for 60.1 */

#sixtysmall {
  font-size: 93%;
}

/* special styles for 70.1 and 79 */

.yellowbackground {
  background-color: rgb(255, 255, 0);
}

.brightgreenbackground {
  background-color: rgb(124, 252, 0);
}

.turquoisebackground {
  background-color: rgb(64, 224, 208);
}

.pinkbackground {
  background-color: rgb(255, 192, 203);
}

.bluebackground {
  background-color: rgb(0, 0, 255);
}

.redbackground {
  background-color: rgb(255, 0, 0);
}

.tealbackground {
  background-color: rgb(0, 128, 128);
}

.greenbackground {
  background-color: rgb(0, 139, 0);
}

/* special styles for 72 and 76 and 77 and 78*/

.greenletters {
   color: rgb(0, 176, 80);
}

.elevenpoint {
  font-size: 93%;
}

.tenpoint {
  font-size: 86%;
}

.ninepoint {
  font-size: 79%;
}

.eightpoint {
  font-size: 72%;
}

/* special style for 73 and 77 and 78 */

.blueletters {
  color: rgb(0, 112, 192);
}

/* special style for 74 and 77 */

.purpleletters {
  color: rgb(112, 48, 160);
}

/* special style for 75 and 77 and 78 */

.yellowletters {
  color: rgb(255, 255, 0);
}

/* special styles for 77, 78, 79, and 96 */

.redletters {
  color: rgb(192, 0, 0);
}

.orangeletters {
  color: rgb(255, 192, 0);
}

/* special styles for 78 */

.lightblueletters {
  color: rgb(0, 176, 240);
}

.lychees {
  color: rgb(255, 255, 255);
  background-color: rgb(192, 0, 0);
}

.greenblack {
  color: rgb(0, 0, 0);
  background-color: rgb(124, 252, 0);
}

.porpoises {
  color: rgb(132, 150, 176);
}

.brownletters {
  color: rgb(196, 89, 17);
}

.yellowblack {
  color: rgb(255, 255, 0);
  background-color: rgb(0, 0, 0);
}

.blackred {
  color: rgb(0, 0, 0);
  background-color: rgb(192, 0, 0);
}

.chineseshort {
  font-size: 75%;
}

/* special styles for 83 */

.stencil {
  font-family: Stencil;
}

.aharoni {
  font-family: Aharoni;
}

.algerian {
  font-family: Algerian;
}

/* special style for 85 */

div.urchin {
  position: absolute;
  top: 11em;
  left: 3em;
}

/* special styles for 88 */

p.shortline {
  line-height: 80%;
}

.gray13 {
   color: rgb(13, 13, 13);
}

.gray38 {
   color: rgb(38, 38, 38);
}

.gray64 {
   color: rgb(64, 64, 64);
}

.gray89 {
   color: rgb(89, 89, 89);
}

.gray127 {
   color: rgb(127, 127, 127);
}

.gray166 {
   color: rgb(166, 166, 166);
}

.gray191 {
   color: rgb(191, 191, 191);
}

.gray217 {
   color: rgb(217, 217, 217);
}

/* special style for 96 */

.thinfont {
 font-family: 'Arial narrow'; 
}

body { font-family: Inconsolata;
  font-size: 45%;
  }

h1 {font-family: Inconsolata;
  font-size: 150%;
  }

@media screen and (min-width: 414px) {
body { font-family: Inconsolata;
  font-size: 60%;
  }

h1 {font-family: Inconsolata;
  font-size: 150%;
  }
}

@media screen and (min-width: 500px) {
body { font-family: Inconsolata;
  font-size: 75%;
  }

h1 {font-family: Inconsolata;
  font-size: 150%;
  }
}

@media screen and (min-width: 660px) {
body { font-family: Inconsolata;
  font-size: 100%;
  }

h1 {font-family: Inconsolata;
  font-size: 150%;
  }
}

@media screen and (min-width: 810px) {
body { font-family: Inconsolata;
  font-size: 125%;
  }

h1 {font-family: Inconsolata;
  font-size: 150%;
  }
}

@media screen and (min-width: 1000px) {
body { font-family: Inconsolata;
  font-size: 150%;
  }

h1 {font-family: Inconsolata;
  font-size: 150%;
  }
}

@media screen and (min-width: 1300px) {
body { font-family: Inconsolata;
  font-size: 200%;
  }

h1 {font-family: Inconsolata;
  font-size: 150%;
  }
}

/* animation */

@supports (animation-delay: 4s) {
    #slideset {height: 10em; position: relative}
    #slideset > * {visibility: hidden; animation: 36s autoplay1 infinite;
      position: absolute; top: 0; left: 10em}
    #slideset > *:nth-child(1) {animation-delay: 0s}
    #slideset > *:nth-child(2) {animation-delay: 4s}
    #slideset > *:nth-child(3) {animation-delay: 8s}
    #slideset > *:nth-child(4) {animation-delay: 12s}
    #slideset > *:nth-child(5) {animation-delay: 16s}
    #slideset > *:nth-child(6) {animation-delay: 20s}
    #slideset > *:nth-child(7) {animation-delay: 24s}
    #slideset > *:nth-child(8) {animation-delay: 28s}
    #slideset > *:nth-child(9) {animation-delay: 32s}
    @keyframes autoplay1 {
      0% {visibility: visible}
      11.1111% {visibility: hidden}
        }
    }