* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'georgia', 'Chalkboard SE', 'Arial Rounded MT Bold', sans-serif; } 
 .container { width: 100%; max-width: 1000px; text-align: center; } 

 h1 { color: #FF6B6B; font-size: 3rem; margin-bottom: 10px; text-shadow: 3px 3px 0px #4ECDC4; animation: bounce 2s infinite; } 

 .subtitle { color: #1A535C; font-size: 1.5rem; margin-bottom: 40px; } 

 .menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 25px; margin-bottom: 30px; } 

 .subject-card { background: #FFF8DE; border-radius: 20px; padding: 25px 15px; box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; cursor: pointer; border: 5px solid transparent; position: relative; overflow: hidden; height: 200px; display: flex; flex-direction: column; justify-content: center; align-items: center; } 

 .subject-card:hover { transform: translateY(-10px); box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15); } 

 .subject-icon { font-size: 3.5rem; margin: 8px auto-fill; transition: all 0.3s ease; } 

 .subject-name { font-size: 1.8rem; font-weight: bold; color: #BFC6C4; } 
 img { width :230px; border-radius: 25px; } 

 

 .footer { margin-top: 30px; font-size: 1.2rem; color: #fff; font-weight: bold; } 
 a { text-decoration:none; } 
 #nextLessonBtn { padding: 12px 24px; font-size: 16px; background-color: blue; /* Green for celebration */
 color: white; border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.3s ease; } 

#nextLessonBtn:hover { background-color: white; color:blue; } 

 @keyframes bounce { 0%, 100% { transform: translateY(0); } 
 50% { transform: translateY(-15px); } 
 }

 @media (max-width: 768px) { h1 { font-size: 2.5rem; } 
 
 .subtitle { font-size: 1.3rem; } 
 
 .menu-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; } 
 
 .subject-card { height: 170px; padding: 20px 10px; } 
 
 .subject-icon { font-size: 3rem; } 
 
 .subject-name { font-size: 1.2rem; } 
 }


@media (max-width: 600px){
 .nav-btn { font-size: 0.95rem; padding: 10px; } 
 .subject-name { font-size: 16px; } 
 img { width :180px; border-radius: 25px; } 
 }

 #portalOverlay { position: fixed; top:0; left:0; right:0; bottom:0; background: radial-gradient(circle, rgba(0,0,0,0.8), transparent); opacity:0; transition: opacity 2s ease-in-out; } 
 .portal-animate { opacity:1; animation: swirl 4s forwards; } 

 @keyframes swirl { 
 0% { transform: scale(0.5) rotate(0deg); } 
 100% { transform: scale(2) rotate(720deg); } 
 }

 .fade-in { animation: fadeIn 2s forwards; } 
 @keyframes fadeIn { 
 from { opacity:0; } 
 to { opacity:1; } 
 }