.notes-container {
  width: 85%;
  max-width: 468px;
  padding: 2rem;
  background-color: rgb(255, 196, 196);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  border: 2px solid black;
  border-radius: 2rem;
  box-shadow: 0 0 5px black;
  overflow: hidden;
  margin: 2rem 0;
}

.notes-container:hover {
  transform: scale(0.95);
  transition: all 0.3s ease-in-out;
  box-shadow: 0 0 25px black;
}

.notes-container h2 {
  font-family: "Michroma", sans-serif;
  font-size: 2.5rem;
  font-weight: 400;
  font-style: normal;
  margin-bottom: 1rem;
}

.note-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

#noteText {
  height: 4rem;
  width: 20rem;
  border-radius: 1rem;
  padding: 1rem;
  font-size: 1rem;
  resize: none;
}

#addNoteBtn {
  height: 5rem;
  width: 5rem;
  border-radius: 1rem;
  padding: 1rem;
  font-size: 1rem;
  margin-left: 1rem;
  background-color: violet;
  color: #fff;
  font-family: "Michroma", sans-serif;
  cursor: pointer;
}

#addNoteBtn:hover,
.delete-note:hover {
  transform: scale(0.9);
  transition: all 0.1s ease-in-out;
}

.notes-list {
  width: 95%;
  max-height: 475px; /* ✅ scroll limit */
  display: flex;
  flex-direction: column;
  padding: 1rem;
  overflow-y: auto; /* ✅ enables vertical scrolling */
  margin-top: 1rem;
  box-sizing: border-box;
  align-items: center;
  justify-content: flex-start;
}



.note-card {
  width: 95%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: antiquewhite;
  padding: 0.75rem;
  border-radius: 0.75rem;
  margin: 0.5rem 0;
  font-size: 0.7rem;
}

.note-card p {
  font-family: "Bungee", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  word-break: break-word;
  flex: 1;
}

.delete-note {
  font-family: "Michroma", sans-serif;
  font-weight: 400;
  font-style: normal;
  border-radius: 0.5rem;
  background-color: red;
  color: #fff;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.25rem;
  white-space: nowrap;
}
@media screen and (max-width: 540px){

.notes-container {
  width: 60%;
  max-width: 280px;
  min-width: 280px;
  margin-bottom: 5rem;
}


#noteText {
  height: 3rem;
  width: 15rem;
}

#addNoteBtn {
  height: 4rem;
  width: 4rem;
  border-radius: 1rem;
  padding: 1rem;
  font-size: 0.75rem;
  margin-left: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.notes-list {
  width: 95%;
  max-height: 280px; /* ✅ scroll limit */
}

.delete-note {
  padding: 0.35rem 0.5rem;
}
}