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); }
}