/*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;
}


/* ---- Add-on for JSON cards (non-conflicting) ---- */
.box .en-word {
  display: block;
  font-size: 12px;
  line-height: 1.2;
  color: #444;
  margin-top: 4px;
}

.box .thumb {
  width: 90px;          /* fits inside your 100x100 .box */
  height: 60px;
  margin-top: 6px;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Optional accessibility focus for keyboard users */
.box { outline: none; }
.box:focus {
  box-shadow: 0 0 0 3px rgba(23,162,184,.35);
}