body {
  font-family: 'Times New Roman', Times, serif, ;
  background: #f1f3f8;
  margin: 0;
  padding: 30px;
  color: #172033;
}

.dashboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.box {
  background: white;
  padding: 24px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 12px #00000008;
}

.box h2 {
  margin-top: 0;
  font-size: 20px;
}

.box p {
  color: #64748b;
}

/* Stack boxes on small screens */
@media (max-width: 800px) {
  .dashboard {
    grid-template-columns: 1fr;
  }
}

* {
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      background: #f3f4f6;
      color: #1f2937;
      max-width: 700px;
      margin: 40px auto;
      padding: 20px;
    }

    .container {
      background: white;
      padding: 25px;
      border-radius: 16px;
      box-shadow: 0 5px 20px #00000010;
    }

    h1 {
      margin-bottom: 5px;
    }

    .subtitle {
      color: #6b7280;
      margin-bottom: 25px;
    }

    .task-form {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
    }

    input {
      flex: 1;
      min-width: 0;
      padding: 12px;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      font-size: 16px;
    }

    button {
      border: none;
      border-radius: 8px;
      padding: 11px 15px;
      cursor: pointer;
      background: #4f46e5;
      color: white;
    }

    button:hover {
      opacity: 0.85;
    }

    .stats {
      background: #eef2ff;
      padding: 15px;
      border-radius: 10px;
      margin-bottom: 20px;
    }

    .progress-bar {
      height: 10px;
      background: #d1d5db;
      border-radius: 10px;
      overflow: hidden;
      margin-top: 10px;
    }

    #progress {
      width: 0%;
      height: 100%;
      background: #4f46e5;
      transition: width 0.3s;
    }

    ul {
      padding: 0;
      list-style: none;
    }

    li {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 0;
      border-bottom: 1px solid #e5e7eb;
    }

    li span {
      flex: 1;
      overflow-wrap: anywhere;
    }

    li.done span {
      text-decoration: line-through;
      color: #9ca3af;
    }

    .delete {
      background: #ef4444;
    }

    .empty {
      color: #9ca3af;
      text-align: center;
      padding: 20px;
    }
.parent-container {
  display: flex;
  justify-content: space-between; /* Pushes child elements to the outer edges */
}