/* I was having some weird positioning shit happening without these lines */
* {
    margin:        0;
    padding:       0;
    box-sizing:    border-box; /* Prevents padding from increasing element dimensions */
	cursor:        default;    /*   This one just keeps my cursor as an arrow pointer  */
      
}


body {
            margin:            0;
			padding:           0;
            background-color:  black;
            display:           flex;
            flex-direction:    column;
            min-height:        100vh;
        }
		


a{text-decoration:none;}        /*   This guy keeps away  strange underscores after Image links .. my Arrow buttons  */



p {   /*     Fixes annoying SPACE around paragraphs   */
    margin: 0;
    padding: 0;
}


/*-------------------------------------------------------------------------------------*/	
/*--------- I'm gonna remove TitleBar on the homepage for a better layout -------------*/

	#TitleBar {
		width: 100%;
		height: 60px;

		position: relative; /* Needed for absolute positioning inside */
		border-bottom: 2px solid #555555;

	}


	.TitleText {
		position: absolute;
		color: white;
		white-space: nowrap; /* Prevents text from wrapping */
		margin: 0;
		top: 50%; /* Center vertically */
		transform: translate(-50%, -50%); /* Adjust for perfect centering */
	}



	#SiteNameText { left: 33.33%; 
	font-family:       "Monotype Corsiva", cursive;
	color: #cc33ff;     /* purple */
	font-size: 40px;
	}

	#WelcomeText { left: 50%; }

	#GoodbyeText { left: 66.66%; 
	font-family:       "Monotype Corsiva", cursive;
	font-size: 30px;
	}


/*-------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/



/*  This Giant Div sits at the top of the screen..  It holds LeftDiv, RightDiv and CenterDiv   */
#TopThreeDivContainer {    
    display:            flex;
    justify-content:    center;
    align-items:        center;
    min-width:          1460px;        /*  was 980 */
    height:             600px;
	margin-top:         5px;          /*  Keeps this 10 px under the titlebar */
}



#LeftDiv {
    position:            relative; /* This is the key change */
	width:               240px;
	min-width:           240px;
    height:              100%;
    /*  background-color:    gray;  */ 
}

#RightDiv {
    position:            relative; /* This is the key change */
	min-width:           240px;
    height:              100%;
   /*  background-color:    gray;  */ 
}


#CenterDiv {              /*     4 frames =  width: 580px;          6 frames =  width: 760px;          8 frames =  width: 980px;      */
    width:                600px;
	/*min-width:            740px;*/
    height:               100%;
    /*background-color:     blue;  */
	position: relative;
	display: flex;             /* Added this to enable flexbox */
    justify-content: center;   /* Centers #YourWord horizontally */
	flex-direction: column;        /* Stack the children vertically */
}


/*  This div spans under the TopThreeDivContainer  */
#FooterDiv {
            background-color:    black;                /*  */
            text-align:          center;
            display:             flex;
            align-items:         center;
            justify-content:     center;
            flex-grow:           1;
}
		
	

/*--------------------------------------------------------------------------------*/		
		
		
		#LeftFlag {
			position:                absolute;
			top:                     130px;
			right:                   60px;
			width:                   100px;
			height:                  200px;
			/* background-color: gray; */
			user-select:             none;          /* Standard .. all four of these stop text selection*/
			-webkit-user-select:     none;  /* Chrome, Safari */
			-moz-user-select:        none;     /* Firefox */
			-ms-user-select:         none;      /* Internet Explorer/Edge */
		}
		
		#LeftFlag img {     /* Stops image drag */
			pointer-events:          none;
			-webkit-user-drag:       none;
		}

		#LeftFlagWrite {
			top:               0px;
			left:              50%;
			transform:         translateX(-50%); /* Center the text horizontally */
			height:            40px;
			width:             auto; /* Let the width adapt to the content */
			position:          absolute;
			font-size:         40px;
			line-height:       40px;  /* height above and below letters */
			font-family:       "Monotype Corsiva", cursive;
			text-align:        center;
			color:             #0077ff;  /* blue */
			white-space:       nowrap; /* Prevent wrapping of the word */
		}

		#LeftFlagPicture {
			top:               55px;
			left:              0px;
			position:          absolute;
		}

/*---------------------------


/*-----------------------------------*/

		#RightFlag {
			position:              absolute;
			top:                   130px;
			left:                  60px;
			width:                 100px;
			height:                200px;
			/* background-color: gray; */
			user-select:           none;      /* Standard */
			-webkit-user-select:   none;      /* Chrome, Safari */
			-moz-user-select:      none;      /* Firefox */
			-ms-user-select:       none;      /* Internet Explorer/Edge */
		}

		#RightFlag img {     /* Stops image drag */
			pointer-events:        none;
			-webkit-user-drag:     none;
		}


		#RightFlagWrite{
			top:            0px;
			left:           50%;
			transform:      translateX(-50%); /* Center the text horizontally */
			height:         40px;
			width:          auto; /* Let the width adapt to the content */
			position:       absolute;
			font-size:      40px;
			line-height:    40px;  /* height above and below letters */
			font-family:    "Monotype Corsiva", cursive;
			text-align:     center;
			color:          #5c982c;      /* green */
			white-space:    nowrap; /* Prevent wrapping of the word */
		}

		#RightFlagPicture{
			top:   				  55px;
			position:             absolute;
		}


/*-------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------*/





/*---------------- The Search Form ------- and things inside ----------------------------------------------------*/



#SearchDiv {
    position: absolute;    /* Absolute positioning inside CenterDiv */
    top: 40px;             /* Set the fixed vertical position you want */
    width: 480px;
    height: 80px;
    /*background-color: yellow;*/
    font-size: 20px;
    line-height: 35px;
    text-align: center;
    color: #3377dd;
    font-family: arial;
    letter-spacing: .2px;
    font-weight: regular;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;

    /* Center the content horizontally */
    left: 50%;
    transform: translateX(-50%);  /* Horizontally center the div inside its parent */
    
    display: flex;
    justify-content: space-between; /* Space between form and reset button */
    align-items: center;           /* Vertically center the content */
}


#Formy {
	left: 60px;                    /* Set as desired..   */
    display: flex;                /* Flexbox layout for the form's content */
    align-items: center;          /* Vertically align the input */
    height: 55px;                 /* Fixed height for the form container */
    width: 480px;
    position: absolute;           /* Absolute positioning inside SearchDiv */
    top: 50%;                      /* Vertically center inside SearchDiv */
    
    transform: translateY(-50%);   /* Adjust for true vertical centering */
    color: white;                 /* Text color */
}

#Inputy {
    width: 300px;
    height: 55px;                 /* Height of the input box */
    font-family: Georgia, serif;
    font-size: 30px;
    font-weight: bold;            /* Bold text */
    text-align: center;
    letter-spacing: 1.2px;        /* Kerning */
}

#ResetButton {
	left: 375px;                   /* Set as desired..   */
    height: 50px;
    width: 50px;
    line-height: 50px;            /* Vertically center text inside button */
    position: absolute;           /* Absolute positioning inside Formy */
    color: #BBBBBB;               /* Text color */
    background-color: #555555;    /* Background color */
    display: flex;
    align-items: center;          /* Vertically align content inside button */
    justify-content: center;      /* Horizontally align content inside button */
    
    cursor: pointer;             /* Pointer cursor on hover */
    top: 50%;                     /* Vertically center inside Formy */
    
    transform: translateY(-50%);  /* Adjust for true vertical centering */
}


/*---------------- End of Search Form ------------------------------------------------------------------*/








/*-------------------ButtContainer:   These are Suggestion Buttons ------------------------------------------------------------*/

#ButtContainerOLD{             /*   container for buttons   */
	top:                140px;
	
	height:             340px;        /*    340 or 0     */
	width:              340px;

	
	display:            none;           /*     flex (show)      or       none (hide)   */
	
    align-items:        center;
	 background-color:   pink;    

}

#ButtContainer {
		position: absolute;    /* Absolute positioning inside CenterDiv */
		
		/* Center the content horizontally */
		left: 50%;
		transform: translateX(-50%);  /* Horizontally center the div inside its parent */
		
		top: 150px;             /* Set the fixed vertical position you want */
		height: 340px;
		width: 340px;
		display: none;                 /* Show/hide via flex or none */
		/*background-color: pink;*/
		align-items: center;
		justify-content: center;
		display: none;                 /* Show/hide via flex or none */
}


				.AllButts{           /*   class each button will use   */
					left:       		    0px;
					height:     		    50px;
					width:       		    340px;
					position:               absolute; 
					color: 				    #BBBBBB;	
					background-color:       #555555;
					cursor:   			    default;     /*   pointer = finger       default = arrow     */
					font-size:              20px;
					letter-spacing:         2px;         /* Space between letters       is default  */
					line-height:            35px;        /* height above and below letters   */
					text-align:             center;
					color:                  #3377dd;     /*#3399bb;                  /* blue  */
					font-family:            arial;
					letter-spacing:         1.2px;        /* 0 is default*/
					font-weight:            regular;
					
					user-select: 		    none;
					-webkit-user-select:    none;        /*   text unselectable   */ 
					-ms-user-select:        none;
					
					display:                 flex;        /* Use flexbox */
					justify-content:         center;      /* Center horizontally */
					align-items:             center;      /* Center vertically */
					
					border-radius:           16px;
				}



				#Butt0{
					top:  0px;
					color: 				#ffffff;   /*   white   */
					background-color:   #00bb55;    /*   green   */
				}



				#Butt1{
					top:  70px;
				}


				#Butt2{
					top:  140px;
				}


				#Butt3{
					top:  210px;
				}


				#Butt4{
					top:  280px;
				}




/*------------------- End of ButtContainer --------------------------------------------------------------*/








/*-----------------------------------------------------------------------------------------------------------*/

/*-------------------------- LogoStuff Div -------------- has LogoContainer ---------------------------------*/


#LogoStuff {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 120px;

    padding-top: 20px;    /* Scoot down my logos a bit */
	
    width: 580px;
    /*background-color: blue;*/

    display: flex;
    flex-direction: column;   /* stack vertically */
    align-items: center;      /* center horizontally */
    gap: 10px;                /* optional spacing between logos */
}


#LogoContainer {
    width: 100%;
    display: flex;
    justify-content: center;
}

#TextLogoContainer {
    margin-top: 30px;   /* push only the text logo downward */
    width: 100%;
    display: flex;
    justify-content: center;
}












/*-----------------------------------------------------------------------------------------------------------*/
/*-------------------------- YourWord div ------------ and 3 things inside -----------------------------------------------*/



#YourWord {
	position: absolute;    /* Absolute positioning inside CenterDiv */
		
		/* Center the content horizontally */
    left: 50%;
    transform: translateX(-50%);  /* Horizontally center the div inside its parent */
	
	
	top: 120px;             /* Set the fixed vertical position you want */
    width: 580px;
    height: 300px;
    /*  background-color: blue;   */
    display: none;                 /* Show/hide via flex or none */
    flex-direction: column;
    align-items: center;
    justify-content: center;
	

}

			.menu {
				position:             absolute; /* Set a positioning context for child elements */
				top:         5px;
				display:              flex; /* Use flexbox to vertically center the paragraphs */
				align-items:          center;              /* Vertically align items if needed */
				width:                500px;
				height:               50px;
				
				color:                #999999;            /* gray   */
			 /*  background-color: green;         /*  For visibility */
				justify-content:      space-between;   /* Spread items out evenly */
				padding:              10px;                    /* Optional: Add some spacing inside the div */
				gap:                  10px;                        /* Optional: Add space between the paragraphs */
				user-select:          none;          /* Standard */
				-webkit-user-select:  none;  /* Chrome, Safari */
				-moz-user-select:     none;     /* Firefox */
				-ms-user-select:      none;      /* Internet Explorer/Edge */
			}


			.menu p {
				position:     absolute;                  /* Position each paragraph absolutely */
				top:          50%;                       /* Start positioning at the vertical center */
				transform:    translateY(-50%);          /* Offset to achieve perfect vertical centering */
				margin:       0;                         /* Remove default margin */
				padding:      5px;                       /* Optional: Add some padding */
				font-family: "Times New Roman", serif;     /* default */
				font-size:    20px;                      /* 20px is my start/default    If its selected it will be 30px   */
				text-align: center;                      /* Centers inline elements like <p> */
			}



			#MP12 {              /* Pronunciation Menu Paragraph */
				left:         240px; 
				width:        240px;
				/*  background-color: yellow;   */
			}
				
				
				
			#GoStudyButton {           /* The Button that says "Go study bear and other animals" */
				position:                absolute;
				top:                     480px;
				display:                 flex;        /* Use flexbox */
				justify-content:         center;      /* Center horizontally */
				align-items:             center;      /* Center vertically */
				
				width:                   360px;
				height:                  50px;
				text-align:              center; 
				color:                   #BBBBBB;     /*   text color: gray - changes white on mouseover*/
				background-color:        #555555;     /*   background gray - changes orange on mouseover ( like my other buttons ) */
				
				font-family:             "Times New Roman", serif;     /* default */
				font-size:               25px;
				
				user-select:             none;        /* Standard */
				-webkit-user-select:     none;        /* Chrome, Safari */
				-moz-user-select:        none;        /* Firefox */
				-ms-user-select:         none;        /* Internet Explorer/Edge */
				
				border-radius:           16px;        /* Rounded corners */
				
			}


/*-------------------------- End of YourWord Div -----------------------------------------------*/