body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure the body takes the full viewport height */
    margin: 0; /* Remove default margin */
    background-color: #ffffff;
    background-size: cover; /* Cover the entire viewport */
    background-repeat: no-repeat; /* No repeat */
    background-image: url(../background.jpg); /* Set the background image */
}

.main-container {
    display: flex;
    flex-direction: column; /* Stack header, grid, and footer vertically */
    flex: 1; /* Allow the main container to grow and take up available space */
}

footer {
    text-align: center;
    padding: 10px;
    background-color: rgb(251, 131, 255); /* Semi-transparent white */
    border-top: 1px solid #ccc; /* Optional: Add a border above the footer */
    width: 100%; /* Make it span the full width of the screen */
}

header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    background-image: url(../background.jpg);
    background-size: cover; /* Cover the entire viewport */
    background-repeat: no-repeat; /* No repeat */
    background-color: #f4f4f4; /* Optional: Add a background color */
    text-align: center;
    border-bottom: 1px solid #ccc; /* Optional: Add a border below the header */
}

header img {
    display: block;
    max-width: 150px; /* Set a fixed width for the image */
    height: auto; /* Maintain aspect ratio */
}

header img.logo {
    max-width: 150px; /* Adjust logo size */
    height: auto;
    margin-bottom: 10px;
}

header h1 {
    font-size: 2.5rem; /* Set the title font size */
    margin: 0; /* Remove default margin */
}

header nav ul {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 15px;
}

header nav ul li a {
    text-decoration: none;
    color: #8b0000;
    font-size: 1rem;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

header nav ul li a:hover {
    background-color: #8b0000;
    color: #fff;
}
  
.grid-container {
    display: grid; /* Use CSS Grid for the grid content */
    grid-template-columns: repeat(10, 1fr); /* Adjust the number of columns as needed */
    grid-auto-rows: minmax(50px, auto); /* Adjust row height */
    gap: 5px; /* Add spacing between grid items */
    padding: 10px;
    background-color: #fff; 
    background-image: url(../background.jpg);
    background-size: cover; /* Cover the entire viewport */
    background-repeat: no-repeat; /* No repeat */
    flex: 1; /* Allow the grid to take up available space */
}
  
.square, .square1, .square2, .square3, .square4, .square5, .square6, .square7, .square8, .square9, .square10, 
.square11, .square12, .square13, .square14, .square15, .square16, .square17, .square18, .square19, .square20, 
.square21, .square22, .square23, .square24, .square25, .square26, .square27, .square28, .square29, .square30, 
.square31, .square32, .square33, .square34, .square35, .square36, .square37, .square38, .square39, .square40, 
.square41, .square42, .square43, .square44, .square45, .square46, .square47, .square48, .square49, .square50,
.square51, .square52, .square53, .square54, .square55, .square56, .square57, .square58, .square59, .square60,
.square61, .square62, .square63, .square64, .square65, .square66, .square67, .square68, .square69, .square70,
.square71, .square72, .square73, .square74, .square75, .square76, .square77, .square78, .square79, .square80,
.square81, .square82, .square83, .square84, .square85, .square86, .square87, .square88, .square89, .square90,
.square91, .square92, .square93, .square94, .square95, .square96, .square97, .square98, .square99, .square100,
.square101, .square102, .square103, .square104, .square105, .square106, .square107, .square108, .square109{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px; /* Add padding for larger text */
    min-width: 10px; /* Ensure a minimum width */
    min-height: 10px; /* Ensure a minimum height */
    background-color: #ffffff; /* Default background color */
    border: 2px solid #000000;
    text-align: center; /* Center text inside the square */
    word-wrap: break-word; /* Handle long words */
    /*make the square round*/
    border-radius: 5px; /* Rounded corners */
}
/*squares with words*/
.square {
    grid-column: span 2; /* Make it span 3 columns */
    grid-row: span 1;    /* Make it span 2 rows */
    font-size: 1.5rem;   /* Increase font size */
    padding: 20px;       /* Add more padding */
    background-color: #f4d03f; /* Optional: Highlight it with a different color */
}
.square1 {
    grid-column: 3; /* Align in the first column */
    grid-row: 1;    /* Place in the second row */
    background-color: #cfff87; /* Darker yellow on hover */
}
.square2 {
    grid-column: 4; /* Align in the first column */
    grid-row: 1;    /* Place in the second row */
    background-color: #cfff87; /* Darker yellow on hover */
}
.square3 {
    grid-column: 5; /* Align in the first column */
    grid-row: 1;    /* Place in the second row */
    background-color: #cfff87; /* Darker yellow on hover */
}
.square4 {
    grid-column: 6; /* Align in the first column */
    grid-row: 1;    /* Place in the second row */
    background-color: #cfff87; /* Darker yellow on hover */
}
.square5 {
    grid-column: 7; /* Align in the first column */
    grid-row: 1;    /* Place in the second row */
    background-color: #cfff87; /* Darker yellow on hover */
}

.square8 {
    grid-column: 1; /* Make it span 3 columns */
    grid-row: span 2;    /* Make it span 2 rows */
    font-size: 1.5rem;   /* Increase font size */
    padding: 20px;       /* Add more padding */
    background-color: #f4d03f; /* Optional: Highlight it with a different color */
}
.square9 {
    grid-column: 1; /* Make it span 3 columns */
    grid-row: span 3;    /* Make it span 2 rows */
    font-size: 1.5rem;   /* Increase font size */
    padding: 20px;       /* Add more padding */
    background-color: #f4d03f;    /* Place in the second row */
}
.square10 {
    grid-column: 1; /* Make it span 3 columns */
    grid-row: span 5;    /* Make it span 2 rows */
    font-size: 1.5rem;   /* Increase font size */
    padding: 20px;       /* Add more padding */
    background-color: #f4d03f;     /* Place in the second row */
}
.square11 {
    grid-column: 2; /* Align in the first column */
    grid-row: 2;    /* Place in the second row */
    background-color: rgb(255, 159, 159);
}
.square12 {
    grid-column: 2; /* Align in the first column */
    grid-row: 3;    /* Place in the second row */
    background-color: rgb(255, 159, 159);
}
.square13 {
    grid-column: 2; /* Align in the first column */
    grid-row: 4;    /* Place in the second row */
    background-color: rgb(255, 159, 159);
}
.square14 {
    grid-column: 2; /* Align in the first column */
    grid-row: 5;    /* Place in the second row */
    background-color: rgb(255, 159, 159);
}
.square15 {
    grid-column: 2; /* Align in the first column */
    grid-row: 6;    /* Place in the second row */
    background-color: rgb(255, 159, 159);
}
.square16 {
    grid-column: 2; /* Align in the first column */
    grid-row: 7;    /* Place in the second row */
    background-color: rgb(255, 159, 159);
}
.square17 {
    grid-column: 2; /* Align in the first column */
    grid-row: 8;    /* Place in the second row */
    background-color: rgb(255, 159, 159);
}
.square18 {
    grid-column: 2; /* Align in the first column */
    grid-row: 9;    /* Place in the second row */
    background-color: rgb(255, 159, 159);
}
.square19 {
    grid-column: 2; /* Align in the first column */
    grid-row: 10;    /* Place in the second row */
    background-color: rgb(255, 159, 159);
}
.square20 {
    grid-column: 2; /* Align in the first column */
    grid-row: 11;    /* Place in the second row */
    background-color: rgb(255, 159, 159);
}
.square21 {
    grid-column: 2; /* Align in the first column */
    grid-row: 12;    /* Place in the second row */
    background-color: rgb(255, 159, 159);
}
.square22:hover, .square23:hover, .square24:hover, .square25:hover, .square26:hover {
    background-color: #bdff5a; /* Darker yellow on hover */
}
.square22 {
    grid-column: 3; /* Align in the first column */
    grid-row: 2;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square23 {
    grid-column: 4; /* Align in the first column */
    grid-row: 2;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square24 {
    grid-column: 5; /* Align in the first column */
    grid-row: 2;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square25 {
    grid-column: 6; /* Align in the first column */
    grid-row: 2;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square26 {
    grid-column: 7; /* Align in the first column */
    grid-row: 2;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square27 {
    grid-column: 8; /* Align in the first column */
    grid-row: 2;    /* Place in the second row */
}
.square28 {
    grid-column: 9; /* Align in the first column */
    grid-row: 2;    /* Place in the second row */
}
.square29:hover, .square30:hover, .square31:hover, .square32:hover, .square33:hover {
    background-color: #bdff5a; /* Darker yellow on hover */
}
.square29 {
    grid-column: 3; /* Align in the first column */
    grid-row: 3;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square30 {
    grid-column: 4; /* Align in the first column */
    grid-row: 3;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square31 {
    grid-column: 5; /* Align in the first column */
    grid-row: 3;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square32 {
    grid-column: 6; /* Align in the first column */
    grid-row: 3;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square33 {
    grid-column: 7; /* Align in the first column */
    grid-row: 3;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square34 {
    grid-column: 8; /* Align in the first column */
    grid-row: 3;    /* Place in the second row */
}
.square35 {
    grid-column: 9; /* Align in the first column */
    grid-row: 3;    /* Place in the second row */
}
.square36:hover, .square37:hover, .square38:hover, .square39:hover, .square40:hover {
    background-color: #bdff5a; /* Darker yellow on hover */
}
.square36 {
    grid-column: 3; /* Align in the first column */
    grid-row: 4;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square37 {
    grid-column: 4; /* Align in the first column */
    grid-row: 4;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square38 {
    grid-column: 5; /* Align in the first column */
    grid-row: 4;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square39 {
    grid-column: 6; /* Align in the first column */
    grid-row: 4;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square40 {
    grid-column: 7; /* Align in the first column */
    grid-row: 4;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square41 {
    grid-column: 8; /* Align in the first column */
    grid-row: 4;    /* Place in the second row */
}
.square42 {
    grid-column: 9; /* Align in the first column */
    grid-row: 4;    /* Place in the second row */
}
.square43:hover, .square44:hover, .square45:hover, .square46:hover, .square47:hover {
    background-color: #bdff5a; /* Darker yellow on hover */
}
.square43 {
    grid-column: 3; /* Align in the first column */
    grid-row: 5;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square44 {
    grid-column: 4; /* Align in the first column */
    grid-row: 5;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square45 {
    grid-column: 5; /* Align in the first column */
    grid-row: 5;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square46 {
    grid-column: 6; /* Align in the first column */
    grid-row: 5;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square47 {
    grid-column: 7; /* Align in the first column */
    grid-row: 5;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square48 {
    grid-column: 8; /* Align in the first column */
    grid-row: 5;    /* Place in the second row */
}
.square49 {
    grid-column: 9; /* Align in the first column */
    grid-row: 5;    /* Place in the second row */
}
.square50:hover, .square51:hover, .square52:hover, .square53:hover, .square54:hover {
    background-color: #bdff5a; /* Darker yellow on hover */
}
.square50 {
    grid-column: 3; /* Align in the first column */
    grid-row: 6;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square51 {
    grid-column: 4; /* Align in the first column */
    grid-row: 6;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square52 {
    grid-column: 5; /* Align in the first column */
    grid-row: 6;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square53 {
    grid-column: 6; /* Align in the first column */
    grid-row: 6;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square54 {
    grid-column: 7; /* Align in the first column */
    grid-row: 6;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square55 {
    grid-column: 8; /* Align in the first column */
    grid-row: 6;    /* Place in the second row */
}
.square56 {
    grid-column: 9; /* Align in the first column */
    grid-row: 6;    /* Place in the second row */
}
.square57:hover, .square58:hover, .square59:hover, .square60:hover, .square61:hover {
    background-color: #bdff5a; /* Darker yellow on hover */
}
.square57 {
    grid-column: 3; /* Align in the first column */
    grid-row: 7;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square58 {
    grid-column: 4; /* Align in the first column */
    grid-row: 7;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square59 {
    grid-column: 5; /* Align in the first column */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
    grid-row: 7;    /* Place in the second row */
}
.square60 {
    grid-column: 6; /* Align in the first column */
    grid-row: 7;    /* Place in the second row */    
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}

.square61 {
    grid-column: 7; /* Align in the first column */
    grid-row: 7;    /* Place in the second row */
}
.square62 {
    grid-column: 8; /* Align in the first column */
    grid-row: 7;    /* Place in the second row */
}
.square64:hover, .square65:hover, .square66:hover, .square67:hover, .square68:hover {
    background-color: #bdff5a; /* Darker yellow on hover */
}
.square63 {
    grid-column: 9; /* Align in the first column */
    grid-row: 7;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square64 {
    grid-column: 3; /* Align in the first column */
    grid-row: 8;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square65 {
    grid-column: 4; /* Align in the first column */
    grid-row: 8;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square66 {
    grid-column: 5; /* Align in the first column */
    grid-row: 8;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square67 {
    grid-column: 6; /* Align in the first column */
    grid-row: 8;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square68 {
    grid-column: 7; /* Align in the first column */
    grid-row: 8;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square69 {
    grid-column: 8; /* Align in the first column */
    grid-row: 8;    /* Place in the second row */
}
.square70 {
    grid-column: 9; /* Align in the first column */
    grid-row: 8;    /* Place in the second row */
}
.square71:hover, .square72:hover, .square73:hover, .square74:hover, .square75:hover {
    background-color: #bdff5a; /* Darker yellow on hover */
}
.square71 {
    grid-column: 3; /* Align in the first column */
    grid-row: 9;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square72 {
    grid-column: 4; /* Align in the first column */
    grid-row: 9;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square73 {
    grid-column: 5; /* Align in the first column */
    grid-row: 9;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square74 {
    grid-column: 6; /* Align in the first column */
    grid-row: 9;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square75 {
    grid-column: 7; /* Align in the first column */
    grid-row: 9;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square76 {
    grid-column: 8; /* Align in the first column */
    grid-row: 9;    /* Place in the second row */
}
.square77 {
    grid-column: 9; /* Align in the first column */
    grid-row: 9;    /* Place in the second row */
}
.square78:hover, .square79:hover, .square80:hover, .square81:hover, .square82:hover {
    background-color: #bdff5a; /* Darker yellow on hover */
}
.square78 {
    grid-column: 3; /* Align in the first column */
    grid-row: 10;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square79 {
    grid-column: 4; /* Align in the first column */
    grid-row: 10;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square80 {
    grid-column: 5; /* Align in the first column */
    grid-row: 10;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square81 {
    grid-column: 6; /* Align in the first column */
    grid-row: 10;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square82 {
    grid-column: 7; /* Align in the first column */
    grid-row: 10;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square83 {
    grid-column: 8; /* Align in the first column */
    grid-row: 10;    /* Place in the second row */
}
.square84 {
    grid-column: 9; /* Align in the first column */
    grid-row: 10;    /* Place in the second row */
}
.square85:hover, .square86:hover, .square87:hover, .square88:hover, .square89:hover {
    background-color: #bdff5a; /* Darker yellow on hover */
}
.square85 {
    grid-column: 3; /* Align in the first column */
    grid-row: 11;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
    background-color: #ffffff; /* Optional: Highlight it with a different color */
}
.square85:hover, .square86:hover, .square87:hover, .square88:hover, .square89:hover {
    background-color: #bdff5a; /* Darker yellow on hover */
}
.square86 {
    grid-column: 4; /* Align in the first column */
    grid-row: 11;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square87 {
    grid-column: 5; /* Align in the first column */
    grid-row: 11;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square88 {
    grid-column: 6; /* Align in the first column */
    grid-row: 11;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square89 {
    grid-column: 7; /* Align in the first column */
    grid-row: 11;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square90 {
    grid-column: 8; /* Align in the first column */
    grid-row: 11;    /* Place in the second row */
}
.square91 {
    grid-column: 9; /* Align in the first column */
    grid-row: 11;    /* Place in the second row */
}
.square92:hover, .square93:hover, .square94:hover, .square95:hover, .square96:hover {
    background-color: #bdff5a; /* Darker yellow on hover */
}
.square92 {
    grid-column: 3; /* Align in the first column */
    grid-row: 12;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square93 {
    grid-column: 4; /* Align in the first column */
    grid-row: 12;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square94 {
    grid-column: 5; /* Align in the first column */
    grid-row: 12;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square95 {
    grid-column: 6; /* Align in the first column */
    grid-row: 12;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square96 {
    grid-column: 7; /* Align in the first column */
    grid-row: 12;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
}
.square97 {
    grid-column: 8; /* Align in the first column */
    grid-row: 12;    /* Place in the second row */
}
.square98 {
    grid-column: 9; /* Align in the first column */
    grid-row: 12;    /* Place in the second row */
}
.square99 {
    grid-column: 8; /* Align in the first column */
    grid-row: 13;    /* Place in the second row */
    cursor: pointer; /* Show pointer cursor to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for color change */
    background-color: #f4d03f; /* Optional: Highlight it with a different color */
}
.square100 {
    grid-column: 9; /* Align in the first column */
    grid-row: 13;    /* Place in the second row */

}


.reset-button {
    grid-column: span 2; /* Make it span the entire grid width */
    text-align: center;
    padding: 10px;
    background-color: #e74c3c; /* Red background */
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    border: none;
    margin-top: 10px;
    transition: background-color 0.3s ease;
    grid-column: 6; /* Align in the first column */
    grid-row: 13;    /* Place in the second row */

}

.reset-button:hover {
    background-color: #c0392b; /* Darker red on hover */
}

@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: repeat(5, 1fr); /* Reduce the number of columns for smaller screens */
        gap: 3px; /* Reduce the gap between grid items */
        padding: 5px; /* Reduce padding */
    }

    .square, .square1, .square2, .square3, .square4, .square5, .square6, .square7, .square8, .square9, .square10,
    .square11, .square12, .square13, .square14, .square15, .square16, .square17, .square18, .square19, .square20,
    .square21, .square22, .square23, .square24, .square25, .square26, .square27, .square28, .square29, .square30,
    .square31, .square32, .square33, .square34, .square35, .square36, .square37, .square38, .square39, .square40,
    .square41, .square42, .square43, .square44, .square45, .square46, .square47, .square48, .square49, .square50 {
        font-size: 0.5rem; /* Make the text smaller */
        padding: 2px; /* Reduce padding inside the squares */
        min-width: 3px; /* Reduce the minimum width */
        min-height: 3px; /* Reduce the minimum height */
    }

    .reset-button {
        font-size: 0.5rem; /* Adjust the font size of the reset button */
        padding: 5px; /* Reduce padding */
    }
}