:root{
    /* background-color: blue; */
    --bg-grad-prime: #2c2c75;
} 
#homelink:active,#homelink:focus,
#backlink:active,#backlink:focus,
#tutorialLink:active,#tutorialLink:focus{
     background-color: lightcyan;
}
.project {
    border: 1px solid black;
    display: flex;
    flex-direction: column;
    
}
.project-container {
    font-family: 'Poppins', sans-serif;    
    border: 2px solid blue;
    height: 100%;
    background: linear-gradient(130deg, #153667,#153667,#4e085f);    
    padding: 10px
}
.todo-app{
    border: 2px solid black;
    background-color: white;
    width: 100%;
    max-width: 540px;
    margin: 20px auto 10px;
    padding: 10px 30px 70px ;
    border-radius: 10px;
}
.todo-app h2 {
    display: flex;
    align-items: center;
}
.todo-app h2 img {
    width: 10%;
}
.todo-app .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #dadce0;
    border-radius: 20px;
}
.todo-app .row input{
    /* flex 1?? somehow fills the the whole container */
    flex: 1;
    /*  */
    border: none;
    outline: none;
    background-color: transparent;
    padding: 12px 20px;
    font-weight: 500;

}
.todo-app #addBtn{
    border: none;
    outline: none;
    cursor: pointer;
    background-color: var(--bg-grad-prime);
    color: #fff;
    font-size: 16px;
    margin: 6px 9px;
        padding: 12px 20px;
    border-radius: 20px;
}
#addBtn:active,
#addBtn:focus {
    margin: 6px 9px;
    padding: 12px 20px;
    box-shadow: 0px 0 6px 1px var(--bg-grad-prime);
    background: #ff5945;
}


.task-container > li.checked {
    text-decoration: line-through;
    opacity: .5;
}


.task-container > li > .checkbox,
.task-container > li > .xbox{
    /* display: inline-flex; */
    border: 2px solid blue;
    padding: 5px 6px;
    font-size: 120%;
    /* margin-bottom: 25%; */
    margin: 1%;
}
.task-container>li:active,
.task-container>li:focus{
    box-shadow: 0px 0 6px 1px var(--bg-grad-prime);
}
.task-container {
    display: flex;
    flex-direction: column;

}
.task-container>li {
    list-style: none;
    font-size: 17px;
    padding: 1px;
    border: 1px solid black;
    user-select: none;
    cursor: pointer;
    display: flex;
}
.task-container>li>.xbox {
    margin-left: auto;
    margin-right: 2.5%;
}

.checkbox:focus,.checkbox:active{
    background-color: yellow;
}
.xbox:focus,.xbox:active{
    background-color: tomato;
}