body{
text-align: center;
font-family: Arial;


}
.todo-container{
  display: grid;
  grid-template-columns: 200px 150px 100px;
  margin-top: 20px;
  gap: 15px;
  justify-content: center;
  
}
.gride-container{
  display: grid;
  grid-template-columns: 200px 150px 100px;
  gap: 15px;
  justify-content: center;
}
#todo-input{
  height: 33px;
  font-size: large;
  background-color: rgb(202, 211, 133);
  color: black;
  

}
#add-todo{
  border-radius: 10px;
  font-size: large;
  color: rgb(10, 14, 13);
  background-color: rgb(35, 244, 16);
  cursor: pointer;
  transition: 0.3s;
}
#todo-date{
  font-size: larger;
  color: rgb(161, 3, 3);
  background-color: rgb(205, 186, 165);
  transition: 0.3s;
}
.delete-todo{
  height: 35px;
  border: none;
  border-radius: 10px;
  background-color: rgb(104, 21, 21);
  color: aliceblue;
  cursor: pointer;
}
#item{
  color: blueviolet;
  text-align: left;
  width:200px;
  background-color: aqua;
  padding-top: 9px;

}