@font-face {
  font-family: SpecialElite-Regular;
  src: url(SpecialElite-Regular.ttf);
}

body {
  overflow: hidden;
}

button {
  border: none;
  height: 75px;
  width: 75px;
  position: fixed;
  z-index: 12;
  opacity: 1;
}

.play {
  background-color: rgba(255, 255, 255, 0);
  background-image: url(img/sound.png);
  background-size: cover;
}

.pause {
  background-color: rgba(255, 21, 21, 0);
  background-image: url(img/pause.png);
  background-size: cover;
}

button:active {
  opacity: 0.6;
}

.sound {
  height: 12vh;
  width: 12vh;
  position: fixed;
 left:4%;
  top:4%;
  z-index: 11;
}

.note {
  height: 40vh;
  width: 40vh;
  background-image: url(img/text-bg.png);
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  z-index:9;
  transition: opacity 3s;
  right:5%;
  bottom: 2.5%;
}

.text {
  height: 23vh;
  width: 23vh;
  position: absolute;
  right:8vh;
  top:8vh;
  overflow: scroll;
}

h1 {
  padding:0%;
  font-size: 2vh;
  color: rgb(47, 26, 10);
  text-shadow: 2px 2px 4px #ffffff;
  font-family: SpecialElite-Regular;
  line-height: 3vh;
}


.layerone {
  height: 100vh;
  width: 100vw;
  background-image: url(img/img3_0.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  z-index:10;
  transition: opacity 3s;
}

.layertwo {
  height: 100vh;
  width: 100vw;
  background-image: url(img/img3_1.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  z-index: 9;
  transition: opacity 3s;
}

.layerthree {
  height: 100vh;
  width: 100vw;
  background-image: url(img/img3_2.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  position: absolute;
  z-index: 8;
  transition: opacity 3s;
}

.layerfour {
  height: 100vh;
  width: 100vw;
  background-image: url(img/img3_3.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  position: absolute;
  z-index: 7;
  transition: opacity 3s;
}

.layerfive {
  height: 100vh;
  width: 100vw;
  background-image: url(img/img3_4.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  position: absolute;
  z-index: 6;
  transition: opacity 3s;
}

.layersix {
  height: 100vh;
  width: 100vw;
  background-image: url(img/img3_5.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  position: absolute;
  z-index: 5;
  transition: opacity 3s;
}

.layerseven {
  height: 100vh;
  width: 100vw;
  background-image: url(img/img3_6.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  z-index:4;
  transition: opacity 3s;
}

.layereight {
  height: 100vh;
  width: 100vw;
  background-image: url(img/img3_7.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  z-index: 3;
  transition: opacity 3s;
}

.layernine {
  height: 100vh;
  width: 100vw;
  background-image: url(img/img3_8.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  position: absolute;
  z-index: 2;
  transition: opacity 3s;
}

.layerten {
  height: 100vh;
  width: 100vw;
  background-image: url(img/img3_9.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  position: absolute;
  z-index: 1;
  transition: opacity 3s;
}

.layereleven {
  height: 100vh;
  width: 100vw;
  background-image: url(img/img3_10.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  position: absolute;
  z-index: 0;
  transition: opacity 3s;
}

.layertwelve {
  height: 100vh;
  width: 100vw;
  background-image: url(img/img3_11.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  position: absolute;
  z-index: -1;
  transition: opacity 3s;
}


.layerthirteen {
  height: 100vh;
  width: 100vw;
  background-image: url(img/img3_6.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  z-index: -2;
  transition: opacity 3s;
}

.layerfourteen {
  height: 100vh;
  width: 100vw;
  background-image: url(img/img3_7.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  position: absolute;
  z-index: -3;
  transition: opacity 3s;
}

.layerfifteen {
  height: 100vh;
  width: 100vw;
  background-image: url(img/img3_8.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  position: absolute;
  z-index: -4;
  transition: opacity 3s;
}

.layersixteen {
  height: 100vh;
  width: 100vw;
  background-image: url(img/img3_9.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  position: absolute;
  z-index: -5;
  transition: opacity 3s;
}

.layerseventeen {
  height: 100vh;
  width: 100vw;
  background-image: url(img/img3_10.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  position: absolute;
  z-index: -6;
  transition: opacity 3s;
}

body {
  background-color: black;
}


@media screen and (max-width:1024px) {


  .note {
    height: 30vh;
    width: 30vh;
    right:5%;
    bottom: 2.5%;
  }


.text {
  height: 17vh;
  width: 17vh;
  position: absolute;
  right:5vh;
  top:6vh;
  overflow: scroll;
}

h1 {
  padding:0%;
  font-size: 1.5vh;
  color: rgb(47, 26, 10);
  text-shadow: 2px 2px 4px #ffffff;
  font-family: SpecialElite-Regular;
  line-height: 2.5vh;
}

}