body{
  font-family: Arial, Helvetica, sans-serif;
}
#dlt{
  color:white;
  border-radius: 10px;
  background-color:red;
  border: 2px solid black;

}
#add-button{
  color:white;
  border-radius: 10px;
  background-color:green;
  border: 2px solid black;
}
#todo-heading{
  text-align: center;
}

#container{
   justify-content: center;
  display: grid;
  grid-template-columns: 200px 150px 100px;
  column-gap: 10px;
  row-gap: 10px;

  
  
  
}
#todo-result{
  justify-content: center;
  display: grid;
  grid-template-columns: 200px 150px 100px;
  column-gap: 10px;
  row-gap: 10px;
  margin-top: 10px;

}
#todo-input{
  font-size: 15px;
  padding:10px 5px;
}
#todo-date{
  font-size: 15px;
  padding:10px 5px;

}

@media (max-width: 600px) {
  #container, #todo-result {
    grid-template-columns: 1fr;
  }

  #dlt, #add-button {
    width: 100%;
    text-align: center;
  }
}