body {
  background: #f3f3f3;
}
.world {
  position: absolute;
  margin:auto;
  left:0;
  right:0;
  top:0px;
  bottom:0;
  width:800px;
  height:200px;
}
a {
  position: relative;
  letter-spacing: 2px;
  font-family: "verdana";
  font-size: 12px;
  color: #F48FB1;
  text-decoration: none;
}
/* 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.8;
}
.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);
  }
}