#main {
	margin: 0 auto;
	width: 90%;
	min-width: 500px;
}
.heart:before,
.heart:after {
	position: absolute;
	content: "";
	left: 50px;
	top: 0;
	width: 50px;
	height: 80px;
	background: #f09;
	-moz-border-radius: 50px 50px 0 0;
	border-radius: 50px 50px 0 0;
	-webkit-transform: rotate(-45deg);
	   -moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		 -o-transform: rotate(-45deg);
			transform: rotate(-45deg);
	-webkit-transform-origin: 0 100%;
	   -moz-transform-origin: 0 100%;
		-ms-transform-origin: 0 100%;
		 -o-transform-origin: 0 100%;
			transform-origin: 0 100%;
}

.heart:after {
	left: 0;
	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		 -o-transform: rotate(45deg);
			transform: rotate(45deg);
	-webkit-transform-origin: 100% 100%;
	   -moz-transform-origin: 100% 100%;
		-ms-transform-origin: 100% 100%;
		 -o-transform-origin: 100% 100%;
			transform-origin: 100% 100%;
}

#spinner {
	position: absolute;
	top: calc(50% - 200px);
	left: calc(50% - 200px);
}
#spinner div {
	position: absolute;
	width: 400px;
	height: 400px;
	border: 1px solid #ccc;
	background: rgba(255,255,255,0.8);
	box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
	text-align: center;
	line-height: 120px;
	font-size: 100px;
}
#spinner .face1 { -webkit-transform: translateZ(200px);                                }
#spinner .face2 { -webkit-transform: rotateY(90deg) translateZ(200px);                 }
#spinner .face3 { -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(200px);  }
#spinner .face4 { -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(200px); }
#spinner .face5 { -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(200px); }
#spinner .face6 { -webkit-transform: rotateX(-90deg) translateZ(200px);                }
@-webkit-keyframes spincube {
	from,to  {                                                    }
	16%      { -webkit-transform: rotateY(-90deg);                }
	33%      { -webkit-transform: rotateY(-90deg) rotateZ(90deg); }
	50%      { -webkit-transform: rotateY(-180deg) rotateZ(90deg);}
	66%      { -webkit-transform: rotateY(90deg) rotateX(90deg);  }
	83%      { -webkit-transform: rotateX(90deg);                 }
}
#spinner {
	-webkit-animation-name: spincube;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 12s;
	-webkit-transform-style: preserve-3d;
	-webkit-transform-origin: 200px 200px 0;
}
#spinner:hover {
	-webkit-animation-play-state: paused;
}
#spinner div { 
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center top;
}
#spinner .face1 { background-image: url('https://media.discordapp.net/attachments/980568738225094761/1034263416442986496/IMG-20220923-WA0058_1.jpg?width=676&height=676')}

#spinner .face2 { background-image: url('https://media.discordapp.net/attachments/980568738225094761/1034267355842359346/IMG-20220923-WA0061_1.jpg?width=676&height=676')}

#spinner .face3 { background-image: url('https://media.discordapp.net/attachments/980568738225094761/1034265131598745640/IMG-20221024-WA0043_1.jpg?width=676&height=676')}

#spinner .face4 { background-image: url('https://media.discordapp.net/attachments/980568738225094761/1034265350864388176/IMG-20220923-WA0080_1.jpg?width=676&height=676')}

#spinner .face5 { background-image: url('https://media.discordapp.net/attachments/980568738225094761/1034265571816132668/IMG-20220923-WA0063_1.jpg?width=676&height=676')}

#spinner .face6 { background-image: url('https://media.discordapp.net/attachments/980568738225094761/1034267001536925776/teamolaryssa_1.png')}

@-webkit-keyframes moveheart {
	from { top: 0; left: 0; }
	to   { top: 100px; left: 100px; }
}
#heart-left2 {
	-webkit-animation-name: moveheart;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 12s;
}
.texto {
	text-align: center;
	font-size: .8em;
}
.heart {
	position: absolute;
	width: 100px;
	height: 90px;
	top: calc(50% - 50px);
	left: calc(50% - 50px);
}
@-webkit-keyframes moveTop {
	0% 		{ top: 0; opacity: 1;}
	100% 	{ top: -300px; opacity: 0;}
}
@-webkit-keyframes moveLeft {
	0%      { top: 0; opacity: 1;}
	100%    { top: -300px; left: -250px; opacity: 0; -webkit-transform: rotate(-45deg);}
}
@-webkit-keyframes moveRight {
	0%      { top: 0; opacity: 1;}
	100%    { top: -300px; left: 150px; opacity: 0; -webkit-transform: rotate(45deg);}
}
.heart {
	-webkit-animation-name: moveTop;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 5s;
}
#heart2 {
	-webkit-animation-name: moveRight;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 5s;
}
#heart3 {
	-webkit-animation-name: moveLeft;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 5s;
}
#box-cubo {
	position: absolute;
	top: 50%;
	left: 50%;
}
#box-msg {
    position: absolute;
    bottom: 40px;
    left: calc(50% - 90px);
}
#love {
    text-align: center;
    line-height: 0;
	letter-spacing: .2em;
}

#box-msg .heart {
	-webkit-animation: none;
}
#box-msg .heart {
    left: 52px;
    top: -10px;
}