@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Parisienne&family=Quicksand:wght@300;400&display=swap');





/* ---- Global Styles ---- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: #bde0fe;
  /* Light Sky Blue */
  color: #333;
  transition: background-color 0.3s ease;
  overflow-x: hidden;
}

/* custom scrollbar */
::-webkit-scrollbar-thumb{
  background: linear-gradient(to bottom, #d7b8ea, #eab1c5, #b8a2cc, #a3c4f3, #91afdf);
  border-radius: 50px;
  border: 1px solid #fff;
}

::-webkit-scrollbar{
  width: 10px;
  background-color: transparent;
}





/* loader styling */

.loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  background: linear-gradient(270deg, #eecad8, #dcb1cd, #c6e3e7, #e2f0cb, #fce1e4, #c6a6cb, #d8f3dc);
  background-size: 1400% 1400%;
  animation: rainbowBG 8s ease-in-out infinite, fadeOut 2s ease-in-out 4s forwards;
}

.brand {
  font-size: 4rem;
  color: #444;
  animation: fadeIn 2s ease forwards;
  font-family: 'Pacifico', cursive;
}


.tagline {
  font-family: 'Quicksand', sans-serif;
  font-size: 3.5vh;
  color: #666;
  margin-top: 1.5vh;
  animation: fadeIn 2s ease 0.5s forwards;
  opacity: 0;
}

@keyframes fadeIn {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes rainbowBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}




/* main content styles */
.app-container {
  display: flex;
  min-height: 100vh;
}

/* ---- Sidebar ---- */
.sidebar {
  width: 18%;
  background-color: #ffc8dd;
  /* Gentle Pink */
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4vh;
  border-right: 2px solid #ffafcc;
  position: relative;
}

.sidebar h2,
.sidebar h3 {
  margin-bottom: 10px;
  color: #222;
}

.user-info {
  margin-bottom: 30px;
}


.list-section {
  background: #fff9f9a8;
  padding: 15px;
  border-radius: 20px;
  box-shadow: 0 8px 16px rgba(255, 182, 193, 0.3);
  /* margin: 20px; */
  width: 100%;
}

.list-section h2 {
  font-family: 'Gilroy', sans-serif;
  color: #ff89a9;
  margin-bottom: 10px;
}

.input-area {
  display: flex;
  gap: 10px;
}

#listInput {
  flex: 1;
  padding: 10px;
  border: 2px solid #ffc1cc;
  border-radius: 12px;
  width: 80%;
  outline: none;
  font-family: 'Gilroy', sans-serif;
}

#addBtn {
  background-color: #ffc1cc;
  color: white;
  border: none;
  border-radius: 15px;
  padding: 5px;
  font-size: 18px;
  cursor: pointer;
}

#listContainer {
  margin-top: 15px;
  list-style: none;
  padding-left: 0;
}

#listContainer li {
  background: #ffc8dda9;
  margin: 8px 0;
  padding: 10px;
  width: 100%;
  border-radius: 10px;
  font-family: 'Gilroy', sans-serif;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s ease-in-out;
}

#listContainer li:hover {
  background: #ffdce5;
}

.delete-btn-list {
  background: transparent;
  border: none;
  color: #ff4d6d;
  font-size: 20px;
  cursor: pointer;
  margin-left: 10%;
}


.mobile-list-section {
  background: #fff0f5;
  padding: 10px;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(255, 192, 203, 0.3);
  margin: 15px 0;
  width: 100%;
  font-family: 'Gilroy', sans-serif;
}

.mobile-list-section h2 {
  font-size: 20px;
  color: #ff6f91;
  margin-bottom: 10px;
}

.mobile-input-area {
  display: flex;
  gap: 8px;
  
}

#mobileListInput {
  flex: 1;
  padding: 8px;
  width: 80%;
  font-size: 14px;
  border-radius: 10px;
  border: 2px solid #ffb6c1;
}

#mobileAddBtn {
  padding: 8px 12px;
  border-radius: 10px;
  background-color: #ffb6c1;
  color: white;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

#mobileListContainer {
  margin-top: 12px;
  list-style: none;
  padding-left: 0;
}

#mobileListContainer li {
  background-color: #ffe4e9;
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 8px;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mobile-delete-btn {
  background: transparent;
  border: none;
  color: #ff3e60;
  font-size: 18px;
  cursor: pointer;
}




/* ---- Main Content ---- */
.main-content {
  width: 82%;
  flex: 1;
  padding: 18px;
  background-color: #bde0fe;
  /* Light Sky Blue */
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Section styles */
.main-content section {
  background-color: #ffffff;
  border: 1px solid #ffffff34;
  backdrop-filter: blur(5px);
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(205, 180, 219, 0.2) ;
  /* Soft Lavender */
}


/* habit note popup modal */
.habit-note-popup {
  height: 50vh;
  width: 60vw;
  background-color: #b8c2d1;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  z-index: 99;
  border-radius: 15px;
  border: 2px solid #738aad;
}


#habit-note-popup #habit-note-textarea {
  width: 100%;
  height: 80%;
  margin-top: 10px;
  padding: 10px;
  font-size: 1rem;
  resize: none;
  overflow: hidden;
  background-color: transparent;
  border: none;
  outline: none;
}

#habit-note-popup #save-habit-note {
  background-color: #4576c4;
}

#habit-note-popup #close-habit-note {
  background-color: rgb(188, 69, 92);
}


#habit-note-popup button {
  height: 5vh;
  width: 8vw;
  border: none;
  color: white;
  font-family: Poppins;
  border-radius: 5px;
}


.your-habits {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.section-header h2 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

.section-header p {
  font-size: 14px;
  color: #666;
}

.habit-cards {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 18%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  gap: 2vw;
  padding-top: 1vh;
  padding-bottom: 2vh;
}

.habit-cards::-webkit-scrollbar {
  display: none;
}


.habit-block {
  display: inline-block;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}

.habit-block:hover {
  transform: translateY(-5px);
}


#add-habit-btn {
  background-color: #cdb4db;
  border: none;
  padding: 10px 20px;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  transition: 0.3s;
  margin-bottom: 10px;
  font-family: Poppins;
}

#add-habit-btn:hover {
  background-color: #b8a2cc;
}

.modal {
  display: none;
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  border-radius: 16px;
  width: 300px;
  font-family: inherit;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.modal-content h2 {
  margin-bottom: 15px;
}

.modal-content input {
  width: 100%;
  padding: 10px;
  margin: 8px 0;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-family: Poppins;
}

.modal-content button {
  background-color: #a3c4f3;
  padding: 10px;
  border: none;
  width: 100%;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
  font-family: Poppins;
}

.close {
  float: right;
  font-size: 20px;
  cursor: pointer;
}

.habit-block {
  height: 30vh;
  width: 34vh;
  padding: 2vh;
  /* background-color: #ffc8dd; */
  border-radius: 10px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5vh;
  flex-direction: column;
  position: relative;
}

.habit-block>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}

.habit-block .text-content {
  text-transform: capitalize;
  margin-left: 1vw;
}


/* for reminder section */

#add-reminder-btn {
  background-color: #cdb4db;
  border: none;
  padding: 10px 20px;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  transition: 0.3s;
  margin-bottom: 10px;
  font-family: Poppins;
  width: 100%;
}

#add-reminder-btn:hover {
  background-color: #b8a2cc;
}

.reminders {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.reminder-cards {
  display: flex;
  align-items: center;
  /* justify-content: ; */
  overflow-x: auto;
  overflow-y: hidden;
  gap: 1.2vw;
}

.reminder-cards::-webkit-scrollbar {
  display: none;
}

.reminder-note {
  display: inline-block;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: all ease 0.2s;
  background-color: #cdb4db6b;
  border: 1.5px solid #b8a2ccb3;
  border-radius: 10px;
  height: 34vh;
  width: 28%;
  padding: 4vh;
  flex-wrap: nowrap;
  cursor: pointer;
  flex-shrink: 0;
}

.reminder-note:hover {
  background-color: #b8a2cc7a;
}



.note-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.note-popup-content {
  background: #f7c5d882;
  padding: 20px;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  position: relative;
  backdrop-filter: blur(3px);
}

#note-textarea {
  width: 100%;
  height: 150px;
  margin-top: 10px;
  padding: 10px;
  font-size: 1rem;
  resize: none;
  overflow: hidden;
  background-color: transparent;
  border: none;
  outline: none;
}


#save-note-btn {
  margin-top: 10px;
  padding: 8px 20px;
  font-size: 1rem;
  cursor: pointer;
  background-color: #fff;
  font-family: Poppins;
  border-radius: 8px;
  border: none;
}

.close-btn {
  position: absolute;
  right: 10px;
  top: 5px;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

.hidden {
  display: none;
}

body.no-scroll {
  overflow: hidden;
}


.note-preview {
  color: #582277;
  margin-top: 2vh;
  font-family: Poppins;
}




/*  text area notes */
.reminder-notes-container {
  height: 80vh;
  width: 90vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(160, 104, 104);
  display: none;
}

.close-btn-textarea {
  background-color: yellow;
  position: absolute;
  padding: 20px;
  cursor: pointer;
  z-index: 99;
  display: none;
}


.note-input {
  width: 100%;
  margin-top: 8px;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  font-family: inherit;
}

.save-note-btn {
  margin-top: 6px;
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}




.edit-btn,
.delete-btn {
  margin-top: 10px;
  padding: 5px 10px;
  height: 5vh;
  /* width: 6vw; */
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.edit-btn {
  background-color: #ffd166a7;
  color: #333;
  margin-right: 10px;
  font-family: Poppins;

}

.reminder-note .delete-btn {
  background-color: #ef476ec1;
  color: white;
  font-family: Poppins;
}


.habit-block .delete-btn {
  background-color: #ef476ed4;
  font-family: Poppins;
  color: white;
  position: absolute;
  bottom: -4%;
  right: 8%;
  transition: all ease 0.2s;
}

.habit-block .text-content {
  width: 60%;
}




.your-todos {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* margin-top: 40px; */
}

.todo-input {
  display: flex;
  gap: 10px;
  align-items: center;
}

.todo-input input {
  flex-grow: 1;
  padding: 10px 15px;
  border: 1px solid #aaaaaacf;
  border-radius: 10px;
  font-family: Poppins;
  font-size: 16px;
}

#add-todo-btn {
  padding: 10px 16px;
  background-color: #aed9e0;
  color: #000000;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.3s;
  font-family: Poppins;
}

#add-todo-btn:hover {
  background-color: #97d0db;
}

.todo-cards {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.todo-card {
  background-color: #efe0f8;
  padding: 15px 20px;
  border-left: 5px solid #b8a2cc;
  border-radius: 12px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease;
}

.todo-card:hover {
  transform: translateY(-4px);
}

.todo-card.completed h3 {
  text-decoration: line-through;
  color: #a398ad;
}

.todo-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.priority-dot {
  width: 10px;
  height: 10px;
  background-color: #f3a2bf;
  border-radius: 50%;
}

.todo-buttons {
  display: flex;
  gap: 10px;
}

.todo-buttons button {
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  color: #333;
  background-color: #ddc3ec;
  padding: 1.5vh 0;
  width: 4.5vw;
  border-radius: 7px;
  transition: all ease 0.2s;
}

.todo-buttons button:hover {
  background-color: #d5b5e8;
}



.todo-filters {
  display: flex;
  justify-content: center;
  gap: 12px;
  /* margin: 10px 0 20px; */
}

.filter-btn {
  padding: 8px 16px;
  border: none;
  background: #f1f1f1;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 500;
  transition: 0.2s ease-in-out;
  font-family: Poppins;
}

.filter-btn.active {
  background-color: #7baaf7;
  color: white;
}

.filter-btn:hover {
  background-color: #5886cf;
}

.task-tag {
  background-color: #d6d4d4d8;
  padding: 0.5vh;
  border-radius: 8px;
}

.task-tag.Work {
  background-color: #d1e7dd;
  color: #115a38;
}

.task-tag.Personal {
  background-color: #fcdad0;
  color: #842029;
}

.task-tag.Urgent {
  background-color: #f8d7da;
  color: #842029;
}

.task-tag.Health {
  background-color: #dbeafe;
  color: #1e3a8a;
}

.task-tag.Academics {
  background-color: #b8a2cc51;
  color: #582277;
}

.task-tag.Unwind {
  background-color: #a3c4f378;
  color: #1e3a8a;
}


#todo-tag {
  padding: 1.4vh 8px;
  font-size: 0.8rem;
  font-weight: 500;
  background-color: #ffe0ec;
  color: #333;
  border: 1px solid #be9fd0;
  border-radius: 10px;
  font-family: Poppins;
}

#todo-tag-select {
  padding: 1.4vh 8px;
  font-size: 0.8rem;
  font-weight: 500;
  background-color: #ffe0ec;
  color: #333;
  border: 1px solid #be9fd0;
  border-radius: 10px;
  font-family: Poppins;
}

#tag-list {
  list-style: none;
  /* padding: 1vh; */
  border-radius: 8px;
  background-color: #ffc8ddb9;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1vh;
  margin-top: -4vh;
  flex-wrap: wrap;
}

#tag-list li {
  padding: 8px 12px;
  background-color: #f0f4ff;
  border-radius: 8px;
  cursor: pointer;
  margin: 0px;
  transition: background-color 0.2s ease;
}

#tag-list li:hover {
  background-color: #d3e0ff;
}


#tag-list-menu {
  list-style: none;
  /* padding: 1vh; */
  border-radius: 8px;
  background-color: #ffc8ddb9;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1vh;
  margin-top: -4vh;
  flex-wrap: wrap;
}

#tag-list-menu li {
  padding: 8px 12px;
  background-color: #f0f4ff;
  border-radius: 8px;
  cursor: pointer;
  margin: 0px;
  transition: background-color 0.2s ease;
}

#tag-list-menu li:hover {
  background-color: #d3e0ff;
}

#settings-btn {
  position: fixed;
  bottom: 2vh;
  left: 1%;
  background-color: #00000089;
  padding: 1vh;
  font-size: 1rem;
  cursor: pointer;
  color: white;
  font-family: Poppins;
  border: none;
  border-radius: 8px;
}

#save-username {
  margin-bottom: 2vh;
  padding: 1vh;
  border-radius: 8px;
  border: 1px solid #5886cf;
  background-color: #97d0db;
}

.settings-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.settings-modal-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  border-radius: 10px;
  width: 300px;
  text-align: center;
}

.settings-modal-content input {
  width: 100%;
  padding: 8px;
  margin: 10px 0;
  font-family: Poppins;
  border-radius: 8px;
  border: 2px solid #11111166;
}

.logout-btn {
  background-color: rgb(215, 53, 85);
  color: white;
  padding: 6px 10px;
  border: none;
  margin-top: 2vh;
  border-radius: 5px;
  cursor: pointer;
}

.close-settings {
  float: right;
  font-size: 3.5vh;
  cursor: pointer;
}


.logo{
  position: absolute;
  right: 2vw;
  z-index: 99;
  margin-left: 6vw;
}

.logo h1{
  font-family: "Pacifico";
  color: #7d5d9b;
  /* position: absolute; */
  z-index: 999;
  margin-left: 6vw;
  margin-top: 1vh;
}

.settings {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  display: block;
}

@media screen and (max-width: 768px) {
  .settings {
    display: none;
  }
}

.menu-icon i{
  font-size: 3vh;
  position: absolute;
  top: 2vh;
  left: 2vh;
  z-index: 99;
  display: none;
  /* scale: 0; */
}


/* Sidebar Menu */
.sidebar-menu {
  position: fixed;
  top: 0;
  left: -251px;
  height: 100%;
  width: 250px;
  background-color: #eecad8;
  border-right: 1px solid #ca90a4;
  color: #fff;
  padding: 20px;
  transition: left 0.3s ease;
  z-index: 999;
  display: none;
}

.sidebar-menu ul {
  list-style-type: none;
  padding: 0;
}

.sidebar-menu li {
  margin: 15px 0;
}

.sidebar-menu a {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
}

.sidebar-menu a:hover {
  color: #007bff;
}

/* Close Icon */
.close-icon {
  font-size: 30px;
  color: #fff;
  cursor: pointer;
  text-align: right;
  margin-bottom: 20px;
  position: absolute;
  top: 0;
  color: black;
}



/* ---- Mobile Styles ---- */


@media (max-width: 1000px) {
  .settings{
    display: none;
  }
  
}


@media (max-width: 375px) {
  body{
    width: 100%;
    overflow-x: hidden;
    font-size: 2px;
    font-family: Poppins;
  }

  .settings{
    display: none;
    scale: 0;
  }

  .tagline{
    font-size: 3vh;
  }

  .logo h1{
    font-size: 2vh;
    margin-top: 1.5vh;
  }

  .todo-filters{
    scale: 0.8;
  }

  .select-wrapper{
    gap: 2vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .todo-input>input{
    width: 100%;
  }

  .todo-input{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  #add-todo-btn{
    width: 98%;
  }


  .todo-card{
    height: 85%;
  }

  .todo-card h3{
    font-size: 1.4vh;
  }

  .todo-card span{
    font-size: 1.2vh;
  }

  .todo-buttons{
    /* background-color: red; */
    display: flex;
    flex-direction: column;
    width: 20%;
  }
  
  .todo-buttons button{
    border-radius: 5px;
    padding: 0.5vh;
    width: 100%;
    font-family: Poppins;
  }

  .habit-cards{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
  }

  .habit-block {
    scale: 0.9;
    flex-shrink: 0;
    font-size: 2.5vh;
  }

  #habit-note-popup, .note-popup-content {
    width: 90%;
    height: 50vh;
  }

  #habit-note-popup button{
    width: 20%;
  }

  .reminder-cards{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    flex-wrap: wrap;
  }

  .reminder-note{
    width: 100%;
    height: 100%;
    flex-basis: 0;
    display: block;
    font-size: 2vh;
  }

  .modal{
    font-size: 2vh;
  }

  .main-content {
    padding: 8px;
  }

  .sidebar {
    display: none;
  }

  .sidebar-menu{
    display: block;
    font-size: 2vh;
    color: black;
    min-height: 100vh;
    overflow-y: scroll;
  }

  .menu-icon i{
    scale: 0.1;
    z-index: 99;
  }

  .sidebar-menu .user-info-menu{
    /* background-color: red; */
    margin-top: 3vh;
    margin-bottom: 5vh;
  }

  .sidebar-menu .user-info-menu h2{
    font-size: 3vh;
  }

  .sidebar-menu>h3{
    margin-bottom: 3vh;
  }

  #tag-list-menu{
    flex-wrap: wrap;
    padding-top: 2vh;
  }

  #tag-list-menu li{
    margin: 0;
  }


  .add-item-modal{
    width: 95%;
    margin-top: 5vh;
  }
}

@media (max-width: 500px) {
  body{
    width: 100%;
    overflow-x: hidden;
    font-family: Poppins;
    font-size: 2vh;
  }

  .tagline{
    font-size: 1vh;
  }

  .logo h1{
    font-size: 1.5vh;
    margin-top: 1.5vh;
  }

  .todo-filters{
    scale: 0.8;
  }

  .select-wrapper{
    gap: 2vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .todo-input>input{
    width: 100%;
  }

  .todo-input{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  #add-todo-btn{
    width: 98%;
  }


  .todo-card{
    height: 85%;
    font-size: 1vh;
  }

  .todo-card h3{
    font-size: 1vh;
  }

  .todo-buttons{
    /* background-color: red; */
    display: flex;
    flex-direction: column;
    width: 20%;
  }
  
  .todo-buttons button{
    border-radius: 5px;
    padding: 0.5vh;
    width: 100%;
    font-family: Poppins;
  }

  .habit-cards{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
  }

  .habit-block {
    scale: 0.9;
    flex-shrink: 0;
    font-size: 2.5vh;
  }

  #habit-note-popup, .note-popup-content {
    width: 90%;
    height: 50vh;
  }

  #habit-note-popup button{
    width: 20%;
  }

  .reminder-cards{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    flex-wrap: wrap;
  }

  .reminder-note{
    width: 100%;
    height: 100%;
    flex-basis: 0;
    display: block;
    font-size: 2vh;
  }

  .modal{
    font-size: 2vh;
  }

  .main-content {
    padding: 8px;
  }

  .sidebar {
    display: none;
  }

  .sidebar-menu{
    display: block;
    font-size: 1vh;
    color: black;
    min-height: 100vh;
    overflow-y: scroll;
  }

  .menu-icon i{
    scale: 0.6;
    z-index: 99;
  }

  .sidebar-menu .user-info-menu{
    /* background-color: red; */
    margin-top: 3vh;
    margin-bottom: 5vh;
  }

  .sidebar-menu .user-info-menu h2{
    font-size: 3vh;
  }

  .sidebar-menu>h3{
    margin-bottom: 3vh;
  }

  #tag-list-menu{
    flex-wrap: wrap;
    padding-top: 2vh;
  }

  #tag-list-menu li{
    margin: 0;
  }


  .add-item-modal{
    width: 95%;
    margin-top: 5vh;
  }
}

@media (max-width: 800px) {
  body{
    width: 100%;
    overflow-x: hidden;
    font-size: 3px;
    font-family: Poppins;
  }

  .tagline{
    font-size: 3vh;
  }

  .logo h1{
    font-size: 2.5vh;
    margin-top: 1.5vh;
  }

  .todo-filters{
    scale: 0.8;
  }

  .select-wrapper{
    gap: 2vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .todo-input>input{
    width: 100%;
  }

  .todo-input{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  #add-todo-btn{
    width: 98%;
  }


  .todo-card{
    height: 85%;
  }

  .todo-card h3{
    font-size: 2.5vh;
  }

  .todo-buttons{
    /* background-color: red; */
    display: flex;
    flex-direction: column;
    width: 20%;
  }
  
  .todo-buttons button{
    border-radius: 5px;
    padding: 0.5vh;
    width: 100%;
    font-family: Poppins;
  }

  .habit-cards{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
  }

  .habit-block {
    scale: 0.9;
    flex-shrink: 0;
    font-size: 2.5vh;
  }

  #habit-note-popup, .note-popup-content {
    width: 90%;
    height: 50vh;
  }

  #habit-note-popup button{
    width: 20%;
  }

  .reminder-cards{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .reminder-note{
    width: 100%;
    height: 100%;
    flex-basis: 0;
    display: inline-block;
    font-size: 2vh;
  }

  .modal{
    font-size: 2vh;
  }

  .main-content {
    padding: 8px;
  }

  .sidebar {
    display: none;
  }

  .sidebar-menu{
    display: block;
    font-size: 2vh;
    color: black;
    min-height: 100vh;
    overflow-y: scroll;
  }

  .menu-icon i{
    scale: 1;
    z-index: 99;
  }

  .sidebar-menu .user-info-menu{
    /* background-color: red; */
    margin-top: 3vh;
    margin-bottom: 5vh;
  }

  .sidebar-menu .user-info-menu h2{
    font-size: 3vh;
  }

  .sidebar-menu>h3{
    margin-bottom: 3vh;
  }

  #tag-list-menu{
    flex-wrap: wrap;
    padding-top: 2vh;
  }

  #tag-list-menu li{
    margin: 0;
  }


  .add-item-modal{
    width: 95%;
    margin-top: 5vh;
  }
}

@media (max-width: 900px) {
  body{
    width: 100%;
    overflow-x: hidden;
    font-size: 3px;
    font-family: Poppins;
  }

  .tagline{
    font-size: 2vh;
  }

  .logo h1{
    font-size: 2.5vh;
    margin-top: 1.5vh;
  }

  .todo-filters{
    scale: 0.8;
  }

  .select-wrapper{
    gap: 2vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .todo-input>input{
    width: 100%;
  }

  .todo-input{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  #add-todo-btn{
    width: 98%;
  }


  .todo-card{
    height: 85%;
  }

  .todo-card h3{
    font-size: 2.5vh;
  }

  .todo-buttons{
    /* background-color: red; */
    display: flex;
    flex-direction: column;
    width: 20%;
  }
  
  .todo-buttons button{
    border-radius: 5px;
    padding: 0.5vh;
    width: 100%;
    font-family: Poppins;
  }

  .habit-cards{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
  }

  .habit-block {
    scale: 0.9;
    flex-shrink: 0;
    font-size: 2.5vh;
  }

  #habit-note-popup, .note-popup-content {
    width: 90%;
    height: 50vh;
  }

  #habit-note-popup button{
    width: 20%;
  }

  .reminder-cards{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .reminder-note{
    width: 100%;
    height: 100%;
    flex-basis: 0;
    display: inline-block;
    font-size: 2vh;
  }

  .modal{
    font-size: 2vh;
  }

  .main-content {
    padding: 8px;
  }

  .sidebar {
    display: none;
  }

  .sidebar-menu{
    display: block;
    font-size: 2vh;
    color: black;
    min-height: 100vh;
    overflow-y: scroll;
  }

  .menu-icon i{
    scale: 1;
    z-index: 99;
  }

  .sidebar-menu .user-info-menu{
    /* background-color: red; */
    margin-top: 3vh;
    margin-bottom: 5vh;
  }

  .sidebar-menu .user-info-menu h2{
    font-size: 3vh;
  }

  .sidebar-menu>h3{
    margin-bottom: 3vh;
  }

  #tag-list-menu{
    flex-wrap: wrap;
    padding-top: 2vh;
  }

  #tag-list-menu li{
    margin: 0;
  }


  .add-item-modal{
    width: 95%;
    margin-top: 5vh;
  }
}

@media (max-width: 1000px) {
  body{
    width: 100%;
    overflow-x: hidden;
    font-size: 3px;
    font-family: Poppins;
  }

  .tagline{
    font-size: 2vh;
  }

  .logo h1{
    font-size: 2.4vh;
    margin-top: 1.5vh;
  }

  .sidebar-menu h3{
    font-size: 2.5vh;
  }

  .list-section-menu .list-container-menu{
    font-size: 2vh;
  }

  .todo-filters{
    scale: 0.8;
  }

  .select-wrapper{
    gap: 2vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .todo-input>input{
    width: 100%;
  }

  .todo-input{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  #add-todo-btn{
    width: 98%;
  }


  .todo-card{
    height: 80%;
  }

  .todo-card h3{
    font-size: 2vh;
  }

  .todo-buttons{
    /* background-color: red; */
    display: flex;
    flex-direction: column;
    width: 20%;
  }
  
  .todo-buttons button{
    border-radius: 5px;
    padding: 0.5vh;
    width: 100%;
    font-family: Poppins;
    margin-left: 2vh;
  }

  .habit-cards{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
  }

  .habit-block {
    scale: 0.9;
    flex-shrink: 0;
    font-size: 2.5vh;
  }

  #habit-note-popup, .note-popup-content {
    width: 90%;
    height: 50vh;
  }

  #habit-note-popup button{
    width: 20%;
  }
  .reminder-cards{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    flex-wrap: wrap;
  }

  .reminder-note{
    width: 100%;
    height: 100%;
    flex-basis: 0;
    display: block;
    font-size: 2vh;
  }

  .reminder-note h2{
    font-size: 3vh;
  }

  .reminder-note p{
    font-size: 2.5vh;
  }

  .reminder-note button{
    font-size: 2vh;
  }

  .modal{
    font-size: 2vh;
  }

  .main-content {
    padding: 8px;
  }

  .sidebar {
    display: none;
  }

  .sidebar-menu{
    display: block;
    font-size: 3vh;
    color: black;
    min-height: 100vh;
    overflow-y: scroll;
  }

  .menu-icon i{
    display: block;
    z-index: 99;
    scale: 1;
  }

  .sidebar-menu .user-info-menu{
    /* background-color: red; */
    margin: 1vh;
  }

  .sidebar-menu .user-info-menu h2{
    font-size: 3vh;
  }

  .sidebar-menu>h3{
    margin-bottom: 3vh;
  }

  #tag-list-menu{
    flex-wrap: wrap;
    padding-top: 2vh;
  }

  #tag-list-menu li{
    font-size: 2vh;
    margin: 0;
  }

  .todo-card h3{
    font-size: 2.5vh;
    word-wrap: break-word;
  }

  .todo-card span{
    font-size: 1.8vh;
  }

  .add-item-modal{
    width: 95%;
    margin-top: 5vh;
  }

  .reminder-cards{
    display: flex;
    flex-wrap: nowrap;
  }

  .reminder-cards .reminder-note{
    padding: 1vh 2vw;
    font-size: 3vh;
    flex-shrink: 0;
  }
}


@media (max-width:1500px) {
  .habit-cards{
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .habit-block{
    flex-shrink: 0;
  }

  .list-section {
    background: #fff9f9;
    padding: 15px;
    border-radius: 20px;
    box-shadow: 0 8px 16px rgba(255, 182, 193, 0.3);
    /* margin: 20px; */
    width: 100%;
  }
  
  .list-section h2 {
    font-family: 'Gilroy', sans-serif;
    color: #ff89a9;
    margin-bottom: 10px;
  }
  
  .input-area {
    display: flex;
    gap: 10px;
  }
  
  #listInput {
    flex: 1;
    padding: 10px;
    border: 2px solid #ffc1cc;
    border-radius: 12px;
    outline: none;
    width: 80%;
    font-family: 'Gilroy', sans-serif;
  }
  
  #addBtn {
    background-color: #ffc1cc;
    color: white;
    border: none;
    border-radius: 15px;
    padding: 5px;
    font-size: 18px;
    cursor: pointer;
  }
  
  #listContainer {
    margin-top: 15px;
    list-style: none;
    padding-left: 0;
  }
  
  #listContainer li {
    background: #ffc8dda9;
    margin: 8px 0;
    padding: 10px 15px;
    border-radius: 10px;
    font-family: 'Gilroy', sans-serif;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease-in-out;
  }
  
  #listContainer li:hover {
    background: #ffdce5;
  }
  
  .delete-btn {
    background: transparent;
    border: none;
    color: #ff4d6d;
    font-size: 20px;
    cursor: pointer;
  }
  
}


@media (max-width:2500px) {
  .habit-cards{
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .habit-block{
    flex-shrink: 0;
  }
}