body {
  font-family: 'sailorhg';
  font-size: 30px;
}

.screen-reader {
  position:absolute;
  top:-10000px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.page {
  margin-bottom: 100px;
}

.transcript {
  font-family: 'Courier';
  font-size: 15px;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  margin-top: 100px;
  margin-bottom: 100px;
  line-height: 25px;
}

.image_desc {
  font-style: italic;
}

.container {
  transform: translateX(-50%) translateY(-50%);
  left: 50%;
  width: 2266px;
  height: 1488px;
  display: block;
  position: fixed;
  top: 50%;
}

.background-black,
.background-pink,
.background-desktop {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-attachment: fixed;
  background-position: top left;
  background-repeat: repeat;
  opacity: 0;
  transition: opacity 0.5s ease-in;
}

.background-black {
  background: url("../bgs/black_bg.gif") 2266px;
  background-color: #000000; /* Used if the image is unavailable */
}

.background-pink {
  background-color: #eabcd3; /* Used if the image is unavailable */
  background: url("../bgs/pink_bg.gif") 2266px;
}

.background-desktop {
  background-color: #eabcd3; /* Used if the image is unavailable */
  background: url("../bgs/pink_bg.gif") 2266px;
}

img.test {
  opacity: 1;
}

img {
  position: absolute;
  user-select: none;
  pointer-events: none;
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease-in;
  /* Safari-only workaround for jitter on scroll triggers */
  -webkit-transform: translate3d(0, 0, 0);
}

.display,
.display img {
  display: block;
}

.visible,
.visible img {
  opacity: 1;
  transition: opacity 0.5s ease-in;
}

.scrolling {
  height: 108000px;
}

@font-face {
  font-family: "sailorhg";
  src: url('../fonts/SailorhgMarker-Regular.ttf');
}

/* ================= page 0 ================= */

img[src$="page0/image1.png"] {
  left: 0px;
  top: 0px;
  display: block;
}


/* ================= dedication ================= */

img[src$="page01/image1.png"] {
  left: 0px;
  top: 123px;
}

img[src$="page01/image2.png"] {
  left: 713px;
  top: 902px;
}

/* ================= page 1 ================= */

img[src$="page0/image1.png"].visible {
  opacity: 1;
  transition: opacity 0s;
}

img[src$="page0/image1.png"].display {
  display: block;
}

img[src$="page1/image1.png"] {
  left: 500px;
  top: 50px;
}

img[src$="page1/image2.gif"] {
  top: 131px;
  left: 94px;
}

img[src$="page1/image3.png"] {
  left: 1110px;
  top: 468px;
}

img[src$="page1/image4.png"] {
  left: 840px;
  top: 800px;
}

img[src$="page1/image5.png"] {
  left: 1360px;
  top: 700px;
}

/* ================= page 2 ================= */

img[src$="page2/image1.png"] {
  left: 180px;
  top: 100px;
}

img[src$="page2/image2.png"] {
  left: 800px;
  top: 100px;
}

img[src$="page2/image3.png"] {
  left: 100px;
  top: 328px;
}

img[src$="page2/image4.png"] {
  left: 1000px;
  top: 1234px;
}

img[src$="page2/image5.png"] {
  left: 1758px;
  top: 1242px;
}

/* ================= page 3 ================= */

img[src$="page3/image1.gif"] {
  left: 50px;
  top: 20px;
}

img[src$="page3/image2.png"] {
  left: 1600px;
  top: 100px;
}

img[src$="page3/image3.png"],
img[src$="page3/image4.png"],
img[src$="page3/image5.png"] {
  left: 1600px;
  top: 240px;
}

img[src$="page3/image6.png"] {
  left: 1540px;
  top: 600px;
}

img[src$="page3/image7.png"] {
  left: 1560px;
  top: 700px;
}

img[src$="page3/image8.png"] {
  left: 1560px;
  top: 772px;
}

img[src$="page3/image9.png"] {
  left: 1581px;
  top: 833px;
}

img[src$="page3/image10.png"] {
  left: 1568px;
  top: 811px;
}

/* ================= page 4 ================= */

img[src$="page4/image1.png"] {
  left: 50px;
  top: 50px;
}

img[src$="page4/image2.png"] {
  left: 800px;
  top: 50px;
}

img[src$="page4/image3.png"] {
  left: 500px;
  top: 200px;
}

img[src$="page4/image4.png"] {
  left: 98px;
  top: 600px;
}

img[src$="page4/image5.png"] {
  left: 1670px;
  top: 883px;
}

/* ================= page 5 ================= */

img[src$="page5/image1.png"] {
  left: 100px;
  top: 50px;
}

img[src$="page5/image2.png"] {
  left: 1000px;
  top: 100px;
}

img[src$="page5/image3.png"] {
  left: 50px;
  top: 250px;
}

img[src$="page5/image4.png"] {
  left: 100px;
  top: 1200px;
}

img[src$="page5/image5.png"] {
  left: 1400px;
  top: 350px;
}

/* ================= page 6 ================= */

img[src$="page6/image1.png"] {
  left: 50px;
  top: 50px;
}

img[src$="page6/image2.png"] {
  left: 175px;
  top: 300px;
  z-index: 1;
}

img[src$="page6/inserting_disk.png"] {
  left: 175px;
  top: 300px;
  z-index: 1;
}

img[src$="page6/inserted_disk2.png"] {
  left: 175px;
  top: 300px;
  z-index: 1;
}

img[src$="page6/image3.png"] {
  left: 1000px;
  top: 50px;
}

img[src$="page6/image4.png"] {
  left: 1000px;
  top: 260px;
}

.page6.browser {
  left: 620px;
  top: 400px;
  position: relative;
}

.page6.browser > img {
  position: absolute;
  left: 0;
  top: 0;
}

.page6.browser .browser-content {
  position: relative;
  top: 130px;
  left: 150px;
  width: 1150px;
  height: 810px;
  overflow: hidden;
}

.page6.browser .browser-content img {
  top: 250px;
}

img[src$="page6/image6.png"] {
  left: 50px;
  top: 900px;
}

img[src$="page6/image7.png"] {
  left: 50px;
  top: 1150px;
}

/* ================= page 7 ================= */

img[src$="page7/image1.png"] {
  left: 150px;
  top: 150px;
}

img[src$="page7/image2.png"] {
  left: 150px;
  top: 450px;
}

img[src$="page7/image3.png"] {
  left: 150px;
  top: 1100px;
}

img[src$="page7/image4.png"] {
  left: 850px;
  top: 150px;
}

img[src$="page7/image5.gif"] {
  left: 850px;
  top: 450px;
}

img[src$="page7/image6.png"] {
  left: 850px;
  top: 1100px;
}

img[src$="page7/image7.png"] {
  left: 1600px;
  top: 200px;
}

img[src$="page7/image8.gif"] {
  left: 1550px;
  top: 400px;
}

img[src$="page7/image9.png"] {
  left: 1600px;
  top: 1100px;
}


/* ================= page 8 ================= */

img[src$="page8/image1.png"] {
  left: 150px;
  top: 40px;
}

img[src$="page8/image2.png"] {
  left: 1200px;
  top: 40px;
}

img[src$="page8/image3.png"] {
  left: 200px;
  top: 590px;
}

img[src$="page8/image4.png"] {
  left: 696px;
  top: 762px;
}

/* ================= page 9 ================= */

img[src$="page9/image1.png"] {
  left: 730px;
  top: 60px;
}

img[src$="page9/image2.png"] {
  left: 110px;
  top: 100px;
}

.page9.browser {
  left: 730px;
  top: 200px;
  position: absolute;
  z-index: -1;
}

.page9.browser > img {
  position: absolute;
  left: 0;
  top: 0;
}

.page9.browser .browser-content {
  position: relative;
  top: 180px;
  left: 150px;
  width: 1150px;
  height: 990px;
  overflow: hidden;
}

.page9.browser .browser-content img {
  top: 250px;
}

img[src$="page9/image4.png"] {
  left: 81px;
  top: 480px;
}

/* ================= page 10 ================= */

img[src$="page10/image1.png"] {
  left: 50px;
  top: 50px;
}

img[src$="page10/image2.png"] {
  left: 200px;
  top: 800px;
}

img[src$="page10/image3.png"] {
  left: 1150px;
  top: 200px;
}

img[src$="page10/image4.png"] {
  left: 750px;
  top: 290px;
}

img[src$="page10/image5.png"] {
  left: 1150px;
  top: 200px;
}

img[src$="page10/image6.png"] {
  left: 1150px;
  top: 440px;
}

img[src$="page10/image7.png"] {
  left: 1150px;
  top: 460px;
}

img[src$="page10/background_stars.png"] {
  left: 0px;
  top: 0px;
  z-index: -1;
}

/* ================= page 11 ================= */

img[src$="page11/image1.png"] {
  left: 20px;
  top: 20px;
}

img[src$="page11/image2.png"] {
  left: 1200px;
  top: 20px;
}

img[src$="page11/image3.png"] {
  left: 1792px;
  top: 240px;
}

img[src$="page11/image4.png"] {
  left: 20px;
  top: 800px;
}

img[src$="page11/image5.png"] {
  left: 508px;
  top: 598px;
}

img[src$="page11/image6.png"] {
  left: 20px;
  top: 1000px;
}

img[src$="page11/image7.png"] {
  left: 1700px;
  top: 700px;
}

img[src$="page11/image8.png"] {
  left: 1700px;
  top: 1250px;
}

img[src$="page11/background_stars.png"] {
  left: 0px;
  top: 350px;
}

/* ================= page 12 ================= */

img[src$="page12/image1.png"] {
  left: 0px;
  top: 108px;
}

/* ================= page 13 ================= */

img[src$="page13/start_bar.png"] {
  width: 100%;
  bottom: 0px;
  display: block;
  opacity: 1;
}

img[src$="page13/image1.png"] {
  left: 50px;
  top: 50px;
}

img[src$="page13/image2.png"] {
  left: 70px;
  top: 300px;
}

img[src$="page13/image3.png"] {
  left: 700px;
  top: 40px;
  z-index: -1;
}

img[src$="page13/image4.png"] {
  left: 1600px;
  top: 50px;
}

img[src$="page13/image5.png"] {
  left: 1350px;
  top: 300px;
}

/* ================= page 14 ================= */

img[src$="page14/image1.png"] {
  left: 0px;
  top: 50px;
}

img[src$="page14/image2.png"] {
  left: 580px;
  top: 220px;
}

img[src$="page14/image3.png"] {
  left: 0px;
  top: 1050px;
}

img[src$="page14/image4.png"] {
  left: 1230px;
  top: 50px;
}

/* ================= page 15 ================= */

img[src$="page15/image1.png"] {
  left: 100px;
  top: 400px;
  z-index: 1;
}

img[src$="page15/image2.png"] {
  left: 1520px;
  top: 610px;
  z-index: 1;
}

img[src$="page15/image3.png"] {
  left: 0px;
  top: 0px;
}

img[src$="page15/image4.png"] {
  left: 700px;
  top: 100px;
}

img[src$="page15/image5.png"] {
  left: 466px;
  top: 753px;
  z-index: -1;
}

/* ================= page 16 ================= */

img[src$="page16/image1.png"] {
  left: 50px;
  top: 50px;
}

img[src$="page16/image2.png"] {
  left: 1150px;
  top: 195px;
}

img[src$="page16/image3.png"] {
  left: 1750px;
  top: 300px;
}

img[src$="page16/image4.png"] {
  left: 420px;
  top: 215px;
}

img[src$="page16/image5.png"] {
  left: 50px;
  top: 300px;
}

img[src$="page16/image6.png"] {
  left: 670px;
  top: 1070px;
}

/* ================= page 17 ================= */

img[src$="page17/image1.png"] {
  left: 100px;
  top: 275px;
}

.page17.browser > img {
  left: 0;
  top: 0;
  width: 100%;
}

.page17.browser .browser-content {
  transform: skewY(0.7deg);
  position: absolute;
  top: 169px;
  bottom: 12px;
  width: 100%;
  overflow: hidden;
}

.page17.browser .browser-content img {
  top: 100px;
  position: relative;
  margin: auto;
}

img[src$="page17/image3.png"] {
  left: 100px;
  top: 600px;
}

img[src$="page17/image4.png"] {
  left: 1500px;
  top: 275px;
}

img[src$="page17/image5.png"] {
  left: 1000px;
  top: 575px;
}

img[src$="page17/image6.png"] {
  left: 1140px;
  top: 1290px;
}

/* ================= page 18 ================= */

img[src$="page18/image1.png"] {
  left: 100px;
  top: 1000px;
}

img[src$="page18/image2.png"] {
  left: 100px;
  top: 150px;
}

img[src$="page18/image3.png"] {
  left: 1400px;
  top: 100px;
}

img[src$="page18/image4.png"] {
  left: 1400px;
  top: 350px;
}

img[src$="page18/image5.png"] {
  left: 1100px;
  top: 600px;
}

img[src$="page18/image6.png"] {
  left: 100px;
  top: 80px;
}

/* ================= page 19 ================= */

img[src$="page19/image1.png"] {
  left: 50px;
  top: 50px;
}

img[src$="page19/image2.png"] {
  left: 50px;
  top: 600px;
  z-index: 1;
}

img[src$="page19/image3.gif"] {
  left: 450px;
  top: 20px;
  z-index: -1;
}

img[src$="page19/image4.png"] {
  left: 100px;
  top: 56px;
}

/* ================= page 20 ================= */

img[src$="page20/image1.png"] {
  left: 150px;
  top: 50px;
}

img[src$="page20/image2.png"] {
  left: 150px;
  top: 320px;
}

img[src$="page20/image3.png"] {
  left: 180px;
  top: 800px;
}

img[src$="page20/image4.png"] {
  left: 800px;
  top: 200px;
  z-index: -1;
}

img[src$="page20/image5.png"] {
  left: 150px;
  top: 1100px;
}

img[src$="page20/image6.png"] {
  left: 1500px;
  top: 40px;
}

/* ================= page 21 ================= */

img[src$="page21/image1.png"] {
  left: 50px;
  top: 50px;
}

img[src$="page21/image2.png"] {
  left: 150px;
  top: 140px;
}

img[src$="page21/image3.png"] {
  left: 850px;
  top: 140px;
}

img[src$="page21/image4.png"] {
  left: 1600px;
  top: 140px;
}

img[src$="page21/image5.png"] {
  left: 150px;
  top: 770px;
}

img[src$="page21/image6.png"] {
  left: 850px;
  top: 770px;
}

img[src$="page21/image7.png"] {
  left: 1600px;
  top: 770px;
}

/* ================= page 22 ================= */

img[src$="page22/image1.png"] {
  left: 147px;
  top: 100px;
}

img[src$="page22/image2.png"] {
  left: 100px;
  top: 300px;
}

img[src$="page22/image3.png"] {
  left: 883px;
  top: 100px;
}

img[src$="page22/image4.png"] {
  left: 800px;
  top: 280px;
}

img[src$="page22/image5.png"] {
  left: 1100px;
  top: 291px;
}

img[src$="page22/image6.png"] {
  left: 1600px;
  top: 100px;
}

img[src$="page22/image7.png"] {
  left: 1520px;
  top: 260px;
}

img[src$="page22/image8.png"] {
  left: 1520px;
  top: 976px;
}

/* ================= page 23 ================= */

img[src$="page23/image1.png"] {
  left: 100px;
  top: 50px;
}

img[src$="page23/image2.png"] {
  left: 150px;
  top: 150px;
}

img[src$="page23/image3.png"] {
  left: 600px;
  top: 150px;
}

img[src$="page23/image4.png"] {
  left: 100px;
  top: 230px;
}

img[src$="page23/image5.png"] {
  left: 420px;
  top: 1100px;
  transform: scale(90%, 90%);
}

img[src$="page23/image6.png"] {
  left: 950px;
  top: 30px;
  transform: scale(95%, 95%);
}

img[src$="page23/image7.png"] {
  left: 50px;
  top: 1200px;
  transform: scale(90%, 90%);
}

/* ================= page 24 ================= */

img[src$="page24/image1.png"] {
  left: 50px;
  top: 100px;
}

img[src$="page24/image2.png"] {
  left: 630px;
  top: 450px;
}

img[src$="page24/image3.png"] {
  left: 1044px;
  top: 100px;
}

img[src$="page24/image4.png"] {
  left: 1700px;
  top: 650px;
}

/* ================= page 25 ================= */

img[src$="page25/image1.png"] {
  left: 100px;
  top: 50px;
}

img[src$="page25/image2.png"] {
  left: 800px;
  top: 300px;
}

img[src$="page25/image3.png"] {
  left: 1600px;
  top: 600px;
}

/* ================= page 26 ================= */

img[src$="page26/image1.png"] {
  left: 150px;
  top: 200px;
}

img[src$="page26/image2.png"] {
  left: 750px;
  top: 50px;
}

img[src$="page26/image3.png"] {
  left: 1000px;
  top: 400px;
  z-index: -1;
}

/* ================= page 27 ================= */

img[src$="page27/image1.png"] {
  left: 130px;
  top: 100px;
}

img[src$="page27/image2.png"] {
  left: 1130px;
  top: 88px;
  z-index: -1;
}

/* ================= epilogue ================= */

img.flower {
  position: absolute;
  display: block;
  transform: translateX(-50%);
  left: 50%;
  text-align: left;
  top: 300px;
}

.epilogue {
  font-family: 'sailorhg';
  font-size: 70px;
  text-align: center;
  opacity: 0;
  width: 2266px;
  height: 1488px;
  background: url("../web_browser.png") 2266px;
  position: absolute;
  top: 0;
  left: 0;
}

.epilogue.visible {
  opacity: 1;
}

.epilogue-text {
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  text-align: left;
  width: 1500px;
  top: 600px;
}

.links {
  margin-top: 100px;
  display: block;
  text-align: center;
}

a {
  color: #000;
  margin-left: 25px;
  margin-right: 25px;
}

a:hover {
  color: #ef7cb4;
}