*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
  background-color: #1b3f3c;
}

.container {
  width: 100%;
  height: 100%;

  /* border: 3px solid #3b826a; */
}

.parent {
  width: 500px;
  height: 500px;
  border: 4px solid #ffffff;
  border-radius: 20px;
  margin: auto;
  position: relative;
  margin-top: 100px;
  perspective: 1000px;
}

[class^="child"] {
  width: 250px;
  height: 250px;
  border-radius: 20px;
  margin: 124px 124px;
  position: absolute;
}

.child--border {
  border: 4px solid #58fff1;
}
.child--background {
  background-color: #58fff17d;
  /* transform: translateX(-250px) translatey(250px); */
  /* transform: translateZ(800px) rotateY(55deg) rotateX(55deg); */
}

/* cube */
.cube {
  width: 300px;
  height: 300px;
  position: relative;
  margin: 200px auto;
  /* border: 3px solid #fff; */
  border-radius: 30px;
  transform-style: preserve-3d;
  transform: rotateY(-50deg) rotateX(-15deg);
  /* perspective: 2500px; */
  animation: rotate 8s infinite linear;
}

[class^="face"] {
  position: absolute;
  width: 296px;
  height: 296px;
  text-align: center;
  text-transform: uppercase;
  margin: auto;
  font-size: 96px;
  padding: 100px 0;
  color: #ffffff;

  /* border-radius: 27px; */
}

.face-front {
  background: rgb(26, 207, 189);
  transform: translateZ(148px);
}

.face-back {
  background: rgb(26, 207, 189);
  transform: translateZ(-148px);
}
.face-left {
  width: 296px;
  background: rgb(26, 207, 189);
  transform: translateX(-148px) rotateY(90deg);
}
.face-right {
  width: 296px;
  background: rgb(26, 207, 189);
  transform: translateX(148px) rotateY(90deg);
}
.face-top {
  width: 296px;
  background: rgb(26, 207, 189);
  transform: translateY(-148px) rotateX(90deg);
}
.face-bottom {
  width: 296px;
  background: rgb(26, 207, 189);
  transform: translateY(148px) rotateX(90deg);
}

@keyframes rotate {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}