body {
      font-family: 'Comic Sans MS', cursive, sans-serif;
      background-color: #f0f8ff;
      margin: 0;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
    }
    
    h1 {
      color: #4b0082;
      text-align: center;
      margin-bottom: 20px;
    }
    
    .container {
      max-width: 1100px;
      width: 100%;
      background-color: white;
      border-radius: 15px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: 20px;
      margin-bottom: 20px;
    }
    
    .quiz-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 15px;
      margin-bottom: 30px;
    }
    
    .quiz-grid button {
      background-color: #ff6b6b;
      color: white;
      border: none;
      border-radius: 10px;
      padding: 15px;
      font-size: 18px;
      font-weight: bold;
      cursor: pointer;
      transition: transform 0.2s, background-color 0.2s;
    }
    
    .quiz-grid button:hover {
      background-color: #ff5252;
      transform: scale(1.05);
    }
    
    #questionArea {
      background-color: #f9f9f9;
      border-radius: 10px;
      padding: 20px;
      min-height: 200px;
    }
    
    #questionArea h3 {
      color: #4b0082;
      margin-top: 0;
    }
    
    #questionArea p {
      font-size: 24px;
      font-weight: bold;
      margin: 15px 0;
    }
    
    #questionArea ul {
      list-style-type: none;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }
    
    #questionArea li {
      margin-bottom: 10px;
    }
    
    #questionArea button {
      width: 100%;
      padding: 15px;
      font-size: 20px;
      background-color: #4caf50;
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    
    #questionArea button:hover {
      background-color: #388e3c;
    }
    
    .result-container {
      text-align: center;
    }
    
    .result-container h3 {
      color: #4b0082;
      font-size: 28px;
      margin-bottom: 10px;
    }
    
    .result-container p {
      font-size: 24px;
      font-weight: bold;
    }
    
    .feedback {
      font-size: 20px;
      margin-top: 10px;
      padding: 10px;
      border-radius: 5px;
      text-align: center;
    }
    
    .correct {
      background-color: #d4edda;
      color: #155724;
    }
    
    .incorrect {
      background-color: #f8d7da;
      color: #721c24;
    }
    
    @media (max-width: 768px) {
      .quiz-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      
      #questionArea ul {
        grid-template-columns: 1fr;
      }
    }
    
    @media (max-width: 480px) {
      .quiz-grid {
        grid-template-columns: 1fr;
      }
    }

        h1 {
      color: #4b0082;
      text-align: center;
      margin-bottom: 20px;
    }
    
    .english-container, .science-container, .env-container, .ict-container {
      max-width: 1000px;
      width: 100%;
      background-color: white;
      border-radius: 15px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: 20px;
      margin-bottom: 20px;
      box-sizing: border-box;
    }
    
    .english-quiz-grid, .sinhala-quiz-grid, .science-quiz-grid, .env-quiz-grid, .ict-quiz-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 15px;
      margin-bottom: 30px;
    }
    
    .english-quiz-grid button, .sinhala-quiz-grid button, .science-quiz-grid button, .env-quiz-grid button, .ict-quiz-grid button {
      flex: 1 1 200px;
      color: white;
      border: none;
      border-radius: 10px;
      padding: 15px;
      font-size: 18px;
      font-weight: bold;
      cursor: pointer;
      transition: transform 0.2s, background-color 0.2s;
    }
    .english-quiz-grid button{
      background-color: #37b360;
    }
    .science-quiz-grid button, .tamil-quiz-grid button{
      background-color: steelblue;
    }
    .env-quiz-grid button,.sinhala-quiz-grid button {
      background-color: coral;
    }
    .ict-quiz-grid button{
      background-color: #e35295;
    }
    .english-quiz-grid button:hover, .science-quiz-grid button:hover, .env-quiz-grid button:hover, .ict-quiz-grid button:hover {
      background-color: #5252ff;
      transform: scale(1.05);
    }
    
    #englishQuestionArea, #sinhalaQuestionArea, #scienceQuestionArea, #envQuestionArea, #ictQuestionArea, #tamilQuestionArea {
      background-color: #f9f9f9;
      border-radius: 10px;
      padding: 20px;
      min-height: 200px;
    }
    
    #englishQuestionArea h3, #sinhalaQuestionArea h3, #scienceQuestionArea h3, #envQuestionArea h3, #ictQuestionArea h3, #tamilQuestionArea h3 {
      color: black;
      margin-top: 0;
    }
    
    #englishQuestionArea p, #sinhalaQuestionArea p, #scienceQuestionArea p, #envQuestionArea p, #ictQuestionArea p, #tamilQuestionArea p {
      font-size: 24px;
      font-weight: bold;
      margin: 15px 0;
    }
    
    #englishQuestionArea ul, #sinhalaQuestionArea ul, #scienceQuestionArea ul, #envQuestionArea ul, #ictQuestionArea ul, #tamilQuestionArea ul {
      list-style-type: none;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 10px;
    }
    
    #englishQuestionArea li, #sinhalaQuestionArea li, #scienceQuestionArea li, #envQuestionArea li, #ictQuestionArea li, #tamilQuestionArea li {
      margin-bottom: 10px;
    }
    
    #englishQuestionArea button, #sinhalaQuestionArea button, #scienceQuestionArea button, #envQuestionArea button, #ictQuestionArea button, #tamilQuestionArea button {
      width: 100%;
      padding: 15px;
      font-size: 20px;
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    #englishQuestionArea button{
      background-color: #4c4caf;
    }

    #scienceQuestionArea button, #tamilQuestionArea button, #sinhalaQuestionArea button{
      background-color: green;
    }
    #envQuestionArea button{
      background-color: orange;
    }
    #ictQuestionArea button{
      background-color: #5c1838;
    }
    #englishQuestionArea button:hover, #scienceQuestionArea button:hover, #tamilQuestionArea button:hover {
      background-color: #38388e;
    }
    
    .english-result-container, .science-result-container, .env-result-container, .ict-result-container {
      text-align: center;
    }
    
    .english-result-container h3, .science-result-container h3, .env-result-container h3, .ict-result-container h3 {
      color: #4b0082;
      font-size: 28px;
      margin-bottom: 10px;
    }
    
    .english-result-container p, .science-result-container p, .env-result-container p, .ict-result-container p {
      font-size: 24px;
      font-weight: bold;
    }
    
    .english-feedback, .science-feedback, .env-feedback, .ict-feedback {
      font-size: 20px;
      margin-top: 10px;
      padding: 10px;
      border-radius: 5px;
      text-align: center;
    }
    
    .english-correct, .science-correct, .env-correct, .ict-correct {
      background-color: #d4edda;
      color: #155724;
    }
    
    .english-incorrect, .science-incorrect, .env-incorrect, .ict-incorrect {
      background-color: #f8d7da;
      color: #721c24;
    }
    
    @media (max-width: 768px) {
      .english-quiz-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      
      #englishQuestionArea ul {
        grid-template-columns: 1fr;
      }
    }
    
    @media (max-width: 480px) {
      .english-quiz-grid {
        grid-template-columns: 1fr;
      }
    }

    /*imoji rain*/

    #emoji-rain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.emoji {
  position: absolute;
  font-size: 24px;
  animation: fall linear;
}

@keyframes fall {
  to {
    transform: translateY(100vh);
    opacity: 0;
  }
}



/* Question area */
#tamilQuestionArea {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 12px;
  text-align: center;
  font-family: 'Segoe UI', sans-serif;
}

/* Responsive for smaller screens */
@media screen and (max-width: 768px) {
  .tamil-quiz-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 480px) {
  .tamil-quiz-grid {
    grid-template-columns: 1fr;
  }
}



/* Hover effect */
.tamil-quiz-grid button:hover, .sinhala-quiz-grid button:hover {
  background: linear-gradient(to right, #ffcc33, #ffb347);
  transform: scale(1.05);
  box-shadow: 3px 6px 15px rgba(0,0,0,0.2);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .tamil-quiz-grid, .sinhala-quiz-grid {
    flex-direction: column;
    align-items: center;
  }

  .tamil-quiz-grid button, .sinhala-quiz-grid button {
    width: 90%;
    max-width: 100%;
    font-size: 16px;
    padding: 14px;
  }
}


.top-three-container {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 30px;
  flex-wrap: wrap;
  margin: 50px auto;
}

.student-card {
  background: #fff;
  padding: 25px 20px;
  border-radius: 18px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 220px;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.student-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.student-card h3 {
  margin: 12px 0 5px;
  font-size: 20px;
  color: #333;
}

.student-card p {
  margin: 0;
  font-size: 16px;
  color: #555;
  font-weight: 500;
}

.student-photo {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #ddd;
  margin-bottom: 12px;
}

.medal {
  position: absolute;
  top: -12px;
  right: -12px;
  font-size: 26px;
}

/* 🥇 GOLD */
.student-card-gold {
  background: linear-gradient(#ded704);
  z-index: 2;
  transform: translateY(-20px);
}

/* 🥈 SILVER */
.student-card-silver {
  background: linear-gradient(135deg, #eceff1, #cfd8dc);
  margin-top: 20px;
}

/* 🥉 BRONZE */
.student-card-bronze {
  background: linear-gradient(135deg, #ffe0b2, #ffcc80);
  margin-top: 20px;
}