@font-face {
  font-family: "Futura";
  src: url("Futura.ttc");
}
*{
  font-family: Futura;
}
.scene {
  width: 200px;
  height: 200px;
  perspective: 6400px;
  position: relative;
}

/* Cube Container */
.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate-cube 12s infinite linear;
}

.ball {
  scale: 0;
  margin-left: -50px;
  margin-top: -250px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    box-shadow:
    inset 0 0 50px #fff,
    inset 20px 0 60px #FFFCB8,
    inset -20px 0 60px #FEF7F0,
    inset 20px 0 300px #FFFCB8,
    inset -20px 0 300px #FEF7F0,

    0 0 5px #fff,
    -10px 0 60px #FFFCB8,
    10px 0 60px #FEF7F0;
    animation: expand 3s infinite ease-in-out;
  }

  .aparece {
    position: absolute;
  margin-left: -50px;
  margin-top: -250px;
        width: 300px;
    height: 300px;
    border-radius: 50%;
    box-shadow:
    inset 0 0 50px #fff,
    inset 20px 0 60px #FFFCB8,
    inset -20px 0 60px #FEF7F0,
    inset 20px 0 300px #FFFCB8,
    inset -20px 0 300px #FEF7F0,

    0 0 5px #fff,
    -10px 0 60px #FFFCB8,
    10px 0 60px #FEF7F0;
    animation: hello 5s ease-in-out forwards;
  }
  .expande {
      animation: expand 3s infinite ease-in-out;
  }
  @keyframes expand {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }

.byebye {
  animation: adios 3s ease-in-out forwards;
}
/* General Face Styling */
.face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 1px solid #555;
  background-size: cover; /* Ensures the image covers the face */
  background-position: center; /* Centers the image on the face */
}

/* Individual Faces with Background Images and Positions */
.front {
  background-image: url('images/labclogo.jpg');
  transform: rotateY(0deg) translateZ(100px);
}

.back {
  background-image: url('images/labclogo_r.jpg');
  transform: rotateY(180deg) translateZ(100px);
}

.right {
  background-image: url('images/labclogo.jpg');
  transform: rotateY(90deg) translateZ(100px);
}

.left {
  background-image: url('images/labclogo.jpg');
  transform: rotateY(-90deg) translateZ(100px);
}

.top {
  background-image: url('images/labclogo.jpg');
  transform: rotateX(90deg) translateZ(100px);
}

.bottom {
  background-image: url('images/labclogo.jpg');
  transform: rotateX(-90deg) translateZ(100px);
}

@keyframes adios {
  from {
    transform: scale(1.0);
  }
  to {
    transform: scale(0);
  }
}

@keyframes hello {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

@keyframes rotate-cube {
  from {
    transform: rotateY(0deg) rotateX(0deg);
  }
  to {
    transform: rotateY(0deg) rotateX(-360deg);
  }