/*
    fonts
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');

/*
    global variables
*/
:root{
    /* colors  */
    --clr-primary: rgba(0,213,255,1) ;
    --clr-primary-btn: #0e0e0e ;
    --clr-compelete-btn: #28a745;
    --clr-delete-btn: #f44336  ;
    --clr-btn-text:#fff;
    --clr-bg-1:#fc466b;
    --clr-bg-2:#3f5efb;
    --clr-app-bg:#fff;
    --clr-item-bg:#e7eefc;
    --clr-item-hover-bg:#dbe7ff;

    /* typography */

    /* font sizes  */
    --fs-body:16px;
    --fs-regular:1.2rem;
    --fs-large:2rem;
}
/*
    base
*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'poppins';
    font-size: var(--fs-body);
    background-color: var(--clr-primary);
}
.btn{
    padding: .5rem .75rem;
    border: none;
    border-radius: .5rem;
    cursor: pointer;
    color: var(--clr-btn-text);
    font-weight: 500;
    font-size: var(--fs-regular);
}

/* app  */
.todo-app{
    min-width: 600px;
    margin: 40px;
    padding: .5rem;
    background-color: var(--clr-app-bg);
    border-radius: 1rem;
}
.todo-app h1{
    text-align: center;
}
.input-group{
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 1rem;
}
input[type='text']{
    padding: .5rem .75rem;
    border-radius: .5rem;
}

.add-task-btn{
    background-color: var(--clr-primary-btn);
}

#taskList{
    margin-top: 1rem;
    width: 100%;
    display: flex;
    flex-direction: column;
}
li{
    list-style-type: none;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    max-width: 560px;
    margin: .25rem auto;
    padding-inline: .25rem;
    position: relative;
    background-color: var(--clr-item-bg);
    border-radius: .5rem;
}
li:hover{
    background-color: var(--clr-item-hover-bg);
}
li * {
    margin: .5rem;
}

.compelete-btn{
    color: var(--clr-compelete-btn);
    cursor: pointer;
    font-size: var(--fs-regular);
}
.delete-btn{
    color: var(--clr-delete-btn);
    font-size: var(--fs-regular);
    cursor: pointer;
}

.completed{
    text-decoration: line-through;
    color: #007bff;
}
.completed .delete-btn{
    pointer-events: none;
}

.attribute{
    position: absolute;
    bottom: 10px;
}

@media (max-width:768px) {
    .todo-app{
        min-width: 320px;
        max-width: 350px;
    }
    .input-group{
        padding-top: 10px;
        flex-direction: column;
        row-gap: 20px;
    }
}