: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,.editBtn {
  border: 0.2rem solid var(--mainGreen);
  color: var(--mainGreen);
  background: transparent;
  margin-top: 1rem;
}
.submitBtn:hover {
  background: var(--mainGreen);
  color: var(--mainWhite);
}
.editBtn:hover {
  background: var(--mainOrange);
  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;
}

:disabled {
  opacity: 0.3!important;
}