body {
  font-family: "Arial", sans-serif;
  background: linear-gradient(145deg, #3d3d3d, #2e2e2e);
  margin: 0;
  padding: 0;
  text-align: center;
}

h1 {
  color: #004080;
  margin-bottom: 30px;
  font-size: 50px;
  font-weight: bolder;
  background-color: greenyellow;
}

.input-area {
  margin-bottom: 30px;
}

input {
  width: 300px;
  padding: 12px;
  margin: 10px 5px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
  outline: none;
}

input:focus {
  border-color: #0077cc;
}

/* Add Task Button */
#addBtn {
  background-color: #28a745;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}

#addBtn:hover {
  background-color: black;
}

/* Task List Container */
#body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 30px;
  align-items: center;
}

/* Each Task Card */
#body > div {
  background-color: white;
  width: 400px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  text-align: left;
}

/* Task Name */
#body h2 {
  margin: 0;
  color: #333;
}

/* Task Description (list) */
#body ul {
  margin: 10px 0;
  padding-left: 20px;
}

#body li {
  font-size: 16px;
  margin-bottom: 6px;
}

/* Action Buttons */
#body button {
  margin-top: 10px;
  margin-right: 10px;
  padding: 8px 15px;
  font-size: 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* Delete Button */
#body button:nth-child(3) {
  background-color: #dc3545;
  color: white;
}

#body button:nth-child(3):hover {
  background-color: #c82333;
}

/* Update Button */
#body button:nth-child(4) {
  background-color: #007bff;
  color: white;
}

#body button:nth-child(4):hover {
  background-color: #0069d9;
}

/* Media Query for smaller screens */
@media (max-width: 768px) {
  h1 {
    font-size: 40px; /* Adjust heading size */
  }

  .input-area {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  input {
    width: 80%; /* Make inputs take more width on smaller screens */
  }

  #addBtn {
    width: 80%; /* Make the button take more width on smaller screens */
  }

  #body > div {
    width: 90%; /* Adjust task card width */
  }

  /* Buttons within task cards */
  #body button {
    width: 100%; /* Make buttons take up full width in task cards */
    margin: 5px 0; /* Adjust button spacing */
  }

  /* Adjust task list container alignment */
  #body {
    align-items: flex-start;
  }
}

/* Media Query for even smaller screens (mobile devices) */
@media (max-width: 480px) {
  h1 {
    font-size: 30px; /* Further adjust heading size */
  }

  .input-area input {
    width: 80%; /* Make inputs nearly full width on very small screens */
  }

  #addBtn {
    width: 90%; /* Make the add button nearly full width on small screens */
  }

  #body > div {
    width: 95%; /* Make task cards full width on very small screens */
  }
}