body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #dde1ed;
}
.container {
    /* border: 2px solid yellow; */
    height: 500px;
    width: 450px;
}
.cont-hijo {
    /* border: 2px solid rebeccapurple; */
    height: 100%;
    width: 100%;
}
.yoda {
    /* border: 2px solid mediumpurple; */
    height: 400px;
    width: 260px;
}
.roca-cont {
    /* border: 2px solid royalblue; */
    margin-top: -40px;
    margin-left: 50px;
}
.roca-cont img {
    /* border: 2px solid peru; */
    height: 70px;
    width: 100px;
}
.roca-cont img:nth-child(2) {
    animation-delay: .8s;
}
.roca-cont img:nth-child(3) {
    animation-delay: 1.3s;
}
.boton {
    /* border: 2px solid magenta; */
    margin: 0 100px;
    height: 100px;
    border-radius: 10px;
    width: 120px;
    cursor: pointer;
    display: flex;/*  */
    justify-content: center;
    align-items: center;
    box-shadow: -3px -3px 7px #fff,
    3px 3px 5px rgba(94,104,121,0.7);
}
.boton span {
    /* border: 2px solid orange; */
    display: block;
    height: 70px;
    width: 70px;
    border-radius: 50%;
    background-color: #dde1ed;
    box-shadow: -3px -3px 7px #fff,
    3px 3px 5px rgba(94,104,121,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
    font-size: 1.5em;
}
.clase1 {
    animation: flotar 2s infinite linear alternate;
}
.clase2 {
    color: rgb(7,79,194) !important;
    box-shadow: inset -2px -2px 8px #fff,
                inset 3px 3px 5px rgba(0,0,0,0.2) !important;
                text-shadow: 0 0 2px rgb(7,79,194);
} 

@keyframes flotar {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(-200px);
    }
}
.sombra {
  /* border: 2px solid blue;   */
  height: 150px;
  width: 350px;
  border-radius: 50%;
  margin-top: -200px;
  margin-left: -40px;
  background-color: #333;
  box-shadow: 0 0 20px #111;
}

.esin {    
    z-index: 1000;
    transform: translate(-150%,30%);
    pointer-events:fills;
    font-size: 20px;
    margin-top: 850px;
}


/* https://www.youtube.com/watch?v=NOnwpbYq2TE */
/* 15:13 */