/* (A) TODO GENERAL FORM STYLES */
#todo-wrap input { box-sizing: border-box; }
#todo-wrap input { padding: 5px; }
#todo-wrap input[type=button], #todo-wrap input[type=submit] {
  color: #ffffff;
  cursor: pointer;
}

/* (B) TODO WHOLE CONTAINER */
#todo-wrap {
  max-width: 300px;
  float: right
  background-color: transparent;
  padding: 50px;
}

/* (C) TODO HEADER  */
#todo-wrap h1 {
  font-size: 3.2em;
  font-weight: bold;
  margin: 5;
  color: #ffffff;
}

/* (D) TODO ADD ITEM  */
#todo-add { display: flex; }
#todo-item { width: 85%; }
#todo-save {
  width: 15%;
  background: #333;
  border: 2px solid #333;
  border-radius: 3px;

}

/* (E) TODO DELETE ITEMS */
#todo-del { 
  margin: 15px 0;
}
#todo-del input {
  width: 100%;
  background: #CF585C;
  border: 1px solid #354A36;
  border-radius: 5px;

}

/* (F) TODO LIST ITEMS */
/* (F1) ITEM ROW */
.todo-row { 
  width: 100%;
  display: flex;
  align-items: center;
  margin: 5px 0;
}
/* (F2) TODO ITEM TEXT */
.todo-item { 
  width: 85%;
  padding: 5px;
  margin: 0 5px;
  background: #181818;
  border: 1px solid #333;
  border-radius: 3px;
  cursor: pointer;
}
.todo-item.cx {
  background: #FFE1D7;
  text-decoration: line-through;
}
.todo-item.done {
  background: #181818;
  color: lightgrey;
  text-decoration: line-through;
}
/* (F3) TODO CANCEL AND OK BUTTONS */
.todo-cx, .todo-ok {
  width: 30px;
  height: 30px;
}
.todo-cx {
  background: #CF585C;
  border: 1px solid #354A36;
}
.todo-ok {
  background: #354A36;
  border: 1px solid #005c13;
  border-radius: 3px;
}

/* (G) TODO DOES NOT MATTER */
html, body, input {
  font-family: Agave Nerd Font;
}
html, body {
  padding: 0;
  margin: 0;
}