:root {
  --mainWhite: #f5f5f5;
  --mainDark: #333333;
  --mainOrange: #ff8552;
  --mainGreen: #297373;
}

body {
  background: var(--mainWhite);
  color: var(--mainDark);
}

.show-btn {
  border-color: var(--mainOrange);
  color: var(--mainOrange);
  background: transparent;
}

.show-btn:hover {
  background: var(--mainOrange);
  color: var(--mainDark);
}

.question-card {
  display: none;
  position: relative;
  background: transparent;
  border-color: var(--mainOrange);
}

.feedback {
  display: none;
}

textarea {
  border-radius: 0.25rem;
  border-color: var(--mainOrange);
}

.close-btn {
  position: absolute;
  top: 0;
  right: 2%;
  font-size: 2rem;
  color: var(--mainOrange);
  cursor: pointer;
}

.close-btn:hover {
  color: var(--mainGreen);
}

.submitBtn {
  border: 0.2rem solid var(--mainGreen);
  color: var(--mainGreen);
  background: transparent;
}

.submitBtn:hover {
  background: var(--mainGreen);
  color: var(--mainWhite);
}

.edit-flashcard {
  border: 0.2rem solid var(--mainGreen);
  color: var(--mainGreen);
  background: transparent;
}

.edit-flashcard:hover {
  background: var(--mainGreen);
  color: var(--mainDark);
}

.delete-flashcard {
  border: 0.2rem solid var(--mainOrange);
  color: var(--mainOrange);
  background: transparent;
}

.delete-flashcard:hover {
  background: var(--mainOrange);
  color: var(--mainDark);
}

.answer {
  display: none;
}

.showItem {
  display: block;
}