body { font-family: georgia; hight:100vh;      background: repeating-linear-gradient(
        45deg,
        #BFC6C4,
        #BFC6C4 40px,
        #E8E2D8 40px,
        #E8E2D8 80px
      );  } 
	.container {max-width: 800px;width: 100%;display: block;margin: 0 auto;text-align: center; } 
	img {max-width: 600px;width: 100%;display: block;margin: 0 auto; } 
	.hotspot-box {position: absolute; /* Kept absolute for layout mapping */
	cursor: pointer;background: rgba(0, 123, 255, 0.15);border: 1px dashed rgba(0, 123, 255, 0.2);border-radius: 4px;transition: background 0.2s ease, border-color 0.2s ease; } 
	.hotspot-box:hover {background: rgba(0, 123, 255, 0.35);border-color: rgba(0, 123, 255, 0.4); } 
	#translation-bar {max-width: 600px;width: 90%;margin: 30px auto; /* Generates a healthy gap below the lesson image */
	padding: 15px;background-color: #f8f9fa;border: 2px solid #007bff;border-radius: 8px;font-family: sans-serif;text-align: center;display: block; /* Forces it to be its own block element */
	clear: both; /* Prevents side elements from crowding it */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); } 
	#translation-hint {color: #6c757d;font-size: 14px;font-style: italic; } 
	#tamil-text {font-size: 24px;font-weight: bold;color: #212529; } 
	#sinhala-text {font-size: 24px;font-weight: bold;color: #dc3545; /* Clean contrasting red */}
	#nextLessonBtn { padding: 12px 24px; font-size: 16px; background-color: #28a745; /* Green for celebration */
	 color: white; border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.3s ease; } 
	#nextLessonBtn:hover { background-color: #218838; } 
	.header{max-width: 800px;width: 100%;display: flex;justify-content: center;gap: 2%;}
    .back-button{margin-top: 10px;}
    a{text-decoration: none;}