* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-image: radial-gradient(rgb(7 8 21), rgb(0 0 0));
  background-repeat: no-repeat;
  scroll-behavior: smooth;
  background-attachment: fixed;
  background-position-x: center;
}

#container {
  position: absolute;
  left: 50%;
  top: 50%;
}

.box-area {
  position: relative;
  transform-style: preserve-3d;
  animation: rotate 3s linear infinite ;
}

@keyframes rotate {
  0% {
    transform: rotate3d(0, 0, 0, 0);
  }
  100% {
    transform: rotate3d(1, 1, 0, 360deg);
    ;
  }
}

.box {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid #262626;
}


.grid-container {
  height: 100%;
  display: grid;
  grid-template-areas:
    'one two three';
  grid-gap: 0px;
  padding: 0px;

}

.grid-container>div {
  border: 5px solid rgb(10, 10, 10);
  border-radius: 5px;
  text-align: center;
  padding: 0;
  font-size: 30px;
}

/* BOX POSITION */

#box-back {
  transform: translateX(-100px) translateY(-100px) translateZ(-100px);
}

#box-front {
  transform: translateX(-100px) translateY(-100px) translateZ(100px);
}
#box-right {
  transform: translateY(-100px) rotateY(90deg);
}

#box-left {
  transform: translateY(-100px) translateX(-200px) rotateY(90deg);
}

#box-top {
  transform: translateX(-100px) translateY(-200px) rotateX(90deg);
}

#box-bottom {
  transform: translateX(-100px) rotateX(90deg);
}


/* BOX COLOR */

.bg-back {
  background: rgb(245, 2, 2);
}

.bg-right {
  background: rgb(75, 255, 4);
}

.bg-left {
  background: rgb(217, 255, 0);
}

.bg-top {
  background: rgb(0, 4, 246);
}

.bg-bottom {

  background: rgb(235, 145, 1);
}

.bg-front {
  background: rgb(255, 255, 255);
}