@font-face {
    font-family: newfont;
    src: url(./Formula1-Regular.otf);
}
body{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: 'Raleway', sans-serif; 
    
    background:rgb(0,0,0);
    color:white;
    display:grid;
    font-weight: light;

    grid:
    "header header header header"/**1st row for header*/ auto/**heightRow*/
    "...... list active  ......" auto / 1fr minmax(100px, 300px) minmax(250px,500px) 1fr;/** 1st col blank list active blank; auto height;  */
    /*  1st col = 1fr minmax()- "whatever left over space" minmax() 1fr. in mainmax, set min size and max size */
}

::selection {
    color: #000;
    background: white;
}

.title{
    grid-area:header;
    text-align:center;
    font-size:calc(5vw + 2rem);
    letter-spacing:2px;
    margin:1rem 0.5rem;
    color:white;
}
.all-tasks{
    grid-area:list;
    
}
.todo-list{
    --spacer:1.5rem;
    grid-area:active;
    background:white;
    color:black;
}
.task-list{
    font-size:1.2rem;
    line-height:1.7;
    list-style: circle;
    padding-left:1.1em;
}
.list-name{
    cursor:pointer;
    transition: opacity 190ms ease-in-out ;
}
.list-name:hover{
    opacity:0.7;
}
.active-list{
    font-weight: 900;
    
}
.new{
    background:transparent;
    border:0;
    color:inherit;
    border-bottom: 1px solid currentColor;
    font-size:inherit;
    outline:none;
    transition: border-bottom 150ms ease-in;
    order:2;
    padding:.25em;
}
.new:focus{
    border-bottom-width: 4px;
}
.new:focus::placeholder{
    opacity: 0.5;
}
::placeholder {
    color: rgba(255, 255, 255, 0.342);
}
.new.task::placeholder {
    color:rgba(0, 0, 0, 0.466);
}
form {
    display :flex;
}
.new .list{
    font-size:1.2em;
}
.btn{
    cursor :pointer;
    background:0;
    border:0;
    padding:0;
    color:inherit;
}
.btn.create{
    font-size:1.5rem;
    font-weight:900;
    margin-right:0.25rem;
    transition:opacity 250ms ease-in;
}
.btn.create:hover{
    opacity:0.7;
}
.todo-header{
    padding:var(--spacer);
    background: #e4e4e4;
    
    display:flex;
    align-items: center;
    justify-content:space-between
}
.list-title{
    margin: 0 1em 0 0;
}
.task-count{
    margin:0;
    font-size:1rem;

}
.todo-body{
    padding:var(--spacer);
    position:relative;
    width:auto;
}
.new-task-creater .create{
    color:blue;
}
[type = "checkbox"]{
    opacity:0;
    position:absolute;
}
.task label{
    display:inline-flex;
    align-items:center;
    position:relative;
    margin-bottom:1.25em;

}
.task{
    font-weight: 800;
    position:relative;
    margin-bottom:1.25em;
}
.task label::before{
    content:"";
    position:absolute;
    right:0;
    left:0;
    bottom:-0.5em;
    height:1px;
    background-color:currentColor;
    opacity:0.1;
    display:flex;
    width:25vw;
}

.custom-checkbox{
    --size:0.75em;
    display:inline-flex;
    width:var(--size);
    height:var(--size);
    border:2px solid currentColor;
    border-radius:50%;
    margin-right:1%;
    margin-right:var(--size);
    transform:scale(1);
    transition:transform 200ms ease-in-out;
}
.task:hover .custom-checkbox, [type="checkbox"]:focus + label .custom-checkbox {
    transform:scale(1.2);
    color:rgb(0, 81, 255);
}
.task:hover .custom-checkbox, [type="checkbox"]:checked + label .custom-checkbox {
    background:blue;
    border-color:blue;
    box-shadow:inset 0 0 0px 2px rgb(255, 255, 255);
}

[type="checkbox"]:checked + label{
    opacity:0.5;
}
.task label::after{
    content:"";
    position:absolute;
    top:50%;
    left:1.5em;
    right:0;
    height:3px;
    background:black;
    opacity:1;
    transform:scaleX(0);
    transition: transform 150ms ease-in-out;
    transform-origin: right;
    padding-right:1rem;
} 

[type="checkbox"]:checked + label::after{
    transform:scaleX(1);
    transform-origin: left;
} 
.new.task{
    margin-bottom:0;

}
.delete-stuff{
    display:flex;
    justify-content: space-evenly;
    margin-top:0.1em;
    position:absolute;
    width:100%;
    left:0;
    bottom:-35px;
    color:white;

}
.btn.delete{
    font-weight: 700;
    letter-spacing:1px;
    opacity:0.7;
    font-size:1rem;
    transition:color 150ms;

}
.btn.delete:hover{
    color:red;
}