body{font-family:font-family: 'Roboto', sans-serif;background: #12c2e9;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #f64f59, #c471ed, #12c2e9);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #f64f59, #c471ed, #12c2e9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#container{width:360px;margin: 100px auto; background:#f7f7f7;box-shadow:0 0 3px rgba(0, 0, 0 0.1); }
#container h1 {background:#2980b9;margin:0;padding:10px 20px;font-size:24px;font-weight: normal;text-transform: uppercase;}
h1 .fa-plus{float:right;}
ul{margin:0;padding:0;list-style: none;}
li{background:#fff;height:40px;line-height: 40px;color:#666;}
li:nth-child(2n){background:#f7f7f7;}
input{width:100%;font-size:18px;background-color:#f7f7f7;padding:13px 13px 13px 20px;box-sizing: border-box;color:#2980b9;border:3px solid rgba(0,0,0,0);}
input:focus{background-color:#fff;outline:none;border:3px solid #2980b9;}
ul span{background-color:red;margin-right:20px;height:40px;text-align: center;color:#fff;width:0;display: inline-block;transition:0.2s linear;opacity:0;}
li:hover span{width:40px;opacity:1.0;}
.finish{text-decoration: line-through;}

@media only screen and (max-width: 600px) {

  #container{
    width:unset;
    margin:unset;
    margin-top: 20%
  }
  li{
    height:50px;
    font-size: 25px
  }
  input{
    font-size: 25px
  }
}