.tasks {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.tasks__item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-gap: 10px;
    border-bottom: 1px solid #ddd;
    align-items: center;
    padding: 10px;
}

.tasks__item--hidden {
    display: none;
}

.tasks__button {
    color: white;
    border: none;
    width: 30px;
    height: 30px;
    padding: 0px;
}

.tasks__button--taskDone {
    background: green;
    transition: 0.8s;
}

.tasks__button--taskDone:hover {
    background: hsl(120, 100%, 30%);
}

.tasks__button--taskDone:active {
    background: hsl(120, 100%, 35%);
}

.tasks__button--remove {
    background: hsl(0, 100%, 40%);
    transition: 0.8s;
}

.tasks__button--remove:hover {
    background: hsl(0, 100%, 50%);
}

.tasks__button--remove:active {
    background: hsl(0, 100%, 70%);
}

.tasks__content {
    word-break: break-word;
}

.tasks__content--done {
    text-decoration: line-through;
}