html, body{margin:0; width:100%;height:100%;overflow:hidden;}

#space {
  perspective: 800px;
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  font-size: 187.5%;
}
.face {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.scene, .shape, .face, .face-wrapper, .cr {
  position: absolute;
  transform-style: preserve-3d;
}
.scene {
  width: 80em;
  height: 80em;
  top: 50%;
  left: 50%;
  margin: -40em 0 0 -40em;
}
.shape {
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-origin: 50%;
}
.face, .face-wrapper {
  overflow: hidden;
  transform-origin: 0 0;
  backface-visibility: hidden;
  /* hidden by default, prevent blinking and other weird rendering glitchs */
}
.face {
  background-size: 100% 100%!important;
  background-position: center;
}
.face-wrapper .face {
  left: 100%;
  width: 100%;
  height: 100%
}
.photon-shader {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%
}
.side {
  left: 50%;
}
.cr, .cr .side {
  height: 100%;
}
[class*="cuboid"] .ft, [class*="cuboid"] .bk {
  width: 100%;
  height: 100%;
}
[class*="cuboid"] .bk {
  left: 100%;
}
[class*="cuboid"] .rt {
  transform: rotateY(-90deg) translateX(-50%);
}
[class*="cuboid"] .lt {
  transform: rotateY(90deg) translateX(-50%);
}
[class*="cuboid"] .tp {
  transform: rotateX(90deg) translateY(-50%);
}
[class*="cuboid"] .bm {
  transform: rotateX(-90deg) translateY(-50%);
}
[class*="cuboid"] .lt {
  left: 100%;
}
[class*="cuboid"] .bm {
  top: 100%;
}
[class*="pyramid"] .face-wrapper .face {
  transform: rotateZ(45deg) translateX(-35.35%) translateY(35.35%);
}
[class*="pyramid"] .bk {
  left: 100%;
}
[class*="pyramid"] .bm {
  top: 100%;
  transform: rotateX(-90deg) translateY(-50%);
}
[class*="pyramid"] .rt, [class*="pyramid"] .lt {
  transform-origin: 50% 0;
}
[class*="cylinder"] .tp {
  transform: rotateX(90deg) translateY(-50%);
}
[class*="cylinder"] .bm {
  transform: rotateX(-90deg) translateY(-50%);
}
[class*="cylinder"] .tp, [class*="cylinder"] .bm, [class*="cylinder"] .tp .photon-shader, [class*="cylinder"] .bm .photon-shader {
  border-radius: 50%;
}
[class*="cylinder"] .bm {
  top: 100%;
}
/* .VHS styles */
.VHS {
 position: relative; transform:translate3D(2.9047619047619038em, 0.08823529411764708em, 4.436507936507938em) rotateX(0deg) rotateY(-65.1deg) rotateZ(0deg);
  opacity:1;
  width:5.481em;
  height:9.838em;
  margin:-4.919em 0 0 -2.7405em;
}
.VHS .ft {
  transform:translateZ(0.65515em);
}
.VHS .bk {
  transform:translateZ(-0.65515em) rotateY(180deg);
}
.VHS .rt, .VHS .lt {
  width:1.3103em;
  height:9.838em;
}
.VHS .tp, .VHS .bm {
  width:5.481em;
  height:1.3103em;
}
.VHS .face {
  background-color:#FFFFFF;
}
.VHS .ft {
  background:url(/img/sony_dynamicron_front.jpg);
}
.VHS .bk {
  background:url(/img/sony_dynamicron_back.jpg);
}
.VHS .tp {
  background:url(/img/sony_dynamicron_top.jpg);
}
.VHS .bm {
  background:url(/img/sony_dynamicron_bottom.jpg);
}
.VHS .lt {
  background:url(/img/sony_dynamicron_tape.jpg);
}
.VHS .rt {
  background:url(/img/sony_dynamicron_spine.jpg);
}
/* .pyr-1 styles */
.pyr-1 {
  transform:translate3D(-0.4365079365079372em, 4.373015873015874em, 5.73809523809524em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:0.61;
  width:2.0555555555555554em;
  height:1.325396825396826em;
  margin:-0.662698412698413em 0 0 -1.0277777777777777em;
}
.pyr-1 .face-wrapper {
  width:2.0555555555555554em;
  height:1.0277777777777777em;
}
.pyr-1 .face-wrapper .face {
  width:2.0555555555555554em;
  height:2.0555555555555554em;
}
.pyr-1 .ft {
  transform:scaleZ(1.6318714494356452) scaleY(1.6318714494356452) rotateX(37.79175680434453deg);
}
.pyr-1 .bk {
  transform:scaleZ(1.6318714494356452) scaleY(1.6318714494356452) rotateX(-37.79175680434453deg) rotateY(180deg);
}
.pyr-1 .rt {
  transform:scaleX(1.6318714494356452) scaleY(1.6318714494356452) rotateZ(37.79175680434453deg) rotateY(-90deg);
}
.pyr-1 .lt {
  transform:scaleX(1.6318714494356452) scaleY(1.6318714494356452) rotateZ(-37.79175680434453deg) rotateY(90deg);
}
.pyr-1 .bm {
  width:2.0555555555555554em;
  height:2.0555555555555554em;
}
.pyr-1 .face {
  background-color:#ff6cd1;
}
/* .VHS-1 styles */
.VHS-1 {
  transform:translate3D(3.8968253968253976em, 0.11490683229813667em, -4.0396825396825395em) rotateX(0deg) rotateY(62.4deg) rotateZ(0deg);
  opacity:1;
  width:5.481em;
  height:9.838em;
  margin:-4.919em 0 0 -2.7405em;
}
.VHS-1 .ft {
  transform:translateZ(0.65515em);
}
.VHS-1 .bk {
  transform:translateZ(-0.65515em) rotateY(180deg);
}
.VHS-1 .rt, .VHS-1 .lt {
  width:1.3103em;
  height:9.838em;
}
.VHS-1 .tp, .VHS-1 .bm {
  width:5.481em;
  height:1.3103em;
}
.VHS-1 .face {
  background-color:#FFFFFF;
}
.VHS-1 .ft {
  background:url(/img/palsonic_front.jpg);
}
.VHS-1 .bk {
  background:url(/img/palsonic_back.jpg);
}
.VHS-1 .tp {
  background:url(/img/palsonic_top.jpg);
}
.VHS-1 .bm {
  background:url(/img/palsonic_bottom.jpg);
}
.VHS-1 .lt {
  background:url(/img/sony_dynamicron_tape.jpg);
}
.VHS-1 .rt {
  background:url(/img/palsonic_spine.jpg);
}
/* .pyr-2 styles */
.pyr-2 {
  transform:translate3D(-3.783882783882782em, 4.4525365701836295em, 2.35673585673586em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:0.56;
  width:1.571428571428573em;
  height:1.1428571428571432em;
  margin:-0.5714285714285716em 0 0 -0.7857142857142865em;
}
.pyr-2 .face-wrapper {
  width:1.571428571428573em;
  height:0.7857142857142865em;
}
.pyr-2 .face-wrapper .face {
  width:1.571428571428573em;
  height:1.571428571428573em;
}
.pyr-2 .ft {
  transform:scaleZ(1.7651352580861446) scaleY(1.7651352580861446) rotateX(34.50852298766842deg);
}
.pyr-2 .bk {
  transform:scaleZ(1.7651352580861446) scaleY(1.7651352580861446) rotateX(-34.50852298766842deg) rotateY(180deg);
}
.pyr-2 .rt {
  transform:scaleX(1.7651352580861446) scaleY(1.7651352580861446) rotateZ(34.50852298766842deg) rotateY(-90deg);
}
.pyr-2 .lt {
  transform:scaleX(1.7651352580861446) scaleY(1.7651352580861446) rotateZ(-34.50852298766842deg) rotateY(90deg);
}
.pyr-2 .bm {
  width:1.571428571428573em;
  height:1.571428571428573em;
}
.pyr-2 .face {
  background-color:#a136e8;
}
/* .pyr-4 styles */
.pyr-4 {
  transform:translate3D(0.03418803418803584em, 4.419856831621538em, -5.010175010175008em) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
  opacity:0.63;
  width:2.032967032967033em;
  height:1.1428571428571432em;
  margin:-0.5714285714285716em 0 0 -1.0164835164835164em;
}
.pyr-4 .face-wrapper {
  width:2.032967032967033em;
  height:1.0164835164835164em;
}
.pyr-4 .face-wrapper .face {
  width:2.032967032967033em;
  height:2.032967032967033em;
}
.pyr-4 .ft {
  transform:scaleZ(1.5046943830118293) scaleY(1.5046943830118293) rotateX(41.65063234904432deg);
}
.pyr-4 .bk {
  transform:scaleZ(1.5046943830118293) scaleY(1.5046943830118293) rotateX(-41.65063234904432deg) rotateY(180deg);
}
.pyr-4 .rt {
  transform:scaleX(1.5046943830118293) scaleY(1.5046943830118293) rotateZ(41.65063234904432deg) rotateY(-90deg);
}
.pyr-4 .lt {
  transform:scaleX(1.5046943830118293) scaleY(1.5046943830118293) rotateZ(-41.65063234904432deg) rotateY(90deg);
}
.pyr-4 .bm {
  width:2.032967032967033em;
  height:2.032967032967033em;
}
.pyr-4 .face {
  background-color:#7aa7fd;
}
/* .pyr-3 styles */
.pyr-3 {
  transform:translate3D(6.9184981684981715em, 4.426220780709945em, -2.4979007347428364em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:0.6;
  width:1.571428571428573em;
  height:1.1428571428571432em;
  margin:-0.5714285714285716em 0 0 -0.7857142857142865em;
}
.pyr-3 .face-wrapper {
  width:1.571428571428573em;
  height:0.7857142857142865em;
}
.pyr-3 .face-wrapper .face {
  width:1.571428571428573em;
  height:1.571428571428573em;
}
.pyr-3 .ft {
  transform:scaleZ(1.7651352580861446) scaleY(1.7651352580861446) rotateX(34.50852298766842deg);
}
.pyr-3 .bk {
  transform:scaleZ(1.7651352580861446) scaleY(1.7651352580861446) rotateX(-34.50852298766842deg) rotateY(180deg);
}
.pyr-3 .rt {
  transform:scaleX(1.7651352580861446) scaleY(1.7651352580861446) rotateZ(34.50852298766842deg) rotateY(-90deg);
}
.pyr-3 .lt {
  transform:scaleX(1.7651352580861446) scaleY(1.7651352580861446) rotateZ(-34.50852298766842deg) rotateY(90deg);
}
.pyr-3 .bm {
  width:1.571428571428573em;
  height:1.571428571428573em;
}
.pyr-3 .face {
  background-color:#a136e8;
}



/* .VHS-2 styles */
.VHS-2 {
  transform:translate3D(-3.738095238095238em, 0.1099744245524299em, -1.5200138026224963em) rotateX(0deg) rotateY(-27.7deg) rotateZ(0deg);
  opacity:1;
  width:5.481em;
  height:9.838em;
  margin:-4.919em 0 0 -2.7405em;
}
.VHS-2 .ft {
  transform:translateZ(0.65515em);
}
.VHS-2 .bk {
  transform:translateZ(-0.65515em) rotateY(180deg);
}
.VHS-2 .rt, .VHS-2 .lt {
  width:1.3103em;
  height:9.838em;
}
.VHS-2 .tp, .VHS-2 .bm {
  width:5.481em;
  height:1.3103em;
}
.VHS-2 .face {
  background-color:#FFFFFF;
}
.VHS-2 .ft {
background:url(/img/polaroid_front.jpg);
}
.VHS-2 .bk {
  background:url(/img/polaroid_back.jpg);
}
.VHS-2 .tp {
  background:url(/img/polaroid_top.jpg);
}
.VHS-2 .bm {
  background:url(/img/polaroid_bottom.jpg);
}
.VHS-2 .lt {
  background:url(/img/sony_dynamicron_tape.jpg);
}
.VHS-2 .rt {
  background:url(/img/polaroid_spine.jpg);
}

/* .cyl-1 styles */
.cyl-1 {
  transform:translate3D(1em, 5.11em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:19.000000000000004em;
  height:0.20000000000000107em;
  margin:-0.10000000000000053em 0 0 -9.500000000000002em;

}
.cyl-1 .tp{
  width:19.000000000000004em;
  height:19.000000000000004em;
}
.cyl-1 .face.tp{

}

/* spin the scene */
.scene {
-webkit-animation: turn 10s infinite linear;
  animation: turn 10s infinite linear;
}
@-webkit-keyframes turn {
  0% {   -webkit-transform: rotateY(0) ;}
  100% {  -webkit-transform: rotateY(360deg) ; }
}
@keyframes turn {
  0% {   transform: rotateY(0) ;}
  100% {  transform: rotateY(360deg) ; }
}

/* space to the left */
#space{
    background-color: #0096BB;
    background-image: url(https://media.giphy.com/media/QGNQ7qV3uSlri/giphy.gif);
    background-size:cover;
  background-position: center;


}
#info-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.7); /* Semi-transparent black */
  color: white;
  border-radius: 10px;
  font-family: Arial, sans-serif;
  text-align: center;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
}

#info-box h2 {
  margin-top: 0;
  font-size: 24px;
}

#info-box ul {
  list-style-type: none;
  padding: 0;
}

#info-box ul li {
  margin: 5px 0;
}

#info-box a {
  color: #00bfff;
  text-decoration: none;
  font-weight: bold;
}

#info-box a:hover {
  text-decoration: underline;
}