/* vk5_3D.CSS 1.01 December 2024 by Jelle Beks */

body {
  font-family: Roboto, sans-serif;
  margin: 0;
  height: 100vh;
  display: grid;
  place-items: center;
/*  perspective:25vw; */  
  perspective:50vw;  
  overflow: hidden;
  background:#efefef;
}  


#track {
  width:1px;
  height:1px;
  background:red;
  position:absolute;
  top:50vh;
  left:50vw;
  z-index:99;
  display:none;
}

/* div { */
.layer {
/*  width: 1500px;
  height: 766px;   */
  left:-50vw;
  top:-50vh;
  width: 200vw;
  height: 200vh;
  display: grid;
  /*flex-direction: column; */
  text-align: center;   
  position: absolute;
  overflow:hidden;
  /*     outline:5px solid red; */
  /*   background:rgba(255,0,0,.25); */
  /*   border-radius:50%; */
}

div:nth-child(5) {
/*   outline:1500px solid #222; */
/*   box-shadow:inset 0 0 2px 0px rgba(0,0,0,.75); */
}





/* card */
#layer30 {
  /*  background:url('http://www.kitjenson.com/images/layer1.png'); */
  background-size:100% 100%;
  transform:rotateY(2.5deg) rotateX(-.5deg) translate(0%,0%);
}  
/* card2 */
#layer20 {
  /* background:url('http://www.kitjenson.com/images/layer2.png'); */
  background-size:100% 100%;
  transform:rotateY(2.5deg) rotateX(-.5deg) translate(-5%,-1%);
}  
/* card3 */
#layer10 {
  /* background:url('http://www.kitjenson.com/images/layer3.png'); */
  background-size:100% 100%;
  transform:rotateY(2.5deg) rotateX(-.5deg) translate(-10%,-2%);
}  
/* card4 */
#layer00 {
  /* background:url('http://www.kitjenson.com/images/layer4.png'); */
  background-size:100% 100%;
  transform:rotateY(2.5deg) rotateX(-.5deg) translate(-15%,-3%); 
}