body {
  background: #000;
  animation: animate-background 6s linear;
}

.mute-btn {
  position: absolute;
  width: 50px;
  bottom: 10px;
  right: 10px;
  filter: invert(100%);
  z-index: 100;
}
.hd-btn {
  position: absolute;
  width: 50px;
  bottom: 10px;
  left: 10px;
  filter: invert(100%);
  z-index: 100;
}
.zelda-container {
  width: 768px;
  height: 432px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.game-container {
  width: 768px;
  height: 641px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.background-holder {
  position: absolute;
  width: 768px;
  height: 432px;
  background: url(../images/bg.png);
  animation: animate-background-picture 6s linear forwards;
}
.gamebg-holder {
  position: absolute;
  width: 768px;
  height: 641px;
  background: url(../images/gamebg.png);
}

.zelda-bag {
  position: absolute;
  bottom: 10px;
  right: 15px;
  width: 225px;
  height: 180px;
}
.rupees img {
  margin: 3px;
  height: 90%;
}
.rupees {
  display: inline-block;
  position: absolute;
  bottom: 23px;
  left: 18px;
  width: 450px;
  height: 180px;
}
.zelda-score {
  position: absolute;
  top: 175px;
  right: 15px;
  width: 225px;
  height: 190px;
}
.zelda-number {
  font-size: 45px;
  text-align: center;
}
.zelda-cost {
  position: absolute;
  top: 25px;
  right: 15px;
  width: 225px;
  height: 120px;
}
.zelda-header {
  font-size: 35px;
  padding-bottom: 15px;
}
.zelda-text {
  font-family: "Old Standard TT";
  font-weight: bolder;
  color: #aaa;
  font-size: 28px;
  text-fill-color: #ddd;
  stroke-fill-color: #8b3536;
  text-stroke-width: 0.2px;
  text-shadow: 0 0 2px #000;
}
.zelda-main {
  position: absolute;
  top: 25px;
  left: 25px;
  width: 445px;
  height: 340px;
}
p {
  padding-bottom: 10px;
}
.zeldatext {
  position: absolute;
  top: 100px;
  left: 140px;
  width: 505px;
  height: 220px;
  animation: showZeldaText 6.5s linear;
  font-weight: bolder;
}
.zeldatext h1 {
  position: absolute;
  top: 60px;
  margin: 0;
  font-size: 180px;
  line-height: 180px;
  font-family: "EB Garamond", Serif;
  padding-left: 80px;
  color: #8b3536;
  text-fill-color: #b62f22;
  stroke-fill-color: #8b3536;
  text-stroke-width: 2px;
  letter-spacing: -5px;
}
.zeldatext h1 .z {
  position: absolute;
  left: -80px;
  top: 0px;
  font-size: 280px;
}
.zeldatext h1 span.closer {
  letter-spacing: -28px;
}
.zeldatext h2, .zeldatext h3 {
  position: absolute;
  text-transform: uppercase;
  font-family: "Old Standard TT";
  color: #aaa;
  font-size: 40px;
  text-fill-color: #ddd;
  stroke-fill-color: #8b3536;
  text-stroke-width: 0.2px;
  text-shadow: 0 0 2px #000;
}
.zeldatext h4 {
  position: absolute;
  text-transform: uppercase;
  font-family: "Old Standard TT";
  color: #aaa;
  font-size: 20px;
  text-fill-color: #ddd;
  stroke-fill-color: #8b3536;
  text-stroke-width: 0.2px;
  text-shadow: 0 0 2px #000;
  top: 290px;
  text-align: center;
  width: 100%;
  animation: showZeldaText 13s linear;
}
.zeldatext h2 {
  top: 30px;
  left: 100px;
}
.zeldatext h3 {
  top: 215px;
  left: 100px;
  width: 500px;
}
.zeldatext h3 a {
  text-decoration: none;
  color: #aaa;
  text-fill-color: #ddd;
}

.stage {
  width: 300px;
  height: 300px;
  left: 255px;
  top: 65px;
  position: absolute;
  perspective: 800px;
  perspective-origin: 50% 190px;
}
.stage .triangle {
  position: absolute;
  top: 0;
  left: 75px;
  width: 150px;
  height: 150px;
  transform-style: preserve-3d;
  /*transform-origin: 125px 50%;*/
}
.stage .triangle.one {
  animation: rotate 5s infinite linear, introduce-1 5s linear;
}
.stage .triangle.two {
  top: 150px;
  left: 0;
  animation: rotate 5s infinite linear, introduce-2 5s linear;
}
.stage .triangle.three {
  top: 150px;
  left: 150px;
  animation: rotate 5s infinite linear, introduce-3 5s linear;
}
.stage .triangle figure {
  display: block;
  position: absolute;
  backface-visibility: hidden;
}
.stage .triangle figure.front {
  width: 0;
  height: 0;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  border-bottom: 150px solid #ffe403;
  transform: translateZ(20px);
}
.stage .triangle figure.back {
  width: 0;
  height: 0;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  border-bottom: 150px solid #ffe403;
  transform: rotateY(180deg) translateZ(20px);
}
.stage .triangle figure.side1 {
  content: " ";
  display: block;
  position: absolute;
  height: 168px;
  width: 40px;
  background-color: #ffd200;
  transform: translateY(-9px) translateX(18px) rotateY(-90deg) rotateX(26.5deg);
}
.stage .triangle figure.side2 {
  content: " ";
  display: block;
  position: absolute;
  height: 168px;
  width: 40px;
  background-color: #ffd200;
  transform: translateY(-9px) translateX(92px) rotateY(90deg) rotateX(26.5deg);
}
.stage .triangle figure.side3 {
  content: " ";
  background-color: #ffd200;
  width: 150px;
  height: 40px;
  transform: translateY(130px) rotateX(-90deg);
}

@keyframes rotate {
  0% {
    -moz-transform: rotateY(0);
    -ms-transform: rotateY(0);
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  100% {
    -moz-transform: rotateY(360deg);
    -ms-transform: rotateY(360deg);
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}

@keyframes showZeldaText {
  0%, 80% {
    -moz-transform: scale(0.6) translateZ(-100px);
    -ms-transform: scale(0.6) translateZ(-100px);
    -webkit-transform: scale(0.6) translateZ(-100px);
    transform: scale(0.6) translateZ(-100px);
    opacity: 0;
    -webkit-filter: blur(2px);
  }
  90% {
    -webkit-filter: blur(0);
  }
  100% {
    -moz-transform: scale(1) translateZ(0);
    -ms-transform: scale(1) translateZ(0);
    -webkit-transform: scale(1) translateZ(0);
    transform: scale(1) translateZ(0);
    opacity: 1;
  }
}

@keyframes introduce-1 {
  0% {
    top: -200px;
    opacity: 0;
  }
  45% {
    top: -100px;
    -moz-transform: rotateY(180deg) rotateX(-180deg);
    -ms-transform: rotateY(180deg) rotateX(-180deg);
    -webkit-transform: rotateY(180deg) rotateX(-180deg);
    transform: rotateY(180deg) rotateX(-180deg);
    opacity: 1;
  }
  90%, 100% {
    top: 0;
    -moz-transform: rotateY(360deg) rotateX(-360deg);
    -ms-transform: rotateY(360deg) rotateX(-360deg);
    -webkit-transform: rotateY(360deg) rotateX(-360deg);
    transform: rotateY(360deg) rotateX(-360deg);
  }
}

@keyframes introduce-2 {
  0% {
    left: -150px;
    top: 250px;
    opacity: 0;
  }
  45% {
    left: -75px;
    top: 200px;
    -moz-transform: rotateY(180deg) rotateX(-180deg);
    -ms-transform: rotateY(180deg) rotateX(-180deg);
    -webkit-transform: rotateY(180deg) rotateX(-180deg);
    transform: rotateY(180deg) rotateX(-180deg);
    opacity: 1;
  }
  90%, 100% {
    top: 150px;
    left: 0;
    -moz-transform: rotateY(360deg) rotateX(-360deg);
    -ms-transform: rotateY(360deg) rotateX(-360deg);
    -webkit-transform: rotateY(360deg) rotateX(-360deg);
    transform: rotateY(360deg) rotateX(-360deg);
  }
}

@keyframes introduce-3 {
  0% {
    left: 350px;
    top: 250px;
    opacity: 0;
  }
  45% {
    left: 275px;
    top: 200px;
    -moz-transform: rotateY(180deg) rotateX(-180deg);
    -ms-transform: rotateY(180deg) rotateX(-180deg);
    -webkit-transform: rotateY(180deg) rotateX(-180deg);
    transform: rotateY(180deg) rotateX(-180deg);
    opacity: 1;
  }
  90%, 100% {
    top: 150px;
    left: 150px;
    -moz-transform: rotateY(360deg) rotateX(-360deg);
    -ms-transform: rotateY(360deg) rotateX(-360deg);
    -webkit-transform: rotateY(360deg) rotateX(-360deg);
    transform: rotateY(360deg) rotateX(-360deg);
  }
}

@keyframes animate-background {
  0% {
    background: #000;
  }
  83% {
    background: #000;
  }
  84% {
    background: #fff;
  }
  87%, 100% {
    background: #000;
  }
}

@keyframes animate-background-picture {
  0%,86% {
    opacity: 0;
  }
  86.01%, 100% {
    opacity: 1;
  }
}