* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;

    .roboto-thin {
        font-family: "Roboto", sans-serif;
        font-weight: 100;
        font-style: normal;
    }

    .roboto-light {
        font-family: "Roboto", sans-serif;
        font-weight: 300;
        font-style: normal;
    }

    .roboto-regular {
        font-family: "Roboto", sans-serif;
        font-weight: 400;
        font-style: normal;
    }

    .roboto-medium {
        font-family: "Roboto", sans-serif;
        font-weight: 500;
        font-style: normal;
    }

    .roboto-bold {
        font-family: "Roboto", sans-serif;
        font-weight: 700;
        font-style: normal;
    }

    .roboto-black {
        font-family: "Roboto", sans-serif;
        font-weight: 900;
        font-style: normal;
    }

    .roboto-thin-italic {
        font-family: "Roboto", sans-serif;
        font-weight: 100;
        font-style: italic;
    }

    .roboto-light-italic {
        font-family: "Roboto", sans-serif;
        font-weight: 300;
        font-style: italic;
    }

    .roboto-regular-italic {
        font-family: "Roboto", sans-serif;
        font-weight: 400;
        font-style: italic;
    }

    .roboto-medium-italic {
        font-family: "Roboto", sans-serif;
        font-weight: 500;
        font-style: italic;
    }

    .roboto-bold-italic {
        font-family: "Roboto", sans-serif;
        font-weight: 700;
        font-style: italic;
    }

    .roboto-black-italic {
        font-family: "Roboto", sans-serif;
        font-weight: 900;
        font-style: italic;
    }

}

body {
    background: url("./img-todo-list/background.png");
}


.container {

    background-color: #d1d1d1;
    width: 500px;
    border-radius: 10px;
    padding: 20px;
    margin: 100px auto 0;

}

.input-task{

    border: none;
    border-radius: 5px;
    width: 300px;
    height: 40px;
    padding-left: 10px;

}

.button-add-task {
border:none;
border-radius: 5px;
height: 40px;
background-color: #003329;
color: #ffffff;
font-size: 17px;
padding: 0 15px;
float: right;
cursor: pointer;
font-weight: 700;
}

.button-add-task:hover{

    opacity: 0.8;

}

.button-add-task:active{

    opacity: 0.6;

}

.list-tasks {

    width:100%;
    list-style: none;
    margin-top: 30px;

}


.task{

    background-color: #f2f2f2;
    box-shadow: 1px 4px 10px rgba(0,0,0,0.2);
    height: 50px;
    display: flex;
    align-items:center;
    justify-content: space-between;
    padding: 0 15px;
    border-radius: 5px;   
    margin-bottom: 20px;
    cursor: pointer;

}




img {
    height: 25px;
    opacity: 0;
    transition:opacity 0.5s ease-in-out;
}


.task:hover img {
opacity: 1;

}

.done {

    background-color: #8fac55;
    text-decoration: line-through;

}