body{
    background: #f2f2f2;
}

table{
    border-collapse: collapse;
    margin-bottom: 20px;
}

td{
    width: 20px;
    height: 20px;
    text-align: center;
}

.border{
    border: 1px solid black;
}

.black{
    background: black;
    color: white;
}

.wrap {
	perspective: 1800px;
    perspective-origin: 50% 100px;
    margin-left: 200px;
    margin-top: 200px;
}

.cube {
	position: relative;
	width: 200px;
	transform-style: preserve-3d;
}



.back__container {
    transform: translateZ(-100px) rotateY(180deg);
    position: absolute;
    background: #31c450;
    animation: 'background-transition' 30s ease infinite;
	width: 200px;
    height: 200px;
   
    display: flex;

}
.right__container {
	transform: rotateY(-270deg) translateX(100px);
    transform-origin: top right;
    position: absolute;
    background: #3562e2;
    animation: 'background-transition' 30s ease infinite;
	width: 200px;
    height: 200px;
    
    display: flex;

}
.left__container {
	transform: rotateY(270deg) translateX(-100px);
    transform-origin: center left;
    position: absolute;
    background: #ee2f35;
    animation: 'background-transition' 30s ease infinite;
	width: 200px;
    height: 200px;
   
    display: flex;
    
}
.top__container {
	transform: rotateX(-90deg) translateY(-100px);
    transform-origin: top center;
    position: absolute;
    background: #e6e53a;
    animation: 'background-transition' 30s ease infinite;
	width: 200px;
    height: 200px;
    display: flex;
    
  
}
.bottom__container {
	transform: rotateX(90deg) translateY(100px);
    transform-origin: bottom center;
    position: absolute;
    background: #ffffff;
    animation: 'background-transition' 30s ease infinite;
	width: 200px;
    height: 200px;
    
    display: flex;

}
.front__container {
    transform: translateZ(100px);
    position: absolute;
    background: #cb4c2b;
    animation: 'background-transition' 30s ease infinite;
	width: 200px;
    height: 200px;
    
    display: flex;
   
}

@keyframes spin {
	from { 
        transform: rotateY(0); 
        transform: rotate3d(0,0,0);
    }
	to { 
        transform: rotateY(360deg); 
        transform: rotate3d(1,1,0,360deg);
    }
}

@keyframes spinX {
	from { 
        transform: rotateX(0); 
     
    }
	to { 
        transform: rotateX(360deg); 
      
    }
}

.cube {
   animation: spin 5s infinite linear;
}

.front__line{
    width: 200px;
    height: 66.66px;
   /* animation: spinY 5s infinite linear;*/
}

/* .front__line1{
    animation: spinX 5s infinite linear;
} */

.front__cube{
    height: 66.66px;
    box-shadow: 1px 1px 1px black;
    /* border: 1px solid black; */
    
}

.back__line{
    width: 200px;
    height: 66.66px;
}

.back__cube{
    height: 66.66px;
    box-shadow: 1px 1px 1px black;
    /* border: 1px solid black; */
}

.left__line{
    width: 200px;
    height: 66.66px;
}

.left__cube{
    height: 66.66px;
    box-shadow: 1px 1px 1px black;
    /* border: 1px solid black; */
}

.right__line{
    width: 200px;
    height: 66.66px;
}

.right__cube{
    height: 66.66px;
    box-shadow: 1px 1px 1px black;
    /* border: 1px solid black; */
}

.bottom__line{
    width: 200px;
    height: 66.66px;
}

.bottom__cube{
    height: 66.66px;
    box-shadow: 1px 1px 1px black;
    /* border: 1px solid black; */
}

.top__line{
    width: 200px;
    height: 66.66px;
}

.top__cube{
    height: 66.66px;
    box-shadow: 1px 1px 1px black;
    /* border: 1px solid black; */
}

/* @keyframes background-transition{
    0% {
        filter: hue-rotate(0)
    }
    100% {
        filter: hue-rotate(360deg)
    }
} */