a {
  text-decoration: none
}
#alge-1 {
  left: 100px
}
#alge-2 {
  left: 800px
}
#alge-3 {
  left: 2100px
}
#alge-4 {
  left: 2200px
}
#alge-5 {
  left: 3500px
}
#alge-6 {
  left: 3680px
}
#alge-7 {
  left: 4900px
}
#alge-8 {
  left: 5000px
}
.alge-a {
  bottom: 0;
  width: 80px;
  height: 270px;
  background-image: url(../images/alge-a.png)
}
#monster3, .alge-a, .alge-b {
  position: absolute
}
.alge-b {
  background-image: url(../images/alge-b.png);
  bottom: 0;
  width: 162px;
  height: 252px
}
#monster3 {
  left: 540px;
  bottom: 0px;
  width: 400px;
  height: 636px
}
#monster3-body {
  position: absolute;
  top: 0;
  height: 515px;
  background-image: url(../images/monster3-body.png)
}
#monster3-body, #monster3-ship {
  left: 0;
  width: 400px
}
#monster3-ship, #monster3-steer {
  position: absolute
}
#monster3-ship {
  top: 515px;
  height: 121px;
  background-image: url(../images/monster3-ship.png)
}
#monster3-steer {
  left: 90px;
  top: 430px;
  width: 220px;
  height: 170px;
  background-image: url(../images/monster3-steer.png)
}
#dragon {
  position: absolute;
  width: 850px;
  height: 700px;
  background-image: url(../images/dragon1.png);
}
.banner {
  margin-bottom: 60px
}
.banner-button, .banner-line {
  position: relative;
  width: 152px;
  height: 32px
}
.banner-line {
  width: 440px;
  height: 1px;
  background-color: #fff;
  margin-bottom: 12px
}
.banner-text-a {
  font-family: frankfurter-medium-plain;
  font-size: 24px
}
.banner-text-a, .banner-text-b, .banner-text-c {
  position: relative;
  width: 440px;
  color: #fff;
  margin-bottom: 12px
}
.banner-text-b {
  line-height: 60px;
  font-family: frankfurter-plain;
  font-size: 70px
}
.banner-text-c {
  font-family: frankfurter-medium-plain;
  font-size: 18px
}
.banner-bottom-a, .banner-bottom-b {
  position: relative;
  left: 20px;
  width: 480px;
  height: 56px;
  margin-top: -1px;
  background-image: url(../images/banner-bottom-a.png)
}
.banner-bottom-b {
  background-image: url(../images/banner-bottom-b.png)
}
#banners-container, #boxes {
  position: absolute;
  left: 15%;
  width: 520px
}
.banner-middle-a, .banner-middle-b {
  position: relative;
  left: 20px;
  width: 440px;
  padding: 20px;
  background-color: #f7941d;
  overflow: hidden
}
.banner-middle-b {
  background-color: #00799E
}
.banner-top-a, .banner-top-b {
  position: relative;
  width: 520px;
  height: 23px;
  margin-bottom: -1px;
  background-image: url(../images/banner-top-a.png)
}
.banner-top-b {
  background-image: url(../images/banner-top-b.png)
}
body {
  margin: 0;
  background-image: url(../images/bg.png);
  background-repeat: repeat;
  background-position: top left;
  background-attachment: fixed;
}
#scale-wrapper {
  width: 1920px;
  height: 1080px;
  transform-origin: top left;
  position: absolute;
  top: 0;
  left: 0;
}
#boxes {
  left: 13900px;
  bottom: 20%;
  width: 700px;
  height: 100px;
  background-image: url(../images/box.png)
}
#bubble {
  position: relative;
  left: -50%;
  width: 16px;
  height: 16px;
  background-image: url(../images/bubble.png)
}
#bubble-container, .building {
  position: absolute
}
#building-1 {
  left: 0;
  bottom: 0;
  width: 190px;
  height: 500px;
  background-image: url(../images/building-a.png)
}
#building-2 {
  left: 190px;
  bottom: 0;
  width: 475px;
  height: 495px;
  background-image: url(../images/building-b.png)
}
#building-3 {
  left: 710px;
  bottom: 0;
  width: 190px;
  height: 500px;
  background-image: url(../images/building-c.png)
}
.building-wolf-face-a {
  position: absolute;
  left: 25px;
  top: 395px;
  width: 65px;
  height: 65px;
  background-image: url(../images/wolf-face-a.png)
}
.building-wolf-face-a-eyes {
  position: absolute;
  left: 5px;
  top: 20px;
  width: 55px;
  height: 25px;
  opacity: 0;
  filter: alpha(opacity=0);
  background-image: url(../images/wolf-face-a-eyes.png)
}
.building-wolf-face-b {
  position: absolute;
  left: 80px;
  top: 375px;
  width: 80px;
  height: 80px;
  background-image: url(../images/wolf-face-b.png)
}
.building-wolf-face-b-eyes {
  position: absolute;
  left: 7px;
  top: 25px;
  width: 66px;
  height: 30px;
  opacity: 0;
  filter: alpha(opacity=0);
  background-image: url(../images/wolf-face-b-eyes.png)
}
#buildings-container {
  position: absolute;
  left: 4880px;
  bottom: 20%;
  width: 1000px;
  height: 80%
}
.building-leg-container-a, .building-leg-container-b {
  position: absolute;
  overflow: hidden;
  left: 0;
  top: 470px;
  width: 190px;
  height: 30px
}
.building-leg-container-b {
  left: 70px;
  top: 465px;
  width: 150px
}
.building-leg-frame-a, .building-leg-frame-b {
  position: absolute;
  left: 0;
  top: 0;
  width: 380px;
  height: 30px;
  background-image: url(../images/building-a-leg-frame.png)
}
.building-leg-frame-b {
  width: 300px;
  background-image: url(../images/building-b-leg-frame.png)
}
.chain-block {
  position: absolute;
  bottom: 0;
  width: 100px;
  height: 90px;
  background-image: url(../images/chain-block.png)
}
.chain-block-string {
  position: absolute;
  left: 28px;
  bottom: 60px;
  width: 44px;
  height: 100%;
  background-image: url(../images/chain-block-string.png)
}
.chain-block-and-string-container {
  position: absolute;
  width: 100px;
  height: 100%
}
.coral-a, .coral-b {
  width: 200px;
  height: 150px;
  bottom: -70%
}
.coral-a {
  position: absolute;
  background-image: url(../images/coral-a.png)
}
.coral-b {
  background-image: url(../images/coral-b.png)
}
#coral-1 {
  left: 4800px
}
#coral-2 {
  left: 5800px
}
#coral-3 {
  left: 6800px
}
.contact-confirmation-container, .coral-b, .coral-big {
  position: absolute
}
#coral-big-1 {
  left: 1300px;
  bottom: -70%;
  width: 300px;
  height: 400px;
  background-image: url(../images/coral-big-a.png)
}
#coral-big-2 {
  left: 1700px;
  bottom: -70%;
  width: 650px;
  height: 500px;
  background-image: url(../images/coral-big-b.png)
}
#contact-box {
  position: absolute;
  top: 150px;
  margin-left: -840px;
  width: 940px;
  height: 420px;
  background-image: url(../images/contact-box.png)
}
#contact-box-email {
  position: absolute;
  left: 570px;
  top: 20px;
  width: 350px;
  height: 30px;
  background-image: url(../images/contact-box-hole-a.png)
}
#contact-box-email input, #contact-box-subject input {
  font-family: Arial;
  font-size: 14px;
  color: #fff;
  width: 340px;
  margin: 5px;
  border: 0;
  background-color: transparent
}
#contact-box-email input:focus, #contact-box-message textarea:focus, #contact-box-subject input:focus {
  outline: 0
}
#contact-box-message, #contact-box-subject {
  position: absolute;
  left: 570px;
  width: 350px
}
#contact-box-subject {
  top: 65px;
  height: 30px;
  background-image: url(../images/contact-box-hole-a.png)
}
#contact-box-message {
  top: 110px;
  height: 170px;
  background-image: url(../images/contact-box-hole-b.png)
}
#contact-box-message textarea {
  font-family: Arial;
  font-size: 14px;
  color: #fff;
  width: 340px;
  height: 160px;
  margin: 5px;
  border: 0;
  overflow: hidden;
  resize: none;
  background-color: transparent
}
#contact-button {
  position: absolute;
  top: 450px;
  margin-left: -255px;
  width: 355px;
  height: 100px
}
#contact-center {
  position: absolute;
  height: 540px;
  left: 50%;
  bottom: 20%
}
#contact-cloud-bottom {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 21px;
  background-image: url(../images/contact-cloud-bottom.png)
}
#contact-cloud-middle {
  position: absolute;
  left: 0;
  top: 80%;
  width: 100%;
  height: 20%;
  background-color: #fff
}
#contact-cloud-seal-bottom, #contact-cloud-seal-top {
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #fff
}
#contact-cloud-seal-bottom {
  bottom: -1px
}
#contact-cloud-seal-top {
  top: -1px
}
#contact-cloud-top {
  position: absolute;
  left: 0;
  bottom: 20%;
  width: 100%;
  height: 21px;
  background-image: url(../images/contact-cloud-top.png)
}
.contact-confirmation {
  position: relative;
  width: 260px;
  height: 190px;
  left: -50%
}
.contact-confirmation-rectangle {
  position: absolute;
  width: 260px;
  height: 170px;
  background-color: #333
}
.contact-confirmation-title-a, .contact-confirmation-title-b {
  position: absolute;
  left: 30px;
  top: 26px;
  font-family: frankfurter-plain;
  color: #c69c6d;
  font-size: 35px
}
.contact-confirmation-title-b {
  font-size: 48px
}
.contact-confirmation-text-a, .contact-confirmation-text-b {
  position: absolute;
  left: 30px;
  top: 70px;
  width: 200px;
  font-family: frankfurter-medium-plain;
  font-size: 19px;
  line-height: 22px;
  color: #aaa
}
.contact-confirmation-text-b {
  top: 82px;
  font-size: 24px;
  line-height: 24px
}
.contact-confirmation-text-c, .contact-confirmation-text-d {
  position: absolute;
  font-family: frankfurter-medium-plain;
  font-size: 25px;
  color: #aaa
}
.contact-confirmation-text-c {
  width: 200px;
  line-height: 25px;
  left: 30px;
  top: 82px
}
.contact-confirmation-text-d {
  left: 72px;
  top: 68px
}
.contact-confirmation-triangle {
  position: absolute;
  left: 120px;
  top: 170px;
  width: 20px;
  height: 20px;
  background-image: url(../images/contact-confirmation-triangle.png)
}
#contact-container {
  position: absolute;
  width: 100%;
  height: 100%
}
.cloud {
  position: absolute
}
.content-noscroll {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden
}
.cloud {
  width: 180px;
  height: 120px;
  background-image: url(../images/cloud.png)
}
#cloud-1 {
  left: 100px;
  top: 20%
}
#cloud-2 {
  left: 600px;
  top: 5%
}
#cloud-3 {
  left: 1300px;
  top: 30%
}
#cloud-4 {
  left: 1900px;
  top: 20%
}
#cloud-5 {
  left: 10%;
  bottom: 550px
}
#cloud-6 {
  left: 25%;
  bottom: 1200px
}
#cloud-7 {
  left: 70%;
  bottom: 1400px
}
#cloud-8 {
  left: 40%;
  bottom: 1800px
}
#cloud-9 {
  left: 80%;
  bottom: 2000px
}
#container {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden
}
.shrimp {
  position: absolute;
  width: 130px;
  height: 89px;
  overflow: hidden;
  background-image: url(../images/shrimp.png)
}
.shrimp-eyes {
  position: absolute;
  left: 31px;
  top: 26px;
  width: 38px;
  height: 19px;
  opacity: 0;
  filter: alpha(opacity=0);
  background-image: url(../images/shrimp-eyes.png)
}
#shrimp-ribbon-container-1 {
  top: 0
}
#shrimp-ribbon-container-2 {
  top: 100px
}
#shrimp-ribbon-container-3 {
  top: 200px
}
#shrimp-ribbon-container-4 {
  top: 300px
}
#shrimps-container {
  position: absolute;
  left: 270px;
  top: 50px;
  width: 730px;
  height: 489px
}
#shrimp-text-container {
  position: absolute;
  top: 79px;
  right: 760px;
  width: 480px;
  height: 440px
}
.crane {
  position: absolute;
  bottom: 20%;
  width: 110px;
  height: 80%;
  background-image: url(../images/crane.png);
  background-position: 0 100%
}
#crane-1 {
  left: 7750px
}
#crane-2 {
  left: 9000px
}
.cursor-trail {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: screen;
    animation: sparkle 1s ease-out forwards;
    box-shadow: 0 0 10px 2px currentColor;
}
@keyframes sparkle {
    0% {
        transform: translate(-50% , -50%) scale(0);
        opacity: 1;
        filter: hue-rotate(0deg) brightness(1.5);
    }
    50% {
        opacity: 0.5;
        filter: hue-rotate(180deg) brightness(2);
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
        filter: hue-rotate(360deg) brightness(1);
    }
}
@keyframes gradient {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}

#detect-container {
  position: absolute;
  background-color: #000;
  padding: 10px;
  display: inline-block;
  opacity: .8;
  filter: alpha(opacity=80)
}
.detect-name {
  font-weight: 700;
  margin-right: 10px
}
.detect-name, .detect-value {
  font-family: arial;
  color: #fff;
  font-size: 14px
}
.displaynone {
  display: none
}
#dock-column, #dock-floor {
  position: absolute;
  left: 19530px;
  top: 80%;
  width: 2970px
}
#dock-floor {
  height: 50px;
  background-image: url(../images/dock-floor.png)
}
#dock-column {
  height: 20%;
  background-image: url(../images/dock-column.png)
}

#elevation-1, #elevation-2 {
  left: 4380px;
  bottom: 20%;
  width: 400px;
  height: 120px
}
#elevation-2 {
  left: 6080px
}
#elevation-3, #elevation-4 {
  left: 16040px;
  bottom: 20%;
  width: 400px;
  height: 150px
}
#elevation-4 {
  left: 17840px
}
.elevation, .elevation-box {
  position: absolute
}
.elevation-box {
  width: 100%;
  height: 100px;
  bottom: 0;
  background-image: url(../images/box.png)
}
.elevation-floor {
  position: absolute;
  width: 100%;
  height: 50px;
  background-image: url(../images/floor.png)
}
.wolf-face-frame-a, .wolf-face-frame-b {
  position: absolute;
  left: 0;
  top: 0;
  width: 130px;
  height: 65px;
  background-image: url(../images/wolf-face-frame-a.png)
}
.wolf-face-frame-b {
  width: 160px;
  height: 80px;
  background-image: url(../images/wolf-face-frame-b.png)
}
#experience-1-container {
  position: absolute;
  left: 14840px;
  bottom: 20%;
  width: 1000px;
  height: 80%
}
#experience-2-container {
  width: 1000px
}
#experience-2-container, #experience-3-container {
  position: absolute;
  bottom: 20%;
  height: 80%
}
#experience-2-container {
  left: 16640px
}
#experience-3-container {
  left: 18440px;
  width: 900px
}
.experience-text-a, .experience-text-b {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
  font-family: frankfurter-medium-plain;
  color: #fff;
  font-size: 35px;
  line-height: 35px
}
.experience-text-b {
  font-family: frankfurter-plain;
  font-size: 60px;
  line-height: 54px
}
.experience-text-c {
  width: 100%
}
.experience-text-c, .experience-text-d, .experience-text-e {
  position: relative;
  margin-bottom: 20px;
  font-family: Arial;
  color: #fff;
  font-size: 18px
}
.experience-text-d {
  width: 75%
}
.experience-text-e {
  width: 85%
}
.experience-text-container {
  position: absolute;
  bottom: 185px;
  width: 510px;
  background-color: #444;
  padding: 40px;
  border-style: solid;
  border-width: 10px;
  border-color: #777
}
#email-button, #fence {
  position: absolute;
  width: 485px;
  height: 230px;
  background-image: url(../images/email-button.png)
}
.face-left {
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
  -ms-filter: fliph;
  filter: fliph
}
.face-right {
  -moz-transform: scaleX(1);
  -webkit-transform: scaleX(1);
  -o-transform: scaleX(1);
  transform: scaleX(1)
}
#fence {
  width: 740px;
  height: 100px;
  background-image: url(../images/fence.png)
}
.firework {
  position: relative;
  left: -50%;
  top: -50%;
  width: 500px;
  height: 500px;
  background-color: transparent
}
.firework-container {
  position: absolute;
  width: 500px;
  height: 500px
}
#firework-container-1 {
  left: 90%;
  top: 30%
}
#firework-container-2 {
  left: 10%;
  top: 20%
}
#firework-container-3 {
  left: 50%;
  top: 10%
}
#firework-container-4 {
  left: 90%;
  top: 50%
}
#firework-container-5 {
  left: 30%;
  top: 15%
}
#firework-container-6 {
  left: 90%;
  top: 30%
}
#fireworks-container {
  position: absolute;
  width: 100%;
  height: 100%
}
.fish, .fish-eyes {
  position: absolute
}
.fish {
  width: 125px;
  height: 93px;
  overflow: hidden;
  background-image: url(../images/fish.png)
}
.fish-eyes {
  left: 20px;
  top: 40px;
  width: 48px;
  height: 25px;
  opacity: 0;
  filter: alpha(opacity=0);
  background-image: url(../images/fish-eyes.png)
}
#fishes-container {
  position: absolute;
  left: 270px;
  top: 50px;
  width: 725px;
  height: 493px
}
#fish-ribbon-container-1 {
  top: 0
}
#fish-ribbon-container-2 {
  top: 100px
}
#fish-ribbon-container-3 {
  top: 200px
}
#fish-ribbon-container-4 {
  top: 300px
}
#fish-text-container {
  position: absolute;
  top: 83px;
  right: 760px;
  width: 480px;
  height: 440px
}
#floor {
  position: absolute;
  width: 100%;
  height: 50px;
  background-image: url(../images/floor.png)
}
@font-face {
  font-family: 'frankfurter-medium-plain';
  src: url(../font/frankfurter-medium-plain.eot);
  src: url(../font/frankfurter-medium-plain.eot?#iefix) format('embedded-opentype'), url(../font/frankfurter-medium-plain.woff) format('woff'), url(../font/frankfurter-medium-plain.ttf) format('truetype'), url(../font/frankfurter-medium-plain.svg#frankfurter-medium-plain) format('svg');
  font-weight: 400;
  font-style: normal
}
@font-face {
  font-family: 'frankfurter-plain';
  src: url(../font/frankfurter-plain.eot);
  src: url(../font/frankfurter-plain.eot?#iefix) format('embedded-opentype'), url(../font/frankfurter-plain.woff) format('woff'), url(../font/frankfurter-plain.ttf) format('truetype'), url(../font/frankfurter-plain.svg#frankfurter-plain) format('svg');
  font-weight: 400;
  font-style: normal
}
@font-face {
  font-family: 'lobster';
  src: url(../font/lobster-1.4.eot);
  src: url(../font/lobster-1.4.eot?#iefix) format('embedded-opentype'), url(../font/lobster-1.4.woff) format('woff'), url(../font/lobster-1.4.ttf) format('truetype'), url(../font/lobster-1.4.svg#lobster) format('svg');
  font-weight: 400;
  font-style: normal
}
@font-face {
  font-family: 'poster-sans-bold';
  src: url(../font/poster-sans-bold.eot);
  src: url(../font/poster-sans-bold.eot?#iefix) format('embedded-opentype'), url(../font/poster-sans-bold.woff) format('woff'), url(../font/poster-sans-bold.ttf) format('truetype'), url(../font/poster-sans-bold.svg#poster-sans-bold) format('svg');
  font-weight: 400;
  font-style: normal
}
.foundation {
  position: absolute;
  top: 80%;
  height: 90%;
  background-image: url(../images/foundation.png)
}
#foundation-1 {
  left: 13320px;
  width: 6220px
}
.gate {
  position: absolute;
  bottom: 20%;
  width: 320px;
  height: 300px;
  background-image: url(../images/gate.png)
}
#gate-1 {
  left: 2100px
}
#gate-2 {
  left: 7780px
}
#gate-3 {
  left: 13320px
}
#gate-4 {
  left: 19530px
}
.gate-text {
  position: absolute;
  top: 14px;
  font-family: frankfurter-plain;
  color: #fff;
  font-size: 40px
}
#gate-text-1 {
  left: 37px
}
#gate-text-2, #gate-text-3 {
  left: 32px
}
#gate-text-4 {
  left: 29px
}
.grass {
  position: absolute;
  width: 100%;
  height: 50px;
  background-image: url(../images/grass.png)
}
.ground, .layer-horizontal {
  position: absolute;
  height: 100%
}
.ground {
  width: 100%;
  background-image: url(../images/ground.png)
}
#ground-and-grass-container-1 {
  position: absolute;
  left: 0;
  top: 80%;
  width: 8100px;
  height: 90%
}
#ground-and-grass-container-2 {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1160px;
  height: 2000px
}
img {
  border-style: none
}
#javascript-banner {
  position: relative;
  left: -50%;
  margin-top: -115px;
  width: 600px;
  height: 230px
}
#javascript-banner-container {
  position: absolute;
  left: 50%;
  top: 50%
}
#javascript-banner-left {
  position: absolute;
  left: 0;
  top: 0;
  width: 80px;
  height: 230px;
  background-image: url(../images/javascript-banner-left.png)
}
#javascript-banner-middle {
  position: absolute;
  left: 79px;
  top: 0;
  width: 440px;
  height: 190px;
  background-color: #f7941d
}
#javascript-banner-right {
  position: absolute;
  left: 518px;
  top: 0;
  width: 80px;
  height: 230px;
  background-image: url(../images/javascript-banner-right.png)
}
#javascript-banner-text-a, #javascript-banner-text-b {
  position: relative;
  font-family: frankfurter-plain;
  color: #fff;
  font-size: 39px;
  text-align: center;
  margin-top: 37px
}
#javascript-banner-text-b {
  font-size: 72px;
  margin-top: -12px
}
.layer-horizontal {
  left: 0;
  top: 100%
}
#layer-horizontal-1 {
  width: 4000px
}
#layer-horizontal-2 {
  width: 12000px
}
#layer-horizontal-3 {
  width: 22500px
}
.layer-vertical, .mountain {
  position: absolute;
  bottom: 0;
  width: 100%
}
#layer-vertical-1 {
  height: 3500px
}
#layer-vertical-2 {
  height: 6000px
}
.mountain {
  bottom: 20%;
  width: 800px;
  height: 400px;
  background-image: url(../images/mountain.png)
}
#mountain-1 {
  left: 1000px
}
#mountain-2 {
  left: 2800px
}
#diy-ball {
  position: absolute;
  left: 415px;
  bottom: 250px;
  width: 70px;
  height: 70px;
  background-image: url(../images/diy-ball.png)
}
#diy-board-1 {
  left: 0;
  bottom: 0
}
#diy-board-2 {
  left: 120px;
  bottom: 0
}
#diy-board-3 {
  left: 240px;
  bottom: 0
}
#diy-board-4 {
  left: 550px;
  bottom: 0
}
#diy-board-5 {
  left: 670px;
  bottom: 0
}
#diy-board-6 {
  left: 790px;
  bottom: 0
}
.diy-board-blue, .diy-board-red {
  position: absolute;
  width: 110px;
  height: 140px;
  background-image: url(../images/diy-board-blue.png)
}
.diy-board-red {
  background-image: url(../images/diy-board-red.png)
}
#diy-container {
  position: absolute;
  left: 6680px;
  bottom: 20%;
  width: 900px;
  height: 80%
}
#diy-player {
  position: relative;
  left: -50%;
  overflow: hidden;
  width: 300px;
  height: 280px
}
#diy-player-eyes {
  position: absolute;
  left: 92px;
  top: 75px;
  width: 66px;
  height: 30px;
  opacity: 0;
  filter: alpha(opacity=0);
  background-image: url(../images/wolf-face-b-eyes.png)
}
#diy-player-container {
  position: absolute;
  left: 50%;
  bottom: 0
}
#diy-player-frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 1200px;
  height: 280px;
  background-image: url(../images/diy-player.png)
}
#diy-rim, #diy-rim-container {
  position: absolute;
  width: 280px
}
#diy-rim-container {
  left: 310px;
  bottom: 0;
  height: 500px
}
#diy-rim {
  height: 550px;
  background-image: url(../images/diy-rim.png)
}
.diy-text {
  position: relative;
  top: -17px;
  font-family: frankfurter-plain;
  color: #fff;
  font-size: 120px;
  margin-left: -50%
}
.diy-text-container {
  position: absolute;
  left: 50%
}
#hangar, #hangar-door {
  position: absolute;
  left: 8030px;
  bottom: 20%;
  width: 800px;
  height: 530px;
  background-image: url("../images/hangar-house.png")
}
#hangar-door {
  left: 100px;
  bottom: 0;
  width: 600px;
  height: 290px;
  background-color: #333
}
#hangar-roof {
  position: absolute;
  width: 100%;
  height: 40px;
  background-color: #aaa
}
#hangar-window {
  position: absolute;
  left: 100px;
  top: 90px;
  width: 600px;
  height: 100px;
  background-image: url(../images/hangar-window.png)
}
#page {
  left: 0;
  top: 0;
  width: 100%
}
#stone {
  position: absolute;
  top: 60px;
  width: 100%;
  height: 100%;
  background-image: url(../images/stone.png)
}
#stone-and-floor-container {
  position: absolute;
  left: 13320px;
  top: 80%;
  width: 6210px;
  height: 90%;
  background-color: #444;
  overflow: hidden
}
#piechart-monster1-front, .piechart {
  position: absolute;
  width: 300px;
  height: 300px
}
.piechart {
  overflow: hidden
}
#piechart-monster1 {
  left: 160px;
  top: 30px
}
#piechart-monster1-front {
  left: 0;
  top: 0;
  background-image: url(../images/piechart-front.png)
}
#piechart-monster1-text-graphic-1 {
  left: 190px;
  top: 155px
}
#piechart-monster1-text-graphic-2 {
  left: 216px;
  top: 194px
}
#piechart-monster1-text-animation-1 {
  left: 10px;
  top: 97px
}
#piechart-monster1-text-animation-2 {
  left: 46px;
  top: 148px
}
#piechart-monster1-text-code-1 {
  left: 220px;
  top: 67px
}
#piechart-monster1-text-code-2 {
  left: 221px;
  top: 106px
}
#piechart-monster3-front, .piechart-back {
  position: absolute;
  left: 0;
  top: 0;
  width: 300px;
  height: 300px
}
.piechart-back {
  background-image: url(../images/piechart-back.png)
}
#piechart-monster3 {
  left: 50px;
  top: 130px
}
#piechart-monster3-front {
  background-image: url(../images/piechart-front.png)
}
#piechart-monster3-text-graphic-1 {
  left: 1px;
  top: 98px
}
#piechart-monster3-text-graphic-2 {
  left: 42px;
  top: 150px
}
#piechart-monster3-text-animation-1 {
  left: 191px;
  top: 155px
}
#piechart-monster3-text-animation-2 {
  left: 218px;
  top: 193px
}
#piechart-monster3-text-code-1 {
  left: 200px;
  top: 67px
}
#piechart-monster3-text-code-2 {
  left: 221px;
  top: 105px
}
#piechart-monster2 {
  left: 135px;
  top: 20px
}
#piechart-monster2-front {
  position: absolute;
  left: 0;
  top: 0;
  width: 300px;
  height: 300px;
  background-image: url(../images/piechart-front.png)
}
#piechart-monster2-text-graphic-1 {
  left: 25px;
  top: 98px
}
#piechart-monster2-text-graphic-2 {
  left: 42px;
  top: 150px
}
#piechart-monster2-text-animation-1 {
  left: 191px;
  top: 155px
}
#piechart-monster2-text-animation-2 {
  left: 218px;
  top: 193px
}
#piechart-monster2-text-code-1 {
  left: 200px;
  top: 67px
}
#piechart-monster2-text-code-2 {
  left: 221px;
  top: 105px
}
.piechart-text-a, .piechart-text-b {
  position: absolute;
  font-family: poster-sans-bold;
  color: #fff;
  font-size: 24px
}
.piechart-text-b {
  font-family: frankfurter-medium-plain;
  font-size: 30px
}
.piechart-text-c, .piechart-text-d {
  position: absolute;
  font-family: poster-sans-bold;
  color: #fff;
  font-size: 35px
}
.piechart-text-d {
  font-family: frankfurter-medium-plain;
  font-size: 40px
}
.spear, .spear-head-leaves {
  position: absolute;
  width: 160px;
  height: 100%
}
.spear-head-leaves {
  height: 250px;
  background-image: url(../images/spear-head-leaves.png)
}
.spear-stalk {
  position: absolute;
  left: 77px;
  top: 95px;
  width: 6px;
  height: 100%;
  background-color: #a67c52
}
#spear-1 {
  left: 180px;
  top: 65%
}
#spear-2 {
  left: 360px;
  top: 65%
}
#spear-3 {
  left: 540px;
  top: 52%
}
#spear-4 {
  left: 720px;
  top: 52%
}
#spears-container {
  position: absolute;
  left: 3280px;
  bottom: 20%;
  width: 900px;
  height: 80%
}
.spear-line {
  width: 100%;
  height: 1px;
  background-color: #fff
}
#spear-line-1 {
  bottom: 65%
}
#spear-line-2 {
  bottom: 52%
}
#spear-line-3 {
  bottom: 39%
}
#spear-line-4 {
  bottom: 26%
}
#spear-line-5 {
  bottom: 13%
}
.spear-line, .spear-ribbon {
  position: absolute
}
#spear-ribbon-container {
  position: absolute;
  width: 1200px;
  height: 40px;
  bottom: 70%
}
#spear-ribbon-1 {
  left: 196px
}
#spear-ribbon-2 {
  left: 338px
}
#spear-ribbon-3 {
  left: 566px
}
#spear-ribbon-4 {
  left: 712px
}
.spear-ribbon-left {
  position: relative;
  float: left;
  width: 20px;
  height: 40px;
  margin-right: -1px;
  background-image: url(../images/spear-ribbon-left.png)
}
.spear-ribbon-middle {
  position: relative;
  float: left;
  height: 34px;
  padding-top: 6px;
  padding-left: 2px;
  padding-right: 2px;
  background-color: #f7941d;
  font-family: frankfurter-plain;
  color: #fff;
  font-size: 24px
}
.spear-ribbon-right {
  position: relative;
  float: left;
  width: 20px;
  height: 40px;
  margin-left: -1px;
  background-image: url(../images/spear-ribbon-right.png)
}
#spear-text-1 {
  bottom: 66%
}
#spear-text-2 {
  bottom: 53%
}
#spear-text-3 {
  bottom: 40%
}
#spear-text-4 {
  bottom: 27%
}
#spear-text-5 {
  bottom: 14%
}
#preloader, .spear-text {
  position: absolute;
  left: 0
}
.spear-text {
  font-family: frankfurter-medium-plain;
  color: #fff;
  font-size: 20px
}
#preloader {
  bottom: 0;
  width: 100%;
  height: 100%
}
#preloader-banner {
  position: relative;
  left: -50%;
  margin-top: -115px;
  width: 600px;
  height: 230px
}
#preloader-banner-container {
  position: absolute;
  left: 50%;
  top: 50%
}
#preloader-banner-left {
  position: absolute;
  left: 0;
  top: 0;
  width: 80px;
  height: 230px;
  background-image: url(../images/preloader-banner-left.png)
}
#preloader-banner-middle {
  position: absolute;
  left: 79px;
  top: 0;
  width: 440px;
  height: 190px;
}
#preloader-banner-right {
  position: absolute;
  left: 518px;
  top: 0;
  width: 80px;
  height: 230px;
  background-image: url(../images/preloader-banner-right.png)
}
#preloader-banner-text-a, #preloader-banner-text-b {
  position: relative;
  font-family: frankfurter-plain;
  color: #fff;
  font-size: 72px;
  text-align: center;
  margin-top: 29px
}
#preloader-banner-text-b {
  font-size: 39px;
  margin-top: -12px
}
#preloader-dots {
  position: absolute;
  left: 194px;
  top: 130px;
  width: 53px;
  height: 9px
}
.preloader-dots-animation {
  background-image: url(../images/preloader-dots-animation.gif)
}
.preloader-dots-static {
  background-image: url(../images/preloader-dots-static.png)
}
#rune-loader {
  width: 100%;
  max-width: 600px;
  margin: 100px auto;
  padding: 20px;
  text-align: center;
}

.rune-track {
  display: flex;
  justify-content: space-between;
}

.rune {
  opacity: 0;
  font-size: 2rem;
  color: #888;
  transition: color 0.4s, opacity 0.4s;
  font-family: 'Noto Sans Runic', serif;
}
.rune.active {
  color: #f5d742;
  text-shadow: 0 0 10px #fffbcc;
  opacity: 1;
}


#franzi {
  position: relative;
  left: -50%;
  width: 200px;
  height: 175px;
  overflow: hidden
}
#franzi-container {
  position: absolute;
  left: 50%;
  bottom: 100%
}
#franzi-eyes-close, #franzi-slides {
  position: absolute;
  top: 35px;
  left: 90px;
  width: 55px;
  height: 25px;
  background-image: url(../images/franzi-eyes-close.png)
}
#franzi-slides {
  left: 0;
  top: 0;
  width: 1800px;
  height: 400px;
  background-image: url(../images/franzi-slides.png)
}
#ribbon-2-1 {
  left: 9390px;
  top: 80%
}
#ribbon-2-2 {
  left: 10735px;
  top: 80%
}
#ribbon-2-3 {
  left: 12240px;
  top: 80%
}
#monster1, .ribbon-absolute {
  position: absolute
}
.ribbon-container {
  position: absolute;
  width: 100%;
  height: 75px;
  top: 5%;
  text-align: center
}
.ribbon-left {
  position: relative;
  float: left;
  width: 55px;
  height: 75px;
  margin-right: -1px;
  background-image: url(../images/ribbon-left.png)
}
.ribbon-middle {
  position: relative;
  float: left;
  height: 40px;
  background-color: #000;
  font-family: lobster;
  color: #fff;
  font-size: 26px;
  text-align: center
}
.ribbon-right {
  position: relative;
  float: left;
  width: 55px;
  height: 75px;
  margin-left: -1px;
  background-image: url(../images/ribbon-right.png)
}
.ribbon-relative {
  display: inline-block
}
#monster1 {
  left: 380px;
  bottom: 53px;
  width: 620px;
  height: 492px
}
#monster1-body {
  position: absolute;
  left: 60px;
  bottom: 95px;
  width: 500px;
  height: 493px;
  background-image: url(../images/monster1-body.png)
}
.monster1-hand-a {
  position: absolute;
  left: 100;
  width: 160px;
  height: 137px;
  background-image: url(../images/monster1-hand-a.png)
}
.monster1-hand-b {
  left: 20px;
  width: 120px;
  background-image: url(../images/monster1-hand-b.png)
}
.monster1-hand-b, .monster1-hand-c, .monster1-hand-d {
  position: absolute;
  height: 137px
}
.monster1-hand-c {
  left: 60px;
  width: 40px;
  background-image: url(../images/monster1-hand-c.png)
}
.monster1-hand-d {
  left: 20px;
  width: 120px;
  background-image: url(../images/monster1-hand-d.png)
}
#monster1-hand-left, #monster1-hand-right {
  position: absolute;
  left: 100px;
  top: 370px;
  width: 160px;
  height: 137px
}
#monster1-hand-right {
  left: 365px
}
.sea {
  position: absolute;
  top: 90%
}
#sea-1 {
  left: 8100px;
  width: 5220px;
  height: 80%
}
#sea-2 {
  left: 19530px;
  width: 2970px;
  height: 10%;
  background-image: url("../images/bg_sea.png");
  background-color: #272452
}
#sea-floor {
  position: absolute
}
#sea-layer-horizontal-1, .sea-seal {
  width: 100%;
  background-image: url("../images/bg_sea.png");
  background-color: #222F58
}
.sea-seal {
  position: absolute;
  top: -1px;
  height: 2px
}
#sea-layer-horizontal-1 {
  left: 0;
  height: 85%
}
#sea-floor {
  left: 0;
  top: 170%;
  width: 22500px;
  height: 5%;
  background-color: #c69c6d
}
.sea-ribbon-container {
  position: absolute;
  height: 40px;
  right: 0
}
.sea-ribbon-left {
  position: relative;
  float: left;
  width: 20px;
  height: 40px;
  margin-right: -1px;
  background-image: url(../images/sea-ribbon-left.png)
}
.sea-ribbon-middle {
  position: relative;
  float: left;
  height: 34px;
  padding-top: 6px;
  padding-left: 2px;
  padding-right: 2px;
  background-color: #f26d7d;
  font-family: frankfurter-plain;
  color: #fff;
  font-size: 24px
}
.sea-ribbon-right {
  position: relative;
  float: left;
  width: 20px;
  height: 40px;
  margin-left: -1px;
  background-image: url(../images/sea-ribbon-right.png)
}
.sea-wave {
  position: absolute;
  bottom: 10%;
  height: 6px;
  background-image: url(../images/sea-wave.png)
}
#sea-wave-1 {
  left: 8100px;
  width: 5220px
}
#sea-wave-2 {
  left: 19530px;
  width: 2970px
}
#skill-1-container {
  left: 1020px
}
#skill-1-container, #skill-2-container, #skill-3-container {
  position: absolute;
  bottom: 0;
  width: 1000px;
  height: 90%
}
#skill-2-container {
  left: 2420px
}
#skill-3-container {
  left: 3820px
}
.skill-measurement {
  position: absolute;
  bottom: 0;
  height: 100%
}
.skill-measurement-1 {
  left: 270px
}
.skill-measurement-2 {
  left: 420px
}
.skill-measurement-3 {
  left: 570px
}
.skill-measurement-4 {
  left: 720px
}
.skill-measurement-5 {
  left: 870px
}
.skill-measurement-header {
  position: absolute;
  padding: 6px 10px 5px;
  background-color: #00bff3;
  font-family: frankfurter-medium-plain;
  color: #0072bc;
  font-size: 18px
}
.skill-measurement-line {
  position: absolute;
  width: 1px;
  height: 100%;
  background-color: #00bff3
}
.scroll-or-swipe-text-container {
  position: absolute;
  bottom: -120px;
  width: 100%;
  height: 50px;
  font-family: frankfurter-medium-plain;
  color: #fff;
  font-size: 30px;
  text-align: center;
  opacity: 0;
  filter: alpha(opacity=0)
}
#social-bottom {
  position: relative;
  left: 20px;
  width: 80px;
  height: 21px;
  margin-top: -1px;
  background-image: url(../images/social-bottom.png)
}
#social-container {
  position: absolute;
  width: 120px;
  left: 85%
}
#social-middle {
  position: relative;
  left: 20px;
  width: 70px;
  padding-top: 20px;
  padding-left: 10px;
  padding-bottom: 10px;
  background-color: #ed1c24
}
#social-top {
  position: relative;
  width: 120px;
  height: 23px;
  margin-bottom: -1px;
  background-image: url(../images/social-top.png)
}
.social-icon {
  position: relative;
  width: 60px;
  height: 60px;
  margin-bottom: 10px
}
#sound-consent-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  font-family: sans-serif;
}

#sound-consent-box {
  text-align: center;
  background: #222;
  padding: 2rem;
  border-radius: 10px;
  border: 2px solid #fff;
}

#sound-consent-button {
  margin-top: 1rem;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  background-color: #a67c52;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#splash-container, #monster2 {
  position: absolute;
  bottom: 20%;
  width: 1300px;
  height: 548px
}
#monster2 {
  left: 430px;
  bottom: 10px;
  width: 570px;
  height: 600px
}
#monster2-body {
  left: 60px;
  top: 0;
  width: 450px;
  height: 544px;
  background-image: url(../images/monster2-body.png)
}
#monster2-body, .monster2-hand-close, .monster2-hand-open {
  position: absolute
}
#monster2-hand-close-1 {
  left: 0;
  top: 399px;
  width: 80px;
  height: 83px;
  background-image: url(../images/monster2-hand-close-a.png)
}
#monster2-hand-close-2, #monster2-hand-close-3 {
  left: 100px;
  top: 510px;
  width: 82px;
  height: 81px;
  background-image: url(../images/monster2-hand-close-b.png)
}
#monster2-hand-close-3 {
  left: 388px;
  background-image: url(../images/monster2-hand-close-c.png)
}
#monster2-hand-close-4 {
  left: 490px;
  top: 399px;
  width: 80px;
  height: 83px;
  background-image: url(../images/monster2-hand-close-d.png)
}
#monster2-hand-open-1 {
  left: 0;
  top: 394px;
  width: 85px;
  height: 100px;
  background-image: url(../images/monster2-hand-open-a.png)
}
#monster2-hand-open-2, #monster2-hand-open-3 {
  left: 94px;
  top: 502px;
  width: 96px;
  height: 97px;
  background-image: url(../images/monster2-hand-open-b.png)
}
#monster2-hand-open-3 {
  left: 380px;
  background-image: url(../images/monster2-hand-open-c.png)
}
#monster2-hand-open-4 {
  left: 485px;
  top: 394px;
  width: 85px;
  height: 100px;
  background-image: url(../images/monster2-hand-open-d.png)
}
#title-about, #title-portfolio {
  position: absolute;
  left: 2280px;
  bottom: 20%;
  width: 800px;
  height: 400px;
  background-image: url(../images/title-about.png)
}
#title-portfolio {
  left: 19710px;
  width: 1060px;
  height: 420px;
  background-image: url(../images/title-portfolio.png)
}
#title-contact {
  position: absolute;
  top: 0;
  margin-left: -1040px;
  width: 1080px;
  height: 540px;
  background-image: url(../images/title-contact.png)
}
#title-experience, #title-wyschka {
  position: absolute;
  left: 13500px;
  bottom: 20%;
  width: 1140px;
  height: 400px;
  background-image: url(../images/title-experience.png)
}
#title-wyschka {
  left: 200px;
  bottom: 0;
  width: 880px;
  height: 300px;
  background-image: url(../images/title-wyschka.png)
}
#title-publication, #title-franzi {
  position: absolute;
  left: 19910px;
  bottom: 20%;
  width: 1180px;
  height: 300px;
  background-image: url(../images/title-publication.png)
}
#title-franzi {
  left: 0;
  bottom: 0;
  width: 840px;
  height: 420px;
  background-image: url(../images/title-franzi.png)
}
#title-skills {
  position: absolute;
  width: 820px;
  height: 400px;
  background-image: url(../images/title-skills.png)
}
.transparent {
  opacity: 0;
  filter: alpha(opacity=0)
}
#title-skills, #tree-1, #tree-2 {
  left: 0;
  bottom: 0
}
#tree-2 {
  left: 100px
}
#tree-3, #tree-4 {
  left: 240px;
  bottom: 0
}
#tree-4 {
  left: 880px
}
#tree-5, #tree-6 {
  left: 920px;
  bottom: 0
}
#tree-6 {
  left: 1060px
}
#tree-7 {
  left: 2650px;
  bottom: 20%
}
#tree-8 {
  left: 2750px
}
#tree-10, #tree-8, #tree-9 {
  bottom: 20%
}
#tree-9 {
  left: 3010px
}
#tree-10 {
  left: 2850px
}
#tree-11 {
  left: -100px;
  bottom: 0
}
#tree-12 {
  left: 20px;
  bottom: 0
}
#tree-13 {
  left: 140px;
  bottom: 0
}
#tree-14 {
  left: 260px;
  bottom: 0
}
#tree-15 {
  left: 380px;
  bottom: 0
}
#tree-16 {
  left: 500px;
  bottom: 0
}
#tree-17 {
  left: 620px;
  bottom: 0
}
#tree-18 {
  left: 740px;
  bottom: 0
}
#tree-19 {
  left: 860px;
  bottom: 0
}
#tree-20 {
  left: -100px;
  bottom: 0
}
#tree-21 {
  left: 0;
  bottom: 0
}
#tree-22 {
  left: 160px;
  bottom: 0
}
#tree-23 {
  left: 600px;
  bottom: 0
}
#tree-24 {
  left: 700px;
  bottom: 0
}
#tree-25 {
  left: 860px;
  bottom: 0
}
.tree-bright-a {
  position: absolute;
  width: 140px;
  height: 95px;
  background-image: url(../images/tree-bright-a.png)
}
.tree-bright-b, .tree-bright-c {
  position: absolute;
  width: 140px;
  height: 185px;
  background-image: url(../images/tree-bright-b.png)
}
.tree-bright-c {
  width: 200px;
  height: 240px;
  background-image: url(../images/tree-bright-c.png)
}
.tree-bright-d, .tree-bright-e, .tree-dark-a {
  position: absolute;
  width: 200px;
  height: 300px;
  background-image: url(../images/tree-bright-d.png)
}
.tree-bright-e, .tree-dark-a {
  height: 430px;
  background-image: url(../images/tree-bright-e.png)
}
.tree-dark-a {
  width: 140px;
  height: 95px;
  background-image: url(../images/tree-dark-a.png)
}
.tree-dark-b {
  width: 140px
}
.tree-dark-b, .tree-dark-c {
  position: absolute
}
.tree-dark-b {
  height: 185px;
  background-image: url(../images/tree-dark-b.png)
}
.tree-dark-c {
  width: 200px;
  height: 240px;
  background-image: url(../images/tree-dark-c.png)
}
.tree-dark-d {
  position: absolute;
  width: 200px;
  height: 300px;
  background-image: url(../images/tree-dark-d.png)
}
.tree-dark-e {
  width: 200px
}
.tree-dark-e, .seal {
  position: absolute
}
.tree-dark-e {
  height: 430px;
  background-image: url(../images/tree-dark-e.png)
}
.seal {
  width: 125px;
  height: 75px;
  overflow: hidden;
  background-image: url(../images/seal.png)
}
.seal-eyes {
  position: absolute;
  left: 5px;
  top: 5px;
  width: 39px;
  height: 18px;
  opacity: 0;
  filter: alpha(opacity=0);
  background-image: url(../images/seal-eyes.png)
}
#seal-ribbon-container-1 {
  top: 0
}
#seal-ribbon-container-2 {
  top: 100px
}
#seal-ribbon-container-3 {
  top: 200px
}
#seal-ribbon-container-4 {
  top: 300px
}
#seals-container, .waterfall {
  position: absolute;
  left: 270px;
  top: 50px;
  width: 725px;
  height: 475px
}
#seal-text-container {
  position: absolute;
  top: 65px;
  right: 760px;
  width: 480px;
  height: 440px
}
.waterfall {
  left: 150px;
  top: 0;
  width: 860px;
  height: 100%
}
#waterfall-1 {
  background-image: url("../images/waterfall-a.png")
}
#waterfall-2 {
  background-image: url(../images/waterfall-b.png)
}
.window {
  position: absolute;
  width: 190px;
  height: 110px;
  background-image: url(../images/window.png)
}