/* style.css */

body {

  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);

  background-size: 400% 400%;

  animation: gradientBG 15s ease infinite;

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100vh;

  margin: 0;

  color: #fff;

  transition: background 0.5s ease;

}

body.dark-mode {

  background: linear-gradient(-45deg, #1e3c72, #2a5298, #1c1c1c, #000);

}

@keyframes gradientBG {

  0% {

    background-position: 0% 50%;

  }

  50% {

    background-position: 100% 50%;

  }

  100% {

    background-position: 0% 50%;

  }

}

.container {

  background: rgba(255, 255, 255, 0.1);

  padding: 20px;

  border-radius: 15px;

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

  backdrop-filter: blur(10px);

  width: 90%;

  max-width: 500px;

  text-align: center;

  transition: background 0.5s ease;

}

h1 {

  font-size: 24px;

  margin-bottom: 20px;

  animation: fadeIn 1s ease-in-out;

}

.theme-toggle {

  position: absolute;

  top: 20px;

  right: 20px;

}

#theme-btn {

  background: rgba(255, 255, 255, 0.2);

  border: none;

  border-radius: 50%;

  width: 40px;

  height: 40px;

  cursor: pointer;

  font-size: 18px;

  transition: background 0.3s ease, transform 0.2s ease;

}

#theme-btn:hover {

  background: rgba(255, 255, 255, 0.4);

  transform: scale(1.1);

}

.input-container {

  display: flex;

  flex-direction: column;

  gap: 10px;

  margin-bottom: 20px;

  animation: slideIn 0.5s ease-in-out;

}

#task-input, #priority, #due-date, #category {

  padding: 10px;

  border: none;

  border-radius: 25px;

  font-size: 16px;

  outline: none;

  background: rgba(255, 255, 255, 0.8);

}

#add-task-btn {

  padding: 10px 20px;

  background: #ff6f61;

  color: #fff;

  border: none;

  border-radius: 25px;

  cursor: pointer;

  font-size: 16px;

  transition: background 0.3s ease, transform 0.2s ease;

}

#add-task-btn:hover {

  background: #ff3b2f;

  transform: scale(1.05);

}

.settings {

  margin-bottom: 20px;

  text-align: left;

}

.settings label {

  display: block;

  margin: 5px 0;

}

.filters {

  display: flex;

  justify-content: space-around;

  margin-bottom: 20px;

  animation: slideIn 0.5s ease-in-out;

}

.filters button {

  padding: 10px 20px;

  background: rgba(255, 255, 255, 0.2);

  color: #fff;

  border: none;

  border-radius: 25px;

  cursor: pointer;

  font-size: 14px;

  transition: background 0.3s ease, transform 0.2s ease;

}

.filters button:hover {

  background: rgba(255, 255, 255, 0.4);

  transform: scale(1.05);

}

.progress-bar {

  width: 100%;

  height: 10px;

  background: rgba(255, 255, 255, 0.2);

  border-radius: 5px;

  margin-bottom: 20px;

  overflow: hidden;

}

.progress {

  height: 100%;

  background: #4caf50;

  width: 0%;

  transition: width 0.5s ease;

}

#task-list {

  list-style: none;

  padding: 0;

}

.task-item {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 10px;

  background: rgba(255, 255, 255, 0.2);

  border-radius: 10px;

  margin-bottom: 10px;

  animation: slideIn 0.5s ease-in-out;

  transition: opacity 0.3s ease, transform 0.3s ease;

  cursor: grab;

}

.task-item.completed {

  opacity: 0.6;

  text-decoration: line-through;

  transform: scale(0.95);

}

.task-item.deleting {

  animation: slideOut 0.3s ease-in-out forwards;

}

.task-item input[type="checkbox"] {

  margin-right: 10px;

  cursor: pointer;

}

.task-item button {

  background: #ff6f61;

  color: #fff;

  border: none;

  border-radius: 50%;

  width: 25px;

  height: 25px;

  cursor: pointer;

  transition: background 0.3s ease, transform 0.2s ease;

}

.task-item button:hover {

  background: #ff3b2f;

  transform: scale(1.1);

}

@keyframes fadeIn {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }

}

@keyframes slideIn {

  from {

    opacity: 0;

    transform: translateY(20px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}

@keyframes slideOut {

  from {

    opacity: 1;

    transform: translateX(0);

  }

  to {

    opacity: 0;

    transform: translateX(100%);

  }

}