todo tutorual simple css

todo tutorual simple css

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  font-size:x-large
}
input{
  font-size: x-large;
  min-width: 18px;
  min-height: 18px;
  margin: 4px;
  border:0;
  margin:4px;
}
h1{
  color: tomato;
  font-weight: 100;
}
main{
  background-color: white;
  padding: 16px;
  box-shadow: 0 2px 4px #0003;
}
ul{
  list-style: none;
  padding: 4px;
  margin: 0;
}
li{
  padding: 4px 0;
  border-bottom: 1px solid #f5f5f5;
}
li>button{
  color:red;
  padding: 4px 8px;
  visibility: hidden;
}
li:hover>button, li:focus-within>button{
  visibility: visible;
}

button{
  font-size: large;
  padding: 8px 16px;
  margin: 4px;
  background-color: seagreen;
  color:white;
  border-radius: 4px;
}
li>button{
  background-color: #f5f5f5;
}