* {  
      box-sizing: border-box;  
      margin: 0;  
      padding: 0;  
    }  
  
    body, html {  
  margin: 0;  
  padding: 0;  
  height: 100%;  
  font-family: 'Segoe UI', sans-serif;  
  overflow: hidden;  
  background: linear-gradient(rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.3)),  
              url(./bgm.png  
              ) center/cover no-repeat;  
}  
      
  
    .app {  
      height: 100vh;  
      width: 100vw;  
      display: flex;  
      flex-direction: column;  
      justify-content: flex-start;  
      align-items: center;  
      padding: 20px;  
      background: transparent;  
    }  
  
    .header {  
      width: 100%;  
      max-width: 600px;  
      margin-bottom: 20px;  
    }  
  
    .header h2 {  
      font-size: 1.8rem;  
      font-weight: 600;  
      color: #FFFDEB;  
    }  
  
    .input-wrapper {  
      position: relative;  
      width: 100%;  
      max-width: 600px;  
      margin-bottom: 15px;  
    }  
  
    input[type="text"] {  
  width: 100%;  
  padding: 14px 50px 14px 18px; /* right space for the icon */  
  border-radius: 12px;  
  border: none;  
  font-size: 1.14rem;  
  background: linear-gradient(135deg, #2D2D2DB8, #000000AD);
  color: #fff;  
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);  
  outline: none;  
  transition: all 0.3s ease;  
}  
  
    input[type="text"]:focus {  
      box-shadow: 0 0 0 2px rgba(96, 56, 30, 0.61);  
    }  
  
    .add-btn {  
      position: absolute;  
      right: 8px;  
      top: 50%;  
      transform: translateY(-50%);  
      background: #3b82f6;  
      border: none;  
      border-radius: 12px;  
      color: white;  
      padding: 8px 16px;  
      cursor: pointer;  
      font-weight: 600;  
      font-size: 1.4rem;  
      transition: background 0.3s ease;  
      height: 38px;  
    }  
  
    .add-btn:hover {  
      background: #6188FF91;  
    }  
  
    ul.todo-list {  
      width: 100%;  
      max-width: 600px;  
      list-style: none;  
    }  
  
    ul.todo-list li {  
      background: #0000009C;  
       color: #fff;
      margin-bottom: 10px;  
      padding: 12px 16px;  
      border-radius: 12px;  
      display: flex;  
      justify-content: space-between;  
      align-items: center;  
      transition: 0.3s;  
      word-break: break-word;  
      flex-direction: column;  
      align-items: flex-start;  
    }  
  
    ul.todo-list li.completed {  
      text-decoration: line-through;
      opacity: 0.5;
      color: #C3C3C38A;
    }  
  
    .task-content {  
      width: 100%;  
      display: flex;  
      justify-content: space-between;  
      align-items: center;  
    }  
  
    .task-time {  
      font-size: 0.65rem;  
      color: #DBCFAFF0;  
      margin-top: 4px;  
    }  
  
    .delete-btn {  
      background: #ef4444;  
      border: none;  
      border-radius: 8px;  
      color: white;  
      padding: 4px 10px;  
      cursor: pointer;  
      font-size: 1.2rem;  
      margin-left: 12px;  
      transition: background 0.3s ease;  
    }  
  
    .delete-btn:hover {  
      background: #dc2626;  
    }  
  
    @media (max-width: 480px) {  
      .header h2 {  
        font-size: 1.5rem;  
      }  
  
      .add-btn {  
        padding: 8px 18px;  
        font-size: 1.5rem;  
        height: 44px;  
      }  
  
      input[type="text"] {  
        padding: 12px 55px 12px 16px;  
      }  
  
      ul.todo-list li {  
        padding: 10px 12px;  
      }  
    }  
      
    input[type="text"] {  
  padding: 18px 55px 18px 18px;  
}  
  
.delete-btn i {  
  font-size: 1rem;  /* Adjust the size of the icon */  
}