.grid {
  display: flex;
  flex-wrap: wrap;
  width: 800px;
  height: 800px;
}


.titre {
	background-color: red;
    color: white;
    padding: 5px;
	margin: 20px 20px 20px
    text-align: center;
    width: 15%;
    z-index: 1000;
	font-family: Arial, sans-serif; /* Set uniform font for the menu */
	font-size: 25px;
}
		
		.alertmema {
			
			background-color: red;  /* Light green background */
			color: white;              /* Dark green text */
			border: 2px solid darkgreen;   /* Solid border with a dark green color */
			padding: 10px;                 /* Padding inside the box */
			font-size: 2em; 
			border-radius: 5px;
			box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
			position: absolute;            /* Absolute positioning */
			top: 20px;                     /* Adjust the vertical position from the top edge */
			left: 0;                       /* Positioned at the left edge of the screen */
			width: 300px;                  /* Width of the box */

        }

        /* Fade out the alert box */
        .alertmema.fade {
            opacity: 0;
        }
		
#result-frame {
    background-color: #E4D00A;  /* Light green background */
    color: black;              /* Dark green text */
    border: 2px solid darkgreen;   /* Solid border with a dark green color */
    padding: 10px;                 /* Padding inside the box */
    font-size: 25px;                /* Larger text, equivalent to h1 */
    left: 0;                       /* Positioned at the left edge of the screen */
    width: 420px;                  /* Width of the box */
    visibility: hidden;            /* Initially hidden */
}