:root
{
        --GRADIENT_RAINBOW_ROAD_COLOR_LIST:Violet, Indigo, Blue, Green, Yellow, Orange, Red;
        --TRANSITION_DURATION:5s;
        --TRANSITION_DELAY:1s; 
}

.plane
{                   
        position:absolute;
        top:325px;
        left:450px;
        width:100px;
        height:100px;
        
        transform-style: preserve-3d;

        scale:0.45;    
        transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);  
        
        animation-name: fade_in, 
        plane_yaw_animation, 
        plane_roll_animation, 
        plane_pitch_animation; 
        animation-duration: 7s, 7.5s, 7.5s, 7.75s;
        animation-iteration-count:1, 1, 1, 1;
        animation-delay: 0s, 8.25s, 16.75s, 25.5s;       
        animation-fill-mode: forwards;
}

.cube 
{
        /* outline:3px solid red; */
        position:absolute; 
        width:200px; 
        height:200px; 
        
        transform-style:preserve-3d;
        transition:var(--TRANSITION_DURATION);
}

.face                          
{ 
        position:absolute; 
        width:100%;
        height:100%;
        opacity:35%; 
        box-shadow: 2px 2px 1px silver, 1px 1px 36px inset silver;
}

.cube .face:nth-of-type(1)          { background-color:transparent;                     transform: rotateY(0deg)        translateZ(100px); }
.cube .face:nth-of-type(2)          { background-color:transparent;                     transform: rotateY(90deg)       translateZ(100px); } 
.cube .face:nth-of-type(3)          { background-color: rgba(0 255 0 /25);        transform: rotateY(180deg)      translateZ(100px); } 
.cube .face:nth-of-type(4)          { background-color:transparent;                     transform: rotateY(-90deg)      translateZ(100px); } 
.cube .face:nth-of-type(5)          { background-color:transparent;                     transform: rotateX(90deg)       translateZ(100px); } 
.cube .face:nth-of-type(6)          { background-color:transparent;                     transform: rotateX(-90deg)      translateZ(100px); }
 

.plane > .face
{
        background:none;
        box-shadow: none;
        
}

.plane .cube 
{ 
        transform-style: preserve-3d;
}
.plane .cube .face 
{
        background:linear-gradient(90deg, var(--GRADIENT_RAINBOW_ROAD_COLOR_LIST));  
}

.plane .cube:after
{
        position:absolute;
        left:0;
        top:0;
}

.plane > .cube:nth-of-type(1)
{
        /* border:32px solid green; */

        position:absolute;
        /* top:200px; */
        left:-630px;

        scale: 2.7 .25 2.3;
        rotate:-30deg;

}
.plane > .cube:nth-of-type(1) .cube
{
        position:absolute;
        top:0;
        left:0;
        transform-origin:bottom;
        scale:.75 .05 0.2;
        transform:translateX(0px) translateY(0px) translateZ(-668px) rotateX(70deg);
        /* transform:skew(10deg); */
}

.plane > .cube:nth-of-type(2)
{
        /* border:32px solid gold; */
        position:absolute;
        /* top:200px; */

        
        left:630px;

        scale: 2.7 .25 2.3;
        rotate:30deg;

}

.plane > .cube:nth-of-type(2) .cube
{
        position:absolute;
        top:0;
        left:0;
        scale:.75 .05 0.2;
        transform-origin:bottom;
        transform:translateY(100px) translateZ(-668px) rotateX(70deg);
}


.plane > .cube:nth-of-type(3)
{

        position:absolute;
        left:0;
        top:0;

        width:100%;
        height:100%;


        scale: .11 1.25 .3;
        /* rotate: x 90deg; */
        translate: 0 -362px -88px;
}

.plane > .cube:nth-of-type(4) 
{

        position:absolute;
        left:0;
        top:100px;

        width:100%;
        height:100%;


        scale: .11 2.25 1.3;
        rotate:90deg;
        translate: 0 300px -788px;
}

.plane > .cube:nth-of-type(5) 
{

        position:absolute;
        left:0;
        top:-278px;

        width:100%;
        height:100%;


        scale: 1.1 1.25 5;
        /* rotate: x 90deg; */
        /* rotate:45deg; */
        translate: 0 362px -88px;
}
.plane > .cube:nth-of-type(5) .face
{        
        background:linear-gradient(90deg, var(--GRADIENT_RAINBOW_ROAD_COLOR_LIST));
        /* border-radius:30px;  */
}

.plane > .cube:nth-of-type(5):before
{        
        background:linear-gradient(90deg, var(--GRADIENT_RAINBOW_ROAD_COLOR_LIST));
        border-radius:130px; 
}

@keyframes blur_to_focus
{
        0% { filter:blur(50px); }
        50% { filter:blur(25px); }
        100% { filter:blur(0px); }
}

@keyframes fade_in
{
        0% { scale:.05 .05 .05; }
        25% { scale:.05 .05 .05; }
        100% { scale:.45 .45 .45; }
}


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


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

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