: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:.125;     
        
        position:absolute;        
        left:   calc(50% - ((var(--CUBE_CONTAINER_WIDTH) / 2) * var(--WIDTH_VALUE_TYPE) )); 
        top:    calc(37% - ((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-origin:center;
        transform:rotateX(3deg) rotateY(13deg) 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: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) );
}

/* OVERLAY */
.cube.container_for_cloned_graph_point_cubes                           
{         
        --CUBE_SCALE_X:1;
        --CUBE_SCALE_Y:1;
        --CUBE_SCALE_Z:.125;     
        
        /* outline:3px solid green; */
        position:absolute;        
        left:   calc(50% - ((var(--CUBE_CONTAINER_WIDTH) / 2) * var(--WIDTH_VALUE_TYPE) )); 
        top:    calc(37% - ((var(--CUBE_CONTAINER_HEIGHT) / 2) * var(--WIDTH_VALUE_TYPE) ));

        /* left:   25%;
        top:    25%; */

        background:transparent;

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

        transform-style: flat; 
        transform-origin:center;
        transform:rotateX(3deg) rotateY(13deg) rotateZ(0deg) scaleX(var(--CUBE_SCALE_X)) scaleY(var(--CUBE_SCALE_Y)) scaleZ(var(--CUBE_SCALE_Z));
}

.cube.container_for_cloned_graph_point_cubes > .face
{
        background:transparent;
}

.cube.clone_of_graph_point_cube
{
        --CUBE_SCALE_X:2.85;
        --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));

        transform-style: flat;         
        background:transparent;
}
.cube.clone_of_graph_point_cube .face
{
        background-color:rgb(0, 255, 0, 10%);
        background:linear-gradient(green, black);
        background:transparent;
}
/* OVERLAY END */


.info_div
{
        outline:3px outset green;
        /* background:orange; */
        position:absolute;
        --INFO_DIV_WIDTH:34;
        --INFO_DIV_HEIGHT:8;

        width:calc(var(--INFO_DIV_WIDTH) * 1rem);
        height:calc(var(--INFO_DIV_HEIGHT) * 1rem);

        left:calc(48vw - 14rem);
        top:calc(33vh - 10rem);

        display:none;

}
.info_div ul    { list-style:none; list-style-type:none; padding:1vw; }
.info_div ul li { margin:5px 0 0 0; }

.instructions 
{
        position:absolute;
        
        left:40%;
        top:10%;
        width:250px;
        height:50px;
}