@import url('https://fonts.googleapis.com/css2?family=Parisienne&display=swap');

body {
    font-family: 'Parisienne', cursive;
    background-color: #e6e6fa; /* Lila */
    color: #800080; /* Morado */
    margin: 0;
    padding: 0;
    overflow: hidden; /* Evita el desbordamiento */
    position: relative; /* Añadido para posicionar elementos absolutos */
    height: 100vh;
}

.container {
    text-align: center;
    position: relative;
}

.message {
    font-size: 3em;
    margin-top: 30px;
    opacity: 1;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.5);
}


.wrap{
    margin-top:50px;
    perspective:1500px;
    perspective-origin: 50% 50%;
}
.cube{
    transform-style:preserve-3d;
    width: 300px;
    height: 300px;
    margin:auto;
    position: relative;

}
.cube img{

    position:absolute;
    opacity: 0.8;
    width:200px;
    height:200px;

}
.cube img:nth-child(1){
    transform:rotateY(0deg) translateZ(100px);
}
.cube img:nth-child(2){
    transform:rotateY(90deg) translateZ(100px);
}
.cube img:nth-child(3){
    transform:rotateY(180deg) translateZ(100px);
}
.cube img:nth-child(4){
    transform:rotateY(-90deg) translateZ(100px);
}
.cube img:nth-child(5){
    transform:rotateX(90deg) translateZ(100px);
}
.cube img:nth-child(6){
    transform:rotateX(-90deg) translateZ(100px);
}
@keyframes loop{
    from{transform:rotateX(0deg) rotateY(0deg);}
    to{transform:rotateX(360deg) rotateY(360deg);}
}
.cube{
    animation:loop 10s linear infinite ;
}
@media (max-width:500px){
      .wrap{
        margin-top:0px;
      }
    }