@font-face {
  font-family: 'belisaplumilla';
  src: url('fonts/belisaplumilla.woff2') format('woff2'), url('fonts/belisaplumilla.woff') format('woff'), url('fonts/belisaplumilla.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: '╞╖╚τ╩╓╨┤╠σ';
  src: url('fonts/╞╖╚τ╩╓╨┤╠σ.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}
/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}
/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}
/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}
/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}
body {
  background-color: black;
  color: white;
  font-family: 'belisaplumilla', serif;
  margin: 0;
}
body.ko,
body.ru {
  font-family: serif;
}
body.cn,
body.ja {
  font-family: '╞╖╚τ╩╓╨┤╠σ', serif;
}
.container {
  width: auto;
  text-align: center;
  overflow-x: hidden;
  font-size: 60px;
}
.container.ko,
.container.ru {
  font-size: 40px;
}
@media (min-width: 1940px) {
  .container {
    width: 1920px;
    margin-left: auto;
    margin-right: auto;
  }
}
/* Ensure elements are hidden while ScrollEntrance is loading */
[data-entrance] {
  opacity: 0;
}
/*This is the initial state before animating */
[data-entrance="line-animation"] {
  transform: translateY(-15px) scale(1.2);
  opacity: 0;
}
/*This is the state after animating */
[data-entrance="line-animation"].has-entered {
  transform: translateY(0px) scale(1);
  opacity: 1;
}
.controls {
  display: flex;
  justify-content: space-between;
  padding: 10px 10px 0 10px;
}
.audio-buttons-container {
  text-align: left;
  line-height: 1;
  flex: 1;
}
.audio-buttons-container #page-audio-play {
  display: inline-block;
  height: 40px;
  vertical-align: middle;
}
.audio-buttons-container #page-audio-stop {
  display: inline-block;
  height: 40px;
  vertical-align: middle;
  display: none;
}
.audio-buttons-container .page-audio-play-help {
  display: inline-block;
  font-size: 22px;
  vertical-align: middle;
  user-select: none;
  transition: opacity 0.1s;
  -webkit-animation: bounceAnimation 1.3s infinite;
  -moz-animation: bounceAnimation 1.3s infinite;
  -o-animation: bounceAnimation 1.3s infinite;
  animation: bounceAnimation 1.3s infinite;
}
.language-switcher-container {
  display: flex;
  flex-direction: row;
  text-align: right;
}
.language-icon {
  display: inline-block;
  height: 40px;
  vertical-align: middle;
}
#languageSwitcher {
  height: 40px;
  padding: 0 5px;
  font-size: 22px;
  vertical-align: middle;
  font-family: serif;
}
.dialog {
  font-variant: small-caps;
  line-height: 0.75em;
  margin: 0 0 1em 0;
  padding: 0 0.3em;
  position: relative;
  z-index: 100;
}
.dialog .lower {
  vertical-align: -0.5em;
}
.dialog .angleddown {
  display: inline-block;
  margin-left: 0.2em;
  font-size: 1.2em;
  vertical-align: -0.2em;
  transform: rotate(22deg);
}
.dialog .echo {
  position: relative;
}
.dialog .echo:before {
  content: attr(title);
  position: absolute;
  left: 0.3em;
  bottom: 1em;
  opacity: 0.5;
  font-size: 0.9em;
}
.dialog .echo::after {
  content: attr(title);
  position: absolute;
  left: 0.6em;
  bottom: 1.95em;
  opacity: 0.25;
  font-size: 0.8em;
}
.dialog .falling {
  display: inline-block;
  vertical-align: -0.5em;
  transform: rotate(14deg);
  opacity: 0.5;
}
.dialog .darkness {
  opacity: 0.5;
}
.line1 {
  margin-top: 6em;
}
.line2 {
  margin-right: 5vw;
}
.line3 {
  margin-top: 0.4em;
  margin-right: 2vw;
}
.line4 {
  margin-left: 5vw;
}
.line5 {
  margin-left: 10vw;
}
.line6 {
  margin-left: 5vw;
}
.line7 {
  margin-left: 2vw;
}
.line9 {
  margin-top: -7vh;
  margin-right: 20vw;
}
.line10 {
  text-align: right;
  margin-top: 10vh;
  margin-right: 20%;
}
.line11 {
  text-align: right;
  margin-right: 12%;
}
.line12 {
  text-align: right;
  margin-right: 10%;
}
.line14 {
  margin-left: 20vw;
  margin-bottom: 1.5em;
}
.line15 {
  margin-right: 6vw;
  margin-bottom: 1.5em;
}
.line16 {
  margin-bottom: 1.5em;
}
.line17 {
  text-align: right;
  margin-top: 4em;
  margin-right: 6vw;
}
.line18 {
  margin-top: 1em;
}
.line19 {
  text-align: left;
  margin-left: 10vw;
}
.line20 {
  text-align: left;
  margin-left: 12vw;
}
.line21 {
  text-align: left;
  margin-left: 15vw;
}
.line22 {
  text-align: right;
  margin-right: 5vw;
}
.line24 {
  text-align: left;
  margin-left: 5vw;
}
.line25 {
  text-align: right;
  margin-right: 5vw;
  line-height: 1.3em;
}
.line26 {
  text-align: left;
  margin-left: 5vw;
}
.line27 {
  text-align: left;
  margin-left: 8vw;
}
.line28 {
  text-align: right;
  margin-right: 10vw;
}
.line29 {
  margin-top: 2em;
  margin-left: 10vw;
}
.line30 {
  margin-right: 10vw;
}
.line31 {
  text-align: left;
  margin-top: 3em;
  margin-left: 5vw;
}
.line32 {
  margin-right: 10vw;
}
.line33 {
  margin-right: 10vw;
}
.line34 {
  letter-spacing: 8px;
}
.line35 {
  margin-left: 10vw;
}
.line36 {
  margin-top: 5em;
  line-height: 1.1em;
}
.panel {
  position: relative;
  z-index: 10;
}
.panel .layer {
  position: absolute;
  top: 0;
  user-select: none;
}
.panel1 {
  margin-top: -15vh;
  margin-bottom: 0.6em;
}
.panel1 .panel1hands {
  max-width: 110%;
  width: 110%;
  margin-top: 2%;
  margin-left: -4%;
}
.panel1 .panel1light {
  transition: opacity 0.1s;
  -webkit-animation: flickerAnimation 1.6s infinite;
  -moz-animation: flickerAnimation 1.6s infinite;
  -o-animation: flickerAnimation 1.6s infinite;
  animation: flickerAnimation 1.6s infinite;
}
.panel1 .panel1leaves {
  top: 10%;
}
.panel2 {
  margin-top: -10%;
  z-index: 9;
}
.panel2 .panel2light {
  transition: opacity 0.1s;
  -webkit-animation: flickerAnimation 1.6s infinite;
  -moz-animation: flickerAnimation 1.6s infinite;
  -o-animation: flickerAnimation 1.6s infinite;
  animation: flickerAnimation 1.6s infinite;
}
.panel3 {
  margin-top: -26%;
  margin-bottom: -10%;
  z-index: 8;
}
.panel3 .panel3light {
  transition: opacity 0.1s;
  -webkit-animation: flickerAnimation 1.6s infinite;
  -moz-animation: flickerAnimation 1.6s infinite;
  -o-animation: flickerAnimation 1.6s infinite;
  animation: flickerAnimation 1.6s infinite;
}
.panel4 {
  margin-top: -5%;
  margin-bottom: -20%;
}
.panel4 .panel4ground {
  width: 17.2%;
  margin-top: 27.3%;
  margin-left: 50.6%;
}
.panel5 {
  margin-top: -17%;
}
.panel6 {
  margin-top: -5%;
}
.panel7 {
  margin-top: -10%;
  margin-bottom: -5%;
}
.panel8 {
  margin-top: -7%;
}
.panel8 .panel8fire {
  width: 8.5%;
  margin-top: 17%;
  margin-left: 59.5%;
}
.panel8 .panel8rocks {
  width: 9.6%;
  margin-top: 30.9%;
  margin-left: 58.3%;
}
.panel8 .panel8glow {
  width: 36%;
  margin-top: 10.7%;
  margin-left: 45%;
  transition: opacity 0.1s;
  -webkit-animation: flickerAnimation 1.6s infinite;
  -moz-animation: flickerAnimation 1.6s infinite;
  -o-animation: flickerAnimation 1.6s infinite;
  animation: flickerAnimation 1.6s infinite;
}
.panel9 {
  margin-top: -5%;
  margin-bottom: -12%;
}
.panel9 .panel9glow {
  width: 31.1%;
  margin-top: 6.4%;
  margin-left: 32.7%;
  transition: opacity 0.1s;
  -webkit-animation: flickerAnimation 1.6s infinite;
  -moz-animation: flickerAnimation 1.6s infinite;
  -o-animation: flickerAnimation 1.6s infinite;
  animation: flickerAnimation 1.6s infinite;
}
.panel9 .clickable {
  position: absolute;
  top: 0;
  display: block;
  width: 16%;
  height: 27%;
  margin-top: 6.6%;
  margin-left: 75.2%;
}
.panel10 {
  margin-top: -15%;
}
.panel10 .panel10reflection {
  opacity: 0.6;
  width: 110%;
  max-width: 110%;
  margin-top: -5%;
}
.panel11 {
  margin-top: -20%;
}
.panel11 .panel11glow {
  width: 30.9%;
  margin-top: 21.2%;
  margin-left: 34.9%;
  transition: opacity 0.1s;
  -webkit-animation: flickerAnimation 1.6s infinite;
  -moz-animation: flickerAnimation 1.6s infinite;
  -o-animation: flickerAnimation 1.6s infinite;
  animation: flickerAnimation 1.6s infinite;
}
.panel11 .panel11leaves {
  width: 11.6%;
  margin-top: -4.1%;
  margin-left: 21.3%;
}
.panel11 .panel11leaf {
  width: 11.6%;
  margin-top: 6.9%;
  margin-left: 70.3%;
}
.panel11 .clickable {
  position: absolute;
  top: 0;
  display: block;
  width: 22%;
  height: 45%;
  margin-top: 20.6%;
  margin-left: 39.2%;
}
@keyframes flickerAnimation {
  0% {
    opacity: 1;
  }
  14% {
    opacity: 0.66;
  }
  32% {
    opacity: 0.82;
  }
  46% {
    opacity: 0.47;
  }
  58% {
    opacity: 0.78;
  }
  70% {
    opacity: 0.63;
  }
  80% {
    opacity: 0.85;
  }
  90% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes flickerAnimation {
  0% {
    opacity: 1;
  }
  14% {
    opacity: 0.66;
  }
  32% {
    opacity: 0.82;
  }
  46% {
    opacity: 0.47;
  }
  58% {
    opacity: 0.78;
  }
  70% {
    opacity: 0.63;
  }
  80% {
    opacity: 0.85;
  }
  90% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes flickerAnimation {
  0% {
    opacity: 1;
  }
  14% {
    opacity: 0.66;
  }
  32% {
    opacity: 0.82;
  }
  46% {
    opacity: 0.47;
  }
  58% {
    opacity: 0.78;
  }
  70% {
    opacity: 0.63;
  }
  80% {
    opacity: 0.85;
  }
  90% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes flickerAnimation {
  0% {
    opacity: 1;
  }
  14% {
    opacity: 0.66;
  }
  32% {
    opacity: 0.82;
  }
  46% {
    opacity: 0.47;
  }
  58% {
    opacity: 0.78;
  }
  70% {
    opacity: 0.63;
  }
  80% {
    opacity: 0.85;
  }
  90% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}
.animate-flicker {
  transition: opacity 0.1s;
  -webkit-animation: flickerAnimation 1.6s infinite;
  -moz-animation: flickerAnimation 1.6s infinite;
  -o-animation: flickerAnimation 1.6s infinite;
  animation: flickerAnimation 1.6s infinite;
}
@keyframes bounceAnimation {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}
@-o-keyframes bounceAnimation {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}
@-moz-keyframes bounceAnimation {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}
@-webkit-keyframes bounceAnimation {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}
.animate-bounce {
  transition: opacity 0.1s;
  -webkit-animation: bounceAnimation 1.3s infinite;
  -moz-animation: bounceAnimation 1.3s infinite;
  -o-animation: bounceAnimation 1.3s infinite;
  animation: bounceAnimation 1.3s infinite;
}
.dst-logo {
  position: relative;
  display: inline-block;
  max-width: 25vh;
  margin-bottom: 40vw;
  z-index: 20;
}