/*Each alphabet css */
		body {
			font-family: Arial, sans-serif;
			background-color: #f0f8ff; /* from learning page */
			color: #f0f8ff;
			text-align: center;
			padding: 0px;
            margin: 0;
            padding: 0

		}

       
		
		.container {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 20px;
			width: 100%;
			max-width: 1200px;
			margin: 20px auto;
            background-color: #f0f8ff;
		}
		
        .series {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 10px;
        }
		
        .box {
            width: 100px;
            height: 100px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 5px;
            border-radius: 10px;
            color: #f0f8ff;
            font-size: 25px;
            font-weight: bold;
            cursor: pointer;
        }
		
       

        .ha-series .box { background-color: #ffcccc; } /* Light Pink */
        .le-series .box { background-color: #cceeff; } /* Light Blue */
        .ha2-series .box { background-color: #ffe0b3; } /* Light Green */
        .me-series .box { background-color: #ccffcc; } /* Gold */

        .se-series .box { background-color: #ffcccc; } /* Light Pink */
        .re-series .box { background-color: #cceeff; } /* Light Blue */
        .se2-series .box { background-color: #ffe0b3; } /* Light Green */
        .she-series .box { background-color: #ccffcc; } /* Gold */
		
		.qe-series .box { background-color: #FFB6C1; } /* Light Pink */
        .be-series .box { background-color: #ADD8E6; } /* Light Blue */
        .te-series .box { background-color: #90EE90; } /* Light Green */
        .che-series .box { background-color: #FFD700; } /* Gold */
         /* Series Colors */
		
	
		.je-series .box { background-color: #FFCDD2; }
        .ge-series .box { background-color: #C8E6C9; }
        .te-series .box { background-color: #BBDEFB; }
        .che-series .box { background-color: #FFF9C4; }


        .ke-series .box { background-color: #FFDDC1; }
        .xe-series .box { background-color: #C1E1FF; }
        .we-series .box { background-color: #C1FFC1; }
        .ae-series .box { background-color: #FFC1E1; }
		
		.ze-series .box { background-color: #ffcccb; }
        .ze2-series .box { background-color: #d1e7dd; }
        .ye-series .box { background-color: #fff3cd; }
        .de-series .box { background-color: #cfe2f3; }
		
		.hee-series .box { background-color: #ffcccb;}
        .ne-series .box { background-color: #d1e7dd; }
        .nye-series .box { background-color: #fff3cd; }
        .ae-series .box { background-color: #cfe2f3; }
		
		.pe-series .box { background-color: #D4A5A5; }
        .tse-series .box { background-color: #392F5A; color: #FFF; }
        .tse2-series .box { background-color: #31A2AC; }
        .fe-series .box { background-color: #61C0BF; }
        .ve-series .box { background-color: #61C0BF; }
        .pe2-series .box { background-color: #6B4226; color: #FFF; }

/* Footer */
footer {
    margin-top: 40px;
    font-size: 14px;
    color: #666;
}
.footer-links {
    margin-top: 10px;
}
.footer-links a {
    margin: 0 10px;
    color: #0077cc;
    text-decoration: none;
}
.footer-links a:hover {
    text-decoration: underline;
}