* {
box-sizing: border-box;
}
html, body {
background-color: #eee;
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.center {
align-self: center;
}
.flow-right {
display: flex;
justify-content: space-around;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 10px;
display: flex;
flex-direction: column;
background-color: white;
height: 100vh;
}
.title, .controls, .button {
flex: none;
}
.button {
padding: 10px 20px;
}
.todo-list {
flex: 1 1 0;
margin-top: 20px;
padding: 20px;
overflow-y: auto;
}
.todo-delete {
margin: 10px;
}
.todo-checkbox {
margin: 10px;
}
.todo-container {
padding: 20px;
border-bottom: 1px solid #333;
}
.todo-container:first-of-type {
border-top: 1px solid #333;
}