:root
 {        
        --CUBE_CONTAINER_WIDTH:800;
        --CUBE_CONTAINER_HEIGHT:200;            

        --WIDTH_VALUE_TYPE:     1px;
        --HEIGHT_VALUE_TYPE:    1px;
 } 

.cube_container.cube                            
{ 
        --CUBE_MARGIN_RIGHT                     :0;                 
        --CUBE_WIDTH                            :var(--CUBE_CONTAINER_WIDTH);
        --CUBE_HEIGHT                           :var(--CUBE_CONTAINER_HEIGHT);
        
        --CUBE_SCALE_X:1;
        --CUBE_SCALE_Y:1;
        --CUBE_SCALE_Z:1;     
        
        position:absolute;        
        left:   calc(50% - ((var(--CUBE_CONTAINER_WIDTH) / 2) * var(--WIDTH_VALUE_TYPE) )); 
        top:    calc(30% - ((var(--CUBE_CONTAINER_HEIGHT) / 2) * var(--WIDTH_VALUE_TYPE) ));

        width:calc(var(--CUBE_CONTAINER_WIDTH) * var(--WIDTH_VALUE_TYPE) );
        height:calc(var(--CUBE_CONTAINER_HEIGHT) * var(--HEIGHT_VALUE_TYPE) );

        transform-style: preserve-3d; 
        transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(var(--CUBE_SCALE_X)) scaleY(var(--CUBE_SCALE_Y)) scaleZ(var(--CUBE_SCALE_Z));
}

.cube_container.cube > .face
{
        background-color:rgb(0 255 0 / 0%);
}
 
.cube.graph_point_cube
{
        --CUBE_SCALE_X:1.45;
        --CUBE_SCALE_Y:.5;
        --CUBE_SCALE_Z:7;     
        --CUBE_MARGIN_RIGHT:29;     

        position:relative;
        left:0;
        bottom:calc(-180 * var(--WIDTH_VALUE_TYPE));         
        
        width:calc(var(--CUBE_WIDTH) * var(--WIDTH_VALUE_TYPE) );
        height:calc(var(--CUBE_HEIGHT) * var(--HEIGHT_VALUE_TYPE) );
        
        display:inline-block;
        margin-right:calc(var(--CUBE_MARGIN_RIGHT) * var(--WIDTH_VALUE_TYPE));
        
        transform:rotateX(-14deg) rotateY(-14deg) rotateZ(0deg) scaleX(var(--CUBE_SCALE_X)) scaleY(var(--CUBE_SCALE_Y)) scaleZ(var(--CUBE_SCALE_Z));
}
.cube.graph_point_cube .face
{
        background-color:rgb(0, 255, 0, 10%);
        background:linear-gradient(green, black);
}
.cube 
{      
        --CUBE_WIDTH:10;
        --CUBE_HEIGHT:10;
        
        --CUBE_SCALE_X:.45;
        --CUBE_SCALE_Y:2;
        --CUBE_SCALE_Z:5;                        
        
        position:relative;
        
        width:calc(var(--CUBE_WIDTH) * var(--WIDTH_VALUE_TYPE) );
        height:calc(var(--CUBE_HEIGHT) * var(--HEIGHT_VALUE_TYPE) );

        transform-style: preserve-3d;
        transform-origin:bottom; 
        transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(var(--CUBE_SCALE_X)) scaleY(var(--CUBE_SCALE_Y)) scaleZ(var(--CUBE_SCALE_Z));
}
.cube .face 
{
        position:absolute;        
        width:calc(var(--CUBE_WIDTH) * var(--HEIGHT_VALUE_TYPE) );
        height:calc(var(--CUBE_HEIGHT) * var(--HEIGHT_VALUE_TYPE) );
}