.lesson-page {
  padding-top: 50px;
}

.lesson-page .two-column {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

@media (max-width: 768px) {
  .lesson-page .two-column {
    flex-direction: column;
  }
}


.left-column {
  flex: 1;
  min-width: 0;
}

.right-column {
  flex: 1.2;
  min-width: 0;
}

input.gap {
  transition: all 0.2s ease;
}

.correct {
  border: 0.5px solid #28a745;
  background-color: #e6ffe6;
}

.incorrect {
  border: 0.5px solid #dc3545;
  background-color: #ffe6e6;
}

input.gap:focus {
  outline: 2px solid #003651;
}

.left-column button {
  margin-top: 20px;
  padding: 8px 14px;
  border-radius: 6px;
  border: none;
  background-color: hwb(333 13% 11%);
  color: white;
  cursor: pointer;
}

.left-column button:hover {
  background-color: hsl(172, 76%, 45%);
}

.vocab-list {
  transition: opacity 0.3s ease;
}

.lesson-page .vocab-list.hidden {
  opacity: 0.1;
}

header.fixed-top {
  z-index: 9999;
}
@media (max-width: 768px) {

  .left-column button {
    margin-top: 10px;     /* less space above */
    margin-bottom: 50px;  /* more space below */
  }

  .vocab-list {
    margin-bottom: 10px;  /* reduce gap above button */
  }

}

@media (max-width: 768px) {

  .vocab-block {
    display: flex;
    flex-direction: column;
    gap: 10px; /* perfect spacing */
  }

}