:root 
{ 
        --SCENE_WIDTH: 300px;
        --SCENE_HEIGHT: 300px;

        --CUBE_WIDTH:200px;
        --CUBE_HEIGHT:200px;
        --CUBE_DEPTH: 400px;

        --COLOR_BACKGROUND_SILVER: silver;
        --COLOR_BACKGROUND_GREY: grey;
        --COLOR_BACKGROUND_GREEN: green;

        --BORDER_RADIUS:50;
        
        --BOX_SHADOW_MINIMAL_INSET: 1px 1px 1px inset silver;
        --BOX_SHADOW_MINIMAL_BORDER: 1px 1px 1px silver;

}

body { background-color:black; color:#abb2bf; }

h3 { margin:30px 0 6px 0; }
  
.control_panel
{
        opacity:50%; 
        border-radius:56px;
        box-shadow:20px inset blue;
        position:absolute;
        top:0;
        left:30%;
        width:var(--SCENE_WIDTH);
        height:var(--SCENE_HEIGHT);    
}

.scene 
{            
        position:relative;
        top:20%;
        left:20%;

        width:var(--SCENE_WIDTH);
        height:var(--SCENE_HEIGHT);

        transform-style:preserve-3d;
}            

.main_shape_container 
{ 
        position:absolute;
        top:0%;
        left:0%;

        perspective:400px; 
        transform-style:preserve-3d; 
        transform:scale(.25) rotateX(7deg) rotateY(-7deg); 
}
.main_shape.cube > .face 
{        
        opacity:80%;
}

.main_shape .cube               { position:relative; bottom:0%; left:0%; }
.main_shape .cube .face         { opacity:70%; }

.monster 
{  
        --MONSTER_WIDTH:100px;
        --MONSTER_HEIGHT:100px; 

        border: 0px solid var(--COLOR_BACKGROUND_SILVER); 

        animation-name:monster_animation;
        animation-duration: 10s;
        animation-delay:0s;

        transition:none;
        transform-style:preserve-3d;
}

@keyframes monster_animation
{
 
        0%      { transform: translateX(1300px) translateY(-200px) translateZ(200px); }
        50%     { transform: translateX(-300px) translateY(200px) translateZ(-200px); }
        67%     { transform: translateX(-300px) translateY(200px) translateZ(-200px); }

}
.monster.cube_two
{        
        animation-name: fire_weapon_animation;
        animation-delay:5.7s;
        animation-duration:.75s;
        animation-iteration-count: 1;
}

@keyframes fire_weapon_animation
{ 
        from { transform: translateZ(100px); background-color:red; opacity:100%; }
        to  { transform: translateZ(-20000px); background-color:red; opacity:0%;}
 }
.monster.cube_three
{
        scale: 1 1 1;
}
.monster.cube_four
{
        transform: scaleX(1) scaleY(3.2) scaleZ(1) rotateY(0deg) rotateX(28deg);
        
        /* scale: 1 3.2 1;         */
}

.monster.cube_five
{
        transform: scale3d(3, 1, 1) rotateY(-5deg) rotateX(5deg) translateX(265px);
         scale: 3 1 1; 
        animation-name:hammer_head;
        animation-duration:15s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;

        transition:1s;

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

.display       
{ 
        border:3px inset silver; 
        
        opacity:0%;

        box-shadow: 1px 1px 6px silver;

        text-align:center;

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

        scale:1.0;

        animation:
        display_animation_one, 
        display_animation_two;
        animation-duration:3s, 3.5s;
        animation-delay:10.5s, 10.5s;
        animation-fill-mode: forwards, forwards;
        transition:1s;
        
        background-position:79% 38.5%;
        background-size: 110%;
        background-repeat:no-repeat; 
        object-fit:contain;  
        background-image: url('WOMAN_02.JPG'); 

} 

.display div { font-family: Helvetica; font-size:1.1em; }


.display div.text_div_one
{         
        display:table;

        position:absolute; 
        top:0; 
        left:0; 
        width:100%; 
        height:100%; 

        opacity:0%;
        
        animation-name:text_one_animation; 
        animation-duration:7s; 
        animation-delay:16.5s;    
}

.display div.text_div_one span 
{ 
        vertical-align:middle; 
        display:table-cell; 
}

@keyframes text_one_animation
{
        0%      { background-color:black; opacity:0%; }
        50%    {  background-color:black; opacity:100%; }
        100%      { background-color:black; opacity:50%; }
}

.display div.text_div_two
{         
        display:table;

        position:absolute; 
        top:0; 
        left:0; 
        width:100%; 
        height:100%;      
        
        
        opacity:0%;
        
        animation-name:text_two_animation; 
        animation-duration:4.5s; 
        animation-delay:21.5s;       
        animation-fill-mode: forwards;
}
.display div.text_div_two span 
{ 
        vertical-align:middle; 
        display:table-cell; 
}

@keyframes text_two_animation
{
        0%      { background-color:black; opacity:0%; background-image:none;  }
        50%    { background-color:black; opacity:100%; background-image:none;  }
        100%      { background-color:black; opacity:100%; background-image:none; }
}



@keyframes display_animation_one
{                         
        0% {   transform: scale(1) translateZ(0px); }
        100% {  transform: scale(1.25) translateZ(350px);   }
}

@keyframes display_animation_two
{         
        0%      { opacity:0%; filter:invert(0%);  }  
        10%      { opacity:10%; filter:invert(10%);}  
        20%      { opacity:20%; filter:invert(20%);}  
        30%      { opacity:30%; filter:invert(30%);}  
        40%      { opacity:40%; filter:invert(40%);}  
        50%      { opacity:50%; filter:invert(50%); }  
        60%      { opacity:60%; filter:invert(60%); }  
        70%      { opacity:70%; filter:invert(70%);}  
        80%      { opacity:80%; filter:invert(80%);}  
        90%      { opacity:90%; filter:invert(90%);}  
        

        100% 
        { 
                filter:invert(1);
                opacity:100%;
                z-index:99;
        }
}

/* @keyframes display_animation_three_fade_background_image
{         
        0% { opacity:100%; }
        100% { opacity:0%; }
} */



      .cube 
      {
              position:relative;

              width:var(--CUBE_WIDTH);
              height:var(--CUBE_HEIGHT);
              
              transform-style:preserve-3d;
              border-radius:var(--BORDER_RADIUS);
               /* perspective:600px; */
               margin-top:60px;

               /* rotate: y 30deg; */

               transition:3s;
      }

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

              transition:1s;
      }
    

      



      .monster_animation_control_label:focus         ~ div[class="scene"] .monster.cube,
      .monster_animation_control_label:hover         ~ div[class="scene"] .monster.cube,
      .monster_animation_control:checked             ~ div[class="scene"] .monster.cube
      { border:22px solid red;  animation-play-state: paused; }





/* .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: green;    transform: rotateY(180deg) translateZ(100px); opacity:6%; }  
.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); }
         */



     /*
        0%      { translate: 900px;                                     transform:translateZ(200px);}
        30%     { translate: 400px;                                     transform:translateZ(-200px);}

        40%     { translate: 400px; rotate: y 0deg;                   transform:translateZ(-200px); }
        42%     { translate: 400px; rotate: y 11.25deg;               transform:translateZ(-220px); }
        44%     { translate: 400px; rotate: y 22.50deg;               transform:translateZ(-240px); }
        46%     { translate: 400px; rotate: y 33.75deg;               transform:translateZ(-260px); }
        48%     { translate: 400px; rotate: y 45.00deg;               transform:translateZ(-280px); }
        50%     { translate: 400px; rotate: y 56.25deg;               transform:translateZ(-300px); }
        52%     { translate: 400px; rotate: y 67.50deg;               transform:translateZ(-320px); }
        54%     { translate: 400px; rotate: y 78.75deg;               transform:translateZ(-340px); }
        56%     { translate: 400px; rotate: y 90.00deg;               transform:translateZ(-360px); }
       
       
        100%     { translate: 400px; rotate: y 90.00deg;               transform:translateZ(-360px); }
            
*/

        /* 40% { transform: rotateX(-15deg) translateZ(-400); }
        70% { transform:translateZ(90px) translateZ(-200px);}
        100% { transform:rotateY(-90deg) translateX(400px) translateZ(-200px);} */

        

        /* @keyframes anim {
                0% { translate: 0% 0; }
                100% { translate: 100% 0; }
              
                0%, 100% { scale: 1; }
                5%, 95% { scale: 1.2; }
              
                0% { rotate: 0deg; }
                10%, 90% { rotate: 180deg; }
                100% { rotate: 360deg; }
              } */


              
        /* 0%      { translate:1300px -200px 200px; }
        50%     { translate:-300px 200px -200px; }
        67%     { translate:-300px 200px -200px; } */
        
        /* 0% { transform:rotateX(0deg) rotateZ(-5deg); }
        25% { transform:rotateX(90deg) rotateZ(0deg); }
        50% { transform:rotateX(180deg) rotateZ(5deg); }
        75% { transform:rotateX(270deg) rotateZ(0deg); }
        100% { transform:rotateX(360deg) rotateZ(-5deg); } */

        

                /* transform: rotateY(-20deg) rotateX(-10deg);
        scale: 1 1 4;
        
        border:120px;        
        border-radius:120px;   */