/*@import url('https://fonts.googleapis.com/css?family=Roboto:300');*/
    
    body {
        margin: 0;
        padding: 0;
        background: linear-gradient(to right, #37db6e52, #ffe60457);
    }
    
    .container {
        padding: 10px;
        margin: 0 auto;
        width: 380px;
    }
    
    .header {
        width: 380px;
        height: 180px;
        background: linear-gradient(to left, rgba(151, 209, 150, 0.787), rgba(209, 207, 106, 0.623));
        background-size: 100% 200%;
        background-repeat: no-repeat;
        border-radius: 15px 15px 0 0;
        position: relative;
    }
    
    .clear {
        width: 30px;
        height: 30px;
        position: absolute;
        right: 20px;
        top: 20px;
    }
    
    .clear i {
        font-size: 30px;
        color: #fff;
    }
    
    .clear i:hover {
        cursor: pointer;
        text-shadow: 1px 3px 5px #000;
        transform: rotate(45deg);
    }
    
    #date {
        position: absolute;
        bottom: 10px;
        left: 10px;
        color: #FFF;
        font-size: 25px;
        font-family: 'Titillium Web', sans-serif;
    }
    /* ------------ content ------------ */
    
    .content {
        width: 380px;
        height: 430px;
        max-height: 430px;
        background-color: #FFF;
        overflow: auto;
        border-radius: 0 0 15px 15px;
    }
    
    .content::-webkit-scrollbar {
        display: none;
    }
    
    .content ul {
        padding: 2px;
        margin: 2px;
    }
    
    .item {
        width: 380px;
        height: 35px;
        min-height: 35px;
        position: relative;
        list-style: none;
        padding: 2px;
        margin: 2px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    
    .item i.complete {
        position: absolute;
        font-size: 25px;
        padding-left: 5px;
        left: 15px;
        top: 8px;
    }
    
    .item i.complete:hover {
        cursor: pointer;
    }
    
    .fa-check-circle {
        color: #6eb200;
    }
    
    .item p.text {
        position: absolute;
        padding: 0;
        margin: 0;
        font-size: 20px;
        left: 50px;
        top: 8px;
        background-color: rgb(255, 255, 255);
        max-width: 285px;
    }
    
    .item i.delete {
        position: absolute;
        font-size: 25px;
        right: 20px;
        top: 8px;
    }
    
    .item i.delete:hover {
        color: #af0000;
        cursor: pointer;
    }
    /* ------------ add item ------------ */
    
    .add-item {
        position: absolute;
        top: 560px;
        width: 360px;
        height: 40px;
        background-color: #FFF;
        padding: 10px;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 5px;
    }
    
    .add-item i {
        position: absolute;
        font-size: 40px;
        color: #4162f6;
    }
    
    .add-item i:hover {
        cursor: pointer;
        color: #4162f6ad;
    }
    
    .add-item input {
        position: absolute;
        left: 50px;
        height: 35px;
        width: 310px;
        background-color: transparent;
        border: none;
        font-size: 20px;
        padding-left: 10px;
    }
    
    .fa-check-circle {
        color: #6eb200;
    }
    
    .lineThrough {
        text-decoration: line-through;
        color: #ccc;
    }
    
    .add-item input::-webkit-input-placeholder {
        /* Chrome/Opera/Safari */
        color: #4162f6;
        font-family: 'Titillium Web', sans-serif;
        font-size: 20px;
    }