/* [FONT] */
html, body, input {
  font-family: arial, sans-serif;
} 

html, body {
  padding: 0;
  margin: 0;
  animation: colorchange 50s infinite;
  -webkit-animation: colorchange 50s infinite; /* Chrome and Safari */
}
@keyframes colorchange
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    75%  {background: green;}
    100% {background: red;}
}
@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    75%  {background: green;}
    100% {background: red;}
}

/* [FORM] */
#todo-wrap input {
  box-sizing: border-box;
  font-size: 0.9em;
}
#todo-wrap input[type=text] {
  padding: 10px 5px;
}
#todo-wrap input[type=button], #todo-wrap input[type=submit] {
  padding: 10px 5px;
  color: #fff;
  background: #CF585C;
  border: 2px solid #CF585C;
  cursor: pointer;
}

/* [CLEARFIX] */
#todo-wrap .clearfix {
  overflow: auto;
}
#todo-wrap .clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* [WRAPPER] */
#todo-wrap {
  max-width: 500px;  
  padding: 20px;
  margin: 0 auto;
}

/* [HEADER] */
#todo-wrap h1 {
  font-size: 2.0em;
  margin: 0;
  text-align: center;
  color: white;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: black;
}

/* [ADD] */
#todo-form {
  margin: 10px 0;
}
#todo-form input {
  display: block;
  float: left;
}
#todo-form input[type=text] {
  width: 90%;
}
#todo-form input[type=submit] {
  width: 10%;
  background: #5866CF;
  border: 2px solid #5866CF;
}

/* [DELETE] */
#todo-del {
padding: 0px 0px 0px 450px;
}

/* [LIST ITEMS] */
#todo-list .clearfix {
  margin-top: 8px;
}
#todo-list .clearfix div, #todo-list .clearfix input, #todo-list .cleafix li {
  box-sizing: border-box;
  float: left;
  display: block;
}
#todo-list .item {
  border: 1px solid #ddd;
  background: #fff;
  width: 90%;
  padding: 10px;
}
#todo-list .item.done {
  background: #DCFFD7;
  text-decoration: line-through;
}
#todo-list .clearfix input, #todo-list .clearfix li {
  width: 10%;
}
#todo-list input.bdone {
  background: #4AA53D;
  border: 2px solid #4AA53D;
}