*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body, html {
  width: 100%;
  height: 100%;
}

body {
  background-color: rgb(30, 65, 93);
  overflow: hidden;
  perspective: 2000px;
  perspective-origin: center calc(50% - 100px);
}

.container {
  display: grid;
  align-items: end;
  transform-style: preserve-3d;
  justify-content: center;
  transform: translateY(200px) rotateX(-16deg) translateZ(-300px);
  width: 100%;
  height: 100%;
}
.container .scene {
  background-image: radial-gradient(#8CDCFE 5%, rgba(0, 0, 0, 0) 70%);
  width: 800px;
  height: 800px;
  transform-style: preserve-3d;
  display: grid;
  transform: translateZ(119px) rotateX(90deg) rotate(0deg);
  place-items: center;
}
.container .scene .frame {
  width: 700px;
  height: 450px;
  transform-style: preserve-3d;
  transform: translateZ(225px) rotateX(-90deg);
}
.container .scene .frame .child {
  position: relative;
  transform-style: preserve-3d;
}
.container .scene .frame .child:nth-child(1), .container .scene .frame .child:nth-child(3) {
  width: 700px;
  height: 50px;
}
.container .scene .frame .child:nth-child(1) .sides.top-side, .container .scene .frame .child:nth-child(3) .sides.top-side {
  transform: translateY(-25px) translateZ(0px) rotateX(90deg);
  background-color: #D2B48C;
}
.container .scene .frame .child:nth-child(1) .sides.bottom-side, .container .scene .frame .child:nth-child(3) .sides.bottom-side {
  transform: translateY(25px) translateZ(0px) rotateX(-90deg);
  background-color: #ac6938;
}
.container .scene .frame .child:nth-child(1) .sides.front-side, .container .scene .frame .child:nth-child(3) .sides.front-side {
  transform: translateY(0px) translateZ(25px) rotateX(0deg);
}
.container .scene .frame .child:nth-child(1) .sides.back-side, .container .scene .frame .child:nth-child(3) .sides.back-side {
  transform: translateY(0px) translateZ(-25px) rotateX(0deg);
}
.container .scene .frame .child:nth-child(2), .container .scene .frame .child:nth-child(4) {
  transform: rotate(90deg);
  width: 700px;
  height: 50px;
}
.container .scene .frame .child:nth-child(2) .sides, .container .scene .frame .child:nth-child(4) .sides {
  width: 350px;
}
.container .scene .frame .child:nth-child(2) .sides.top-side, .container .scene .frame .child:nth-child(4) .sides.top-side {
  transform: translateY(-25px) translateZ(0px) rotateX(90deg);
  background-color: #987554;
  background-position: 0% 0%;
}
.container .scene .frame .child:nth-child(2) .sides.bottom-side, .container .scene .frame .child:nth-child(4) .sides.bottom-side {
  transform: translateY(25px) translateZ(0px) rotateX(-90deg);
  background-color: #B99976;
  background-position: 0% 33.33%;
}
.container .scene .frame .child:nth-child(2) .sides.front-side, .container .scene .frame .child:nth-child(4) .sides.front-side {
  transform: translateY(0px) translateZ(25px) rotateX(0deg);
  background-position: 0% 66.66%;
}
.container .scene .frame .child:nth-child(2) .sides.back-side, .container .scene .frame .child:nth-child(4) .sides.back-side {
  transform: translateY(0px) translateZ(-25px) rotateX(0deg);
  background-position: 0% 100%;
}
.container .scene .frame .child:nth-child(2) {
  top: calc(50% + 100px);
  left: calc(-50% + 25px);
}
.container .scene .frame .child:nth-child(2) .sides.bottom-side {
  width: 450px;
  transform: translateX(-50px) translateY(25px) translateZ(0px) rotateX(-90deg);
}
.container .scene .frame .child:nth-child(3) {
  top: calc(100% - 150px);
}
.container .scene .frame .child:nth-child(4) {
  top: 50%;
  left: calc(50% - 25px);
}
.container .scene .frame .child:nth-child(4) .sides.top-side {
  width: 450px;
  transform: translateX(-50px) translateY(-25px) translateZ(0px) rotateX(90deg);
}
.container .scene .frame .child .sides {
  position: absolute;
  background-image: url(../assets/wood04.png);
  background-size: 100% 400%;
  background-repeat: no-repeat;
  width: 700px;
  height: 50px;
  background-color: #f9d495;
}
.container .scene .frame .image-container {
  position: relative;
  width: 600px;
  height: 350px;
  transform: rotate(0deg);
  top: -150px;
  transform-style: preserve-3d;
  left: 50px;
  display: flex;
}
.container .scene .frame .image-container .image-segment {
  position: relative;
  width: 30px;
  height: 100%;
  transform-origin: center top;
  transform-style: preserve-3d;
  -webkit-animation: rotate-image 30s infinite linear;
          animation: rotate-image 30s infinite linear;
  left: 0;
}
.container .scene .frame .image-container .image-segment:nth-child(1) .front {
  background-position: 0% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(1) .back {
  background-position: 0% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(2) .front {
  background-position: 5.2631578947% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(2) .back {
  background-position: 5.2631578947% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(3) .front {
  background-position: 10.5263157895% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(3) .back {
  background-position: 10.5263157895% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(4) .front {
  background-position: 15.7894736842% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(4) .back {
  background-position: 15.7894736842% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(5) .front {
  background-position: 21.0526315789% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(5) .back {
  background-position: 21.0526315789% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(6) .front {
  background-position: 26.3157894737% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(6) .back {
  background-position: 26.3157894737% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(7) .front {
  background-position: 31.5789473684% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(7) .back {
  background-position: 31.5789473684% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(8) .front {
  background-position: 36.8421052632% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(8) .back {
  background-position: 36.8421052632% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(9) .front {
  background-position: 42.1052631579% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(9) .back {
  background-position: 42.1052631579% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(10) .front {
  background-position: 47.3684210526% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(10) .back {
  background-position: 47.3684210526% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(11) .front {
  background-position: 52.6315789474% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(11) .back {
  background-position: 52.6315789474% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(12) .front {
  background-position: 57.8947368421% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(12) .back {
  background-position: 57.8947368421% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(13) .front {
  background-position: 63.1578947368% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(13) .back {
  background-position: 63.1578947368% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(14) .front {
  background-position: 68.4210526316% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(14) .back {
  background-position: 68.4210526316% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(15) .front {
  background-position: 73.6842105263% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(15) .back {
  background-position: 73.6842105263% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(16) .front {
  background-position: 78.9473684211% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(16) .back {
  background-position: 78.9473684211% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(17) .front {
  background-position: 84.2105263158% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(17) .back {
  background-position: 84.2105263158% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(18) .front {
  background-position: 89.4736842105% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(18) .back {
  background-position: 89.4736842105% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(19) .front {
  background-position: 94.7368421053% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(19) .back {
  background-position: 94.7368421053% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(20) .front {
  background-position: 100% 0%;
}
.container .scene .frame .image-container .image-segment:nth-child(20) .back {
  background-position: 100% 0%;
}
.container .scene .frame .image-container .image-segment div {
  position: absolute;
  width: 30px;
  height: 100%;
  background-size: 2000% 100%;
  transform-origin: center top;
  box-shadow: 1px 0 0 1px rgba(0, 0, 0, 0.2) inset;
  transform: rotateY(10deg);
  top: 0;
  left: 0;
  -webkit-animation: brightness 15s infinite linear;
          animation: brightness 15s infinite linear;
}
.container .scene .frame .image-container .image-segment .front {
  background-image: url(../assets/front.jpg);
  transform: translateZ(0.25px) rotateY(0deg);
}
.container .scene .frame .image-container .image-segment .back {
  background-image: url(../assets/back.jpg);
  transform: translateZ(-0.25px) rotateY(0deg);
}
@-webkit-keyframes rotate-image {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@keyframes rotate-image {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@-webkit-keyframes brightness {
  0%, 45% {
    filter: brightness(1);
  }
  45%, 65% {
    filter: brightness(0);
  }
  65%, 100% {
    filter: brightness(1);
  }
}
@keyframes brightness {
  0%, 45% {
    filter: brightness(1);
  }
  45%, 65% {
    filter: brightness(0);
  }
  65%, 100% {
    filter: brightness(1);
  }
}
.container .scene::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#8CDCFE 5%, rgba(0, 0, 0, 0) 70%);
  filter: blur(20px);
}
.container .scene::after {
  position: absolute;
  content: "";
  width: 706px;
  height: 56px;
  background-color: rgb(30, 65, 93);
  top: calc(50% - 28px);
  left: calc(50% - 353px);
  filter: blur(10px);
}
@-webkit-keyframes rotating {
  to {
    transform: translateZ(119px) rotateX(90deg) rotate(360deg);
  }
}
@keyframes rotating {
  to {
    transform: translateZ(119px) rotateX(90deg) rotate(360deg);
  }
}/*# sourceMappingURL=style.css.map */