/*----- Start global styling -----*/
* {
    padding:0;
    margin:0;
    box-sizing:border-box;
    border-radius:0;
}
/*----- End global styling -----*/

/*----- Start styling body -----*/
body {
    background:linear-gradient(120deg ,rgb(255, 227, 70) ,rgba(248, 71, 1, 0.925));
    min-height: 100vh;
    font-family: 'Capriola', sans-serif;
}

/*----- End styling body -----*/

/*----- Start styling header -----*/
header {
    font-size:2.6rem;
    min-height: 20vh;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color:white;
    font-family: 'Fredericka the Great', cursive;
}
/*----- End styling header -----*/

/*----- Start styling form -----*/
form {
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items:center;
    min-height:20vh;
}
form input , form button {
    background-color:white;
    border:none;
    outline: none;
    font-size:1.8rem;
}
form input {
    min-width:23rem;
    height:3.5rem;
    padding:0 0.7rem;
    border-bottom-left-radius:5px;
    border-top-left-radius:5px;
}
form button {
    height:3.5rem;
    width:3.5rem;
    color:rgb(209, 91, 23);
    cursor:pointer;
    transition:color 500ms ease,background 500ms ease;
    border-bottom-right-radius:5px;
    border-top-right-radius:5px;
}
form button:hover {
    background-color: rgb(226, 97, 23);
    color:white;
}
/*----- End styling form -----*/

/*----- Start styling todos lists -----*/
#todo-container {
    display: flex;
    flex-direction:column;
    align-items:center;
}
.todo {
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background:white; 
    min-width: 18rem;
    list-style: none;
    margin:1rem;
    transition:all 900ms ease;
}
.todo-list {
    flex:1;
    font-size:1.5rem; 
    padding:0 0.5rem;
}
.trash-btn , .check-btn {
    height:2.5rem;
    width:2.5rem;
    outline:none;
    border:none;
    color:white;
    transition:background 300ms ease;
    cursor:pointer;
}
.fa-check, .fa-trash {
    pointer-events:none;
}

/*styling the buttons*/

.trash-btn {
    background:rgba(255, 0, 0, 0.76);
}
.check-btn {
    background:rgba(17, 207, 17, 0.747);
}
.trash-btn:hover {
    background:rgba(255, 0, 0, 0.959);
}
.check-btn:hover {
    background:rgb(10, 199, 10);
}

/*if the button clicked on*/

.completed {
    text-decoration:line-through;
    opacity:0.5;
}

.fall {
    transform:translateY(8rem) rotateZ(20deg);
    opacity:0;
}
/*----- End styling todos lists -----*/

/*----- Start styling filter todos -----*/
.select-div {
    margin:1rem;
    position:relative;
    overflow:hidden;
}
select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance:none;
    outline:none;
    border:none;
}
.filter-todo {
    width:10rem;
    color:rgb(167, 74, 20);
    cursor:pointer;
    padding:1rem;
    border-radius:5px;
}
.select-div::after {
    content:"\25BC";
    background-color:rgb(209, 91, 23);
    color:white;
    position:absolute;
    top:0;
    right:0;
    padding:0.87rem;
    pointer-events: none;
    border-bottom-right-radius:5px;
    border-top-right-radius:5px;
    transition:color 400ms ease , background 400ms ease;
}
.select-div:hover::after {
    background:white;
    color:rgb(226, 97, 23);
}

/*----- End styling filter todos -----*/


/*----- Start media queris -----*/

@media (max-width:650px) {
    

header {
    font-size:2rem;
    min-height: 20vh;
}


form {
    max-height:15vh;
}
form input , form button {
    font-size:1.4rem;
}
form input {
    min-width:18rem;
    height:3rem;
    margin: 0 0 0 0.5rem ;
}
form button {
    height:3rem;
    width:3rem;
}


.todo {
    min-width: 14rem;
}
.todo-list {
    font-size:1.2rem; 
    padding:0 0.5rem;
}
.trash-btn , .check-btn {
    height:2.2rem;
    width:2.2rem;
}


.filter-todo {
    width:7rem;
    padding:0.7rem;
}
.select-div::after {
    padding:0.54rem;
}

}



/*----- End media queris -----*/


@media (max-width:490px) {
    header {
        font-size:1.8rem;
        min-height: 20vh;
    }
    
    form {
        max-height:15vh;
    }
    form input , form button {
        font-size:1.4rem;
    }
    form input {
        min-width:10rem;
        height:3rem;
    }
    form button {
        height:3rem;
        width:3rem;
    }
    
    
    .todo {
        min-width: 14rem;
    }
    .todo-list {
        font-size:1.2rem; 
        padding:0 0.5rem;
    }
    .trash-btn , .check-btn {
        height:2.2rem;
        width:2.2rem;
    }
    
    
    .filter-todo {
        width:7rem;
        padding:0.62rem;
    }
    .select-div::after {
        padding:0.45rem;
    }
}