/*Fonts*/
.ribeye-regular {
  font-family: "Ribeye", serif;
  font-weight: 400;
  font-style: normal;
}

.playfair-display{
  font-family: "Playfair", serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Ribeye", serif;
}

body {
  background: #c6b3a0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding-top: 40px;
}

.app {
  background: #ffffff;
  padding: 20px 25px 30px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  width: 350px;
}

.app h1 {
  margin-bottom: 15px;
  text-align: center;
}

.input-row {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
}

#todo-input {
  flex: 1;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #6e422c;
  font-family: "Playfair Display", serif;
}

#add-btn {
  padding: 8px 14px;
  border: none;
  border-radius: 4px;
  background: #2a6e6c;
  color: #c6b3a0;
  cursor: pointer;
  font-family: "Playfair Display", serif;
  font-style: bold;
}

#add-btn:hover {
  background: #6e422c;
}

#todo-list {
  list-style: none;
}

.todo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  border-bottom: 1px solid #eee;
}

.todo-text {
  cursor: pointer;
}

.todo-text.completed {
  text-decoration: line-through;
  color: #888;
}

.delete-btn {
  border: none;
  background: #ff4d4d;
  color: white;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 12px;
}

.delete-btn:hover {
  background: #d93636;
}

.dust-out {
  animation: dustOut 0.6s ease forwards;
  position: relative;
}

@keyframes dustOut {
  0% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
  }
  40% {
        opacity: 0.8;
        transform: translateX(10px) rotate(1deg);
        filter: blur(1px);
  }
  70% {
        opacity: 0.4;
        transform: translateX(25px) rotate(-2deg);
        filter: blur(3px);
  }
  100% {
        opacity: 0;
        transform: translateX(40px) rotate(3deg);
        filter: blur(6px);
  }

}