* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'georgia', 'Chalkboard SE', 'Arial Rounded MT Bold', sans-serif;
        }

        body {
            background: repeating-linear-gradient(
        45deg,
        #F0F0DB,
        #F0F0DB 40px,
        #79C9C5 40px,
        #79C9C5 80px
      );
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .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: #79C9C5;
            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);
            color:black;
        }

        .subject-icon {
            font-size: 3.5rem;
            margin-bottom: 15px;
            transition: all 0.3s ease;
        }

        .subject-name {
            font-size: 1.4rem;
            font-weight: bold;
            color:#F0F0DB;
        }

        /* Subject-specific colors */
        .math { border-color: #FF6B6B; }
        .math:hover { background-color: #FFF0F0; }
        .math .subject-icon { color: #FF6B6B; }

        .science { border-color: #4ECDC4; }
        .science:hover { background-color: #F0FFFF; }
        .science .subject-icon { color: #4ECDC4; }

        .english { border-color: #FFD166; }
        .english:hover { background-color: #FFFBF0; }
        .english .subject-icon { color: #FFD166; }

        .history { border-color: #06D6A0; }
        .history:hover { background-color: #F0FFF7; }
        .history .subject-icon { color: #06D6A0; }

        .geography { border-color: #118AB2; }
        .geography:hover { background-color: #F0F8FF; }
        .geography .subject-icon { color: #118AB2; }

        .art { border-color: #EF476F; }
        .art:hover { background-color: #FFF0F5; }
        .art .subject-icon { color: #EF476F; }

        .music { border-color: #9B5DE5; }
        .music:hover { background-color: #F8F0FF; }
        .music .subject-icon { color: #9B5DE5; }

        .pe { border-color: #00BBF9; }
        .pe:hover { background-color: #F0F9FF; }
        .pe .subject-icon { color: #00BBF9; }

        .language { border-color: #F15BB5; }
        .language:hover { background-color: #FFF0F8; }
        .language .subject-icon { color: #F15BB5; }

        .religion { border-color: #9B5DE5; }
        .religion:hover { background-color: #F8F0FF; }
        .religion .subject-icon { color: #9B5DE5; }

        .footer {
            margin-top: 30px;
            font-size: 1.2rem;
            color: #1A535C;
            font-weight: bold;
        }
        a{
            text-decoration:none;
        }
        #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;
		}

        @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;
  }
}

  #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; }
  }