#hearts {
  display: none;
  z-index: 3000;
}
.world {
  position: absolute;
  margin:auto;
  left:0;
  right:0;
  top:0px;
  bottom:0;
  width:800px;
  height:200px;
}

/* BASIC CUBE CREATION */
/* BASIC CUBE CREATION */
/* BASIC CUBE CREATION */

.box {
  position:absolute;
  margin:auto;
  left:0;
  right:0;
  top:0;
  bottom:0;
  width: 100px;
  height: 100px;
  animation: rotate 5s ease-in-out infinite;
  transform-style: preserve-3d;
}
.box:nth-of-type(1) {
  animation-delay:-5s;
  left:-600px;
}
.box:nth-of-type(2) {
  animation-delay:-4s;
  left:-300px;
}
.box:nth-of-type(3) {
  animation-delay:-3s;
  left:0px;
}
.box:nth-of-type(4) {
  animation-delay:-2s;
  left:300px;
}
.box:nth-of-type(5) {
  animation-delay:-1s;
  left:600px;
}
.plane1, .plane2 {
  position: absolute;
  opacity:0.7;
}
.plane2 {
  transform: rotateY(90deg);
}
.heart {
  background-color: pink;
  height: 50px;
  transform: rotate(-45deg);
  width: 50px;
}
.heart:before {
  content: "";
  background-color: pink;
  border-radius: 100%;
  height: 50px;
  position: absolute;
  width: 50px;
  top:-25px;
}
.heart:after {
  content: "";
  background-color: pink;
  border-radius: 100%;
  height: 50px;
  position: absolute;
  width: 50px;
  top:0px;
  left:25px;
}

/* Rotation animation to actually see the cube */

@keyframes rotate {
  0% {
    transform: rotateY(0deg) rotateZ(25deg) translateY(50px);
  }
  50% {
    transform: rotateY(270deg) rotateZ(25deg) translateY(-50px);
  }
  100% {
    transform: rotateY(360deg) rotateZ(25deg) translateY(50px);
  }
}