.question{

 
width: 50%;
text-align: center;
margin-left: 25%;
z-index: 20;
top: 8em;
position: absolute;
border-radius: 20px;



    background-color: rgb(255, 255, 255);

}

.assspeak{

 
    width: 40em;
    text-align: center;
    margin-left: 50em;
    z-index: 20;
    bottom: 1px;
    position: absolute;
    border-radius: 20px;
    opacity: 0%;
    font-size: smaller;
    
    
    
        background-color: rgb(255, 255, 255);
    
    


    animation-name: textbox;
    animation-duration: 20s;
    animation-iteration-count: infinite;

  
  
}



@keyframes textbox {

0%   {left: 32em;}



50%  {left: -50em;
}



100% {left: 32em;}
   



}

.mcq{
    position: absolute;
opacity: 1;
margin-left: 25em;
z-index: 20;
color: azure;
font-size: smaller;
}

.zoom{
    animation-duration: 2s;
    transform-origin: 850px 450px;
  
    animation-fill-mode: forwards;

}
body{
    background-color: #213a42;
}

.character{
    position:absolute;
    translate: 0px 0px;
}

/* currrently to make it work with the map its not responsive, i have ideas to make it responsive as well but thats way
down the line once i have a functioning demo */

.mmbg {
position: absolute;
opacity: 1;
margin: 5em;
z-index: 10;

animation-duration: 2s;
animation-fill-mode: forwards;



}

.doras {
    position: absolute;
    opacity: 0;
    margin: 5em;
    z-index: 1;
    
    animation-duration: 2s;
    animation-fill-mode: forwards;
    
    
    
    }

.maze {
    position: absolute;
    opacity: 0;
    margin: 5em;
    z-index: 10;
    
    animation-duration: 2s;
animation-fill-mode: forwards;
    
    }

.sgoff{
    position: absolute;

}

.sgon{
    position: absolute;
}

.gate
{
    /* i made all the images the exact same size, they should have overlayed perfectly
    but it did not work so i had to ad a margin which will kill later responsiveness */ 
    position: absolute;
    opacity: 1;
    z-index: 5;
    margin-left: 5.2em ;
    margin-top: 5em;



 

}


/* really busy on another coding thing in lens studio that is battleing me so havent been able to focus this week, in my moments i am learning the sprite process and using css animations with them
this is a weak week but its good set up for where im going, right now im trying to figure how to change an animations keyframes from an onclick so it will change to a new animation when it moves to the next screen
*/
.ass{
    transform: rotateY(0deg); 
    position: absolute;
    z-index: 15;
top: 40em;
    left: 80em;
    width: 15em;

  
   

        animation-name: example;
        animation-duration: 20s;
        animation-iteration-count: infinite;

      
      
   

}

@keyframes example {

    0%   {left: 80em;}

    49%  {transform: rotateY(0deg);}

    50%  {left: 0em;
        transform: rotateY(180deg);}

    99%  {transform: rotateY(180deg);}

    100% {left: 80em;
        transform: rotateY(0deg);}

  }

  .male1d
  {
    opacity: 0;
position:absolute;
left : 48.5em;
top : 25em;
z-index: 6;
width: 4em;
  }

  .male1u
  {
    opacity: 0;
position:absolute;
left : 48.5em;
top : 25em;
z-index: 6;
width: 4em;
  }

  .male1l
  {
    opacity: 0;
position:absolute;
left : 48.5em;
top : 25em;
z-index: 6;
width: 4em;
  }

  .male1r
  {
    opacity: 0;
position:absolute;
left : 48.5em;
top : 25em;
z-index: 6;
width: 4em;
  }
  

  .arrowu
  {
    opacity: 0;
position:absolute;
left : 49.7em;
top : 22em;
z-index: 6;
width: 2em;
animation-name: throbv;
animation-duration: 1s;
animation-iteration-count: infinite;
  }

  .arrowr
  {
    opacity: 0;
    position:absolute;
    left : 53.5em;
    top : 26.5em;
    z-index: 6;
    width: 2em;
    animation-name: throbh;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }

  .arrowl
  {
    opacity: 0;
position:absolute;
left : 45.9em;
top : 26.5em;
z-index: 6;
width: 2em;
animation-name: throbh;
animation-duration: 1s;
animation-iteration-count: infinite;
  }

  .arrowd
  {
    opacity: 0;
position:absolute;
left : 49.7em;
top : 30.5em;
z-index: 6;
width: 2em;
animation-name: throbv;
animation-duration: 1s;
animation-iteration-count: infinite;
  }
  @keyframes throbv {

    0%   {transform: scale(.95,.75);}


    50% {transform: scale(1.1,0.95);
    }
   



    100% {transform: scale(.95,.75);
        }

  }

  @keyframes throbh {

    0%   {transform: scale(.75,1);}


    50% {transform: scale(1.1,1.2);
    }
   



    100% {transform: scale(.75,1);
        }

  }

  @keyframes fadeout {

    0%   {opacity:100%;

    }
  
   



    100% {opacity: 0%;
        }

  }

  @keyframes fadein {

    0%   {opacity:0%;

    }
  
   



    100% {opacity: 100%;
        }

  }


 @keyframes zoomin {

    0%   {transform: scale(1,1); 
 opacity: 1;

     

    }
  
   

50%{transform: scale(1.4,1.4);
    opacity: 0;}

    100% {transform: scale(1,1);
opacity: 0;


 
        }
    }

        @keyframes zoomout {

           
          
           
        
        0%{transform: scale(0.6,0.6);
            opacity: 0;}
        
            100% {transform: scale(1,1);
        opacity: 1;
        
        
         
                }

  }