/* Reset and base */
* {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  background: linear-gradient(135deg, #e9f5ec, #d3ede2);
  color: #1e293b;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Main Content */
main {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  padding: 2rem 1rem 4rem;
}

.lessons-container {
  width: 100%;
  max-width: 700px;
}

/* Lesson Cards */
.lesson {
  background: linear-gradient(145deg, #d4f1e2, #a8dbc1);
  padding: 1.25rem 1.5rem;
  border-radius: 12px;
  margin-bottom: 1rem;
  cursor: pointer;
  box-shadow: 6px 6px 12px #a2c9b4, -6px -6px 12px #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}

.lesson:hover,
.lesson:focus-within {
  transform: translateY(-6px);
  box-shadow: 10px 10px 20px #8fbba3, -10px -10px 20px #e4f5ec;
  background: linear-gradient(145deg, #bfe9d2, #86c7a9);
  outline: none;
}

.lesson h2 {
  font-size: 1.25rem;
  color: #1e3a2d;
  margin: 0;
  user-select: none;
}

/* Toggle icon styling */
.toggle-icon {
  font-size: 1.5rem;
  color: #22c55e;
  transition: transform 0.3s ease;
  user-select: none;
}

.lesson.expanded .toggle-icon {
  transform: rotate(90deg);
}

/* Lesson Content */
.lesson-content {
  display: none;
  padding: 1rem 1.5rem;
  background-color: #d1fae5;
  border-left: 5px solid #10b981;
  border-radius: 0 0 12px 12px;
  margin-bottom: 1.5rem;
  box-shadow: inset 0 1px 4px rgba(16, 185, 129, 0.25);
  font-size: 1rem;
  line-height: 1.5;
  color: #1e3a2d;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Show lesson content when expanded */
.lesson.expanded + .lesson-content {
  display: block;
  animation: fadeInContent 0.4s ease forwards;
}

.lesson-content pre {
  white-space: pre-wrap;
  word-break: break-word;
  color: #111;
  font-size: 1.2rem;
}

/* Animation */
@keyframes fadeInContent {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .lesson {
    padding: 1rem 1rem;
  }
  .lesson h2 {
    font-size: 1.1rem;
  }
  .lesson-content {
    font-size: 0.9rem;
    padding: 0.8rem 1rem;
    margin-bottom: 1rem;
  }
  .lesson-content pre{
   font-size: 0.92rem
  }
}