.todo-grid,
.todo-input-grid {
  display: grid;
  grid-template-columns: 250px 200px 100px;
  column-gap: 10px;
  row-gap: 10px;
  margin-top: 10px;
}

.todo-input-grid{
  align-items: stretch;
}

.name-input,
.duedate-input{
  font-size: 15px;
  padding: 6px;
}

.add-button{
  background-color: green;
  border: none;
  color: white;
}

.delete-button{
  background-color: rgb(184, 29, 29);
  border: none;
  color: white;
  padding: 6px;
}

h1{
  text-align: center;
}

body {
  display: flex; 
  justify-content: center;
  align-items: center; 
  height: 100vh; 
  margin: 0; 
  background-color: #e09f9f; 
  background-image: url('images.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.full-container {
  background: #d6a3e5;
  border: 3px solid #151313; 
  border-radius: 10px; /* Optional: Rounded corners */
  padding: 20px; /* Adds spacing inside the container */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Shadow for a modern look */
  width: 50%; /* Sets a width for the container */
  max-width: 600px; /* Ensures it doesn't stretch too wide */
  text-align: center; /* Centers the text inside */
}

@media (max-width: 768px) {
  .todo-input-grid {
    grid-template-columns: 1fr; /* Stack inputs and button vertically */
  }

  .todo-grid {
    grid-template-columns: 1fr; /* Single-column layout for todo items */
  }

  .add-button {
    width: 100%; /* Full-width button for smaller screens */
  }
}