/*================ Pressing Ctrl Q    comments out a line.. or undoes it ================================================================= */




/*==================================  This MegaContainer holds all frames  ========== 4 (2x2), 6 (3x2), or 8 (4x2)  frames  ============================== */


#MegaContainer {      /*     4 frames =  width: 540px;          6 frames =  width: 720px;          8 frames =  width: 940px;      */
    position:             absolute; /* Set a positioning context for child elements */
    top:                55px;              /* Offset from the top of the body */
    
    width:              530px;             
    height:             400px;  
	
    background-color:   #555555;    /*  gray */
    border:             3px solid #AAAAAA; 
	border-radius:      30px;
	
		display:            flex;             /* Flexbox container for frames */
    flex-wrap:          wrap;             /* Wrap frames to the next line if needed */
    justify-content:    space-evenly;     /* Evenly space out the rectangles */
    align-content:      space-evenly;     /* Evenly space vertically (between rows) */
    gap:                10px;             /* Space between frames */
    padding:            10px;
    box-sizing:         border-box;       /* Include padding and border in dimensions */

    margin:             0 auto;           /* Center the container horizontally */
	
				
}

/*=============================================================================================================== */



/* Frame Styles */
.frame {
    height:   320px;             /* Fixed height */
    width:    320px;              /* Fixed width */
    /*background-color: #000000;*/
    border: 3px solid #555555;

    position: relative;        /* Maintain relative positioning */
    flex-shrink: 0;            /* A safety that prevents frames from shrinking */
	
	border-radius: 30px;
	user-select: 		   none;
	-webkit-user-select:   none;         /*   text unselectable   */ 
	-ms-user-select:       none;
}



.frame.hovered {
  border: 3px solid #ff8844;     /*   This is where mooseover is handled with my Orange   */ 
}







.LeftWing {
    height: 320px;
    width: 160px;
    /*background-color: orange;*/
    position: absolute;
    left: 0px;
    top: 0px;
	 z-index: 2;
}




.RightWing {
    height: 320px;
    width: 160px;
    /*background-color: blue; */
    position: absolute;
    left: 160px;
    top: 0px;
	 z-index: 2;
}


/*=============================================================================================================*/

.FlipContainer {
	perspective: 600px;                 /*    the container div has the perspective rules     */
	-webkit-perspective: 600px;
	
    height: 298px;                    /*    was 186    */
	width:  298px;                    /*    was 186    */
    
    /*background-color: green;  */

	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	
}




.CardFront {
	                                       /* transform-origin: center; */
										   /* perspective: 1000px;          /* Ensure depth is consistent */
  display:                        block;
  justify-content:                center;     /* Center items horizontally */
  align-items:                    center;     /* Center items vertically */
  position:                       absolute;   /* Keeps its existing layout positioning */
  
  
  background-color:               #555555;    /* gray */
  height:                         298px;
  width:                          298px;
  
  border-radius:                  25px;
  overflow:                       hidden;     /* Maintain border radius clipping */
  flex-direction:                 column;     /* Stack items vertically */
  
  backface-visibility:            hidden;
  -webkit-backface-visibility:    hidden;  
  
  transform:                      rotateY(0deg);

  transition:                     -webkit-transform 700ms linear 0s, transform 0.7s linear 0s;
  will-change: transform;        /* before adding this line.. I would get a temporary lag in card rotations right after a zoom in or out Ctrl + or -  */
  
}



.CardBack{
	                                /* transform-origin: center; */
									/*	perspective: 1000px;          /* Ensure depth is consistent */
	display: block;    
    justify-content: center;     /* Center items horizontally */
    align-items: center;         /* Center items vertically */
    position: absolute;          /* Keeps its existing layout positioning */
	text-align: center;
	
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	
	background-color: #555555;     /* gray */
    height: 298px;
	width:  298px;
    
    border-radius: 25px;
	overflow: hidden;                      /* otherwise my image doesnt respect the border-radius */ 
	flex-direction: column; /* Stack items vertically */
	
	transform: rotateY(180deg);
	transition: -webkit-transform 700ms linear 0s, transform 0.7s linear 0s;
	will-change: transform;      /* before adding this line.. I would get a temporary lag in card rotations right after a zoom in or out Ctrl + or -  */

}



/*=============================================================================================================*/



 
 .SpecialImagey
 {
	 Display:      block;
	 width:        298px;
	 height:       298px;
	/*  position: static;     /* this may or may not be needed.. along with overflow: hidden in cards.. to keep rounded corners nice - dont know !
	                           https://stackoverflow.com/questions/587814/how-do-i-prevent-an-image-from-overflowing-a-rounded-corner-box     */
	
 }
 
 
/*=============================================================================================================*/
 
 
 
.CardText1,.CardText2,.CardText3 {

  text-align:     center;            /* Center the text inside each paragraph */
  margin:         0;                 /* Remove default margin for paragraphs */
}

/* ---- */


.CardText1 {     /*  The Language  at top*/
  position:     absolute;            /* Position relative to CardFront */
  top:          10px;                /* Move it whatever px down from the top */
  left:         50%;                 /* Center horizontally relative to CardFront */
  transform:    translateX(-50%);    /* Adjust for width to perfectly center */
  margin:       0;                   /* Remove default margins for precise positioning */
  text-align:   center;              /* Center the text inside the element */
  color:        black;
  font-size:    35px;                /* was 22 */
  
  white-space:  nowrap;              /* Prevents text from wrapping to a new line */
  overflow:     hidden;
}




.CardText2 {     /*  The Word   in the middle*/
  margin:            0;                        /* Remove default paragraph margins */
  text-align:        center;                   /* Center text inside the element */
  color:             black;
  font-size:         67px;                     /* was 42 */
  position:          absolute;                 /* To ensure it stays centered */
  top:               50%;                      /* Move it to the middle vertically */
  left:              50%;                      /* Move it to the middle horizontally */
  transform:         translate(-50%, -50%);    /* Adjust for perfect centering */
  /*background-color:  gray;  */
  width:             150 px;
  
  white-space:       nowrap;                   /* Prevents text from wrapping to a new line */
  overflow:          hidden;
}

 
.CardText3 {    /*  The Pronunciation     at the bottom */
  position:          absolute;
  bottom:            10px;               /* Move it whatever px up from the bottom */
  left:              50%;
  transform:         translateX(-50%);
  margin:            0;
  text-align:        center;
  color:             black;
  font-size:         51px;               /* was 32 */
  
  white-space:      nowrap;              /* Prevents text from wrapping to a new line */
  overflow:         hidden;
}