:root{
    --dark:#374151;
    --darker: #1f2937;
    --darkest:#111827;
    --gray:#6B7280;
    --light:#eee;
    --pink:#EC4899;
    --purple:#BB5Cf6;

}
@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@500&family=Barlow&family=Bree+Serif&family=Montserrat:ital,wght@0,300;0,500;0,700;1,500&family=Nunito:wght@200&family=Plus+Jakarta+Sans:ital,wght@0,400;0,800;1,200;1,300;1,600&family=Poppins:ital,wght@0,200;0,300;0,400;1,100&family=Ubuntu:wght@300&display=swap');
*{
    box-sizing: border-box;
    margin: 0%;
    font-family: 'Langar', cursive;;
}
body{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--dark);
    color: #fff;
}
header{
    padding: 2rem 1rem;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}
header h1{
    color: var(--gray);
    font-size: 2.5rem;
    font-weight: 300;
    margin-bottom: 1rem;
}
#new_task_form{
    display: flex;
}
input , button{
    appearance: none;
    background:none;
    border: none;
    outline: none;
}
#new-task-input{
    flex: 1 1 0%;
    background-color: var(--darker);
    font-size: 1.25rem;
    border-radius: 1rem;
    padding: 1rem;
    margin-right: 1rem;
    color: var(--light);
}
#new-task-input::placeholder{
    color: var(--gray);
}
#new-task-submit{
    color: var(--pink);
    font-size: 1.25rem;
    font-weight: 700;
    background-image: linear-gradient(to right , var(--pink),var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: .4s;
    cursor: pointer;
}
#new-task-submit:hover{
    opacity: 0.8;

}
#new-task-submit:active{
    opacity: 0.6;
    font-size: 1.27rem;
}

main{
    flex: 1 1 0%;
    padding: 2rem 1rem;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}
.task-list{
    padding: 1rem;
}
.task-list h2{
    color: var(--gray);
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 1rem;
}
#tasks .task{
    display: flex;
    justify-content: space-between;
    background-color: var(--darkest);
    border-radius: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
}

#task .task .content{
    flex: 1 1 0%;
}

#tasks .task .content .text{
    color: var(--light);
    font-size: 1.125rem;
    width: 100%;
    display: block;
    transition: .4s;
}
#tasks .task .content .text:not(:read-only){
    color: var(--pink);
}

#tasks .task .actions{
    display: flex;
    margin: 0 --0.5rem;
}
.task .actions button{
    cursor: pointer;
    margin: 0 0.5rem;
    text-transform: uppercase;
    font-size: 1.1255rem;
    font-weight: 700;
    transition: .4s;

}
.task .actions button:hover{
    opacity: 0.8;

}
.task .actions button:active{
    opacity: 0.6;
}

.task .actions .edit{
    background-image: linear-gradient(to right , var(--pink),var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.task .actions .delete{
    color: crimson;
}

footer p{
    display: flex;
    justify-content: center;
    /* background-image: linear-gradient(to right , var(--pink),var(--purple), crimson, red); */
    /* -webkit-background-clip: text; */
    /* -webkit-text-fill-color: transparent; */

    color: #111827;
    /* font-size: 0.9rem; */
}