@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');

/* ========== General Style ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: black;
  color: #fff;
  font-family: "Cairo", sans-serif;

}

a,
button {
  all: unset;
  display: inline-block;
  cursor: pointer;
  transition: all 0.3s ease;
}

a:active,
button:active {
  scale: 0.9;
}

/* Todo App Start */
#todo-app {
  padding: 2.5rem 0;
}

.notes {
  padding: 1rem 0;
}

.note {
  padding: 0 0.75rem;
}

.mod-del,
.card-note {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
  transition: all 0.5s ease;
}

.mod-del.show,
.card-note.show {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  box-shadow: 0 0 2px 2px rgba(5, 0, 0, 0.39);
}

.card-note.show {
  z-index: 10;
}

.card-note {
  padding: 1rem;
}

input,
textarea {
  padding: 0.25rem 0.5rem;
}

.btn-add {
  padding: 0.5rem 1rem;
  transition: all 0.3s ease;
}

.btn-add:active {
  scale: 0.9;
}

/* Todo App End */