*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
body{
    font-family: 'Roboto', sans-serif;
    background-image:linear-gradient(65deg,#d816ffc5, #6191f8c4, #d400ffb9,#f769a4ce);
    background-size: 500%;
    background-attachment: fixed;
    animation: bg-animation 20s infinite alternate;
}
@keyframes bg-animation{
    0%{
        background-position: right;
    }
    100%{
        background-position: left;
        }
}
.fa-plus-circle{
    float:right;
}
h1{
    background-color:  #2980b9;
    font-size: 24px;
    font-weight: normal;
    padding:10px 20px;
    color:white;
    text-transform: uppercase;
}

#container{
    background-color:#f5f5f5;
    width:360px;
    margin: 100px auto;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}

input{
    width:100%;
    color:#666;
    font-size: 18px;
    color:#2980b9;
    background-color:#f5f5f5;
    outline: none;
    border:2px solid #00000000;
    padding:13px 13px 13px 20px;
}
::placeholder{
    opacity: 0.5;
}
input:focus{
    background-color:#fff;
    border:2px solid #297fb9a4;
    outline: none;
}
ul{
    list-style: none;
}

span{
    cursor:pointer;
    margin-right:20px;
    opacity: 0;
    width:0;
    color:white;
    display: inline-block;
    background-color:#ff4a4a;
    height:40px;
    text-align: center;
    transition: 0.2s linear;
}
li:hover span{
    opacity: 1;
    width:40px;
}
li{
    background-color:#f5f5f5;
    height:40px;
    line-height:40px;
    color:#666;
}

li:nth-child(2n){
    background-color:white;
}

.completed{
    color:gray;
    text-decoration: line-through;
}