*{
    padding: 0;
    font-family: aquire;
    
}

@font-face {
    font-family: aquire ;
    src: url(./Aquire-BW0ox.otf);
    src: url(./AquireBold-8Ma60.otf);
    src: url(./AquireLight-YzE0o.otf);
}
h1{
    font-size: xx-large;
}


body{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(36, 35, 35);
    color: white;
    
}
#maindiv{
    
    width: 100%;
    height: 100%;
    background-color: rgb(100, 92, 92);
    max-width: 600px;
    /* position: relative; */
    align-items: center;
    justify-content: center;
    padding: 20px;
}
header{
    
    align-items: center;
    justify-content: center;
    /* flex: 1 1 0%; */
    
}

#inp{
    font-family: Arial, Helvetica, sans-serif;
    font-size: larger;
    width: 75%;
    border: 1rem;
    margin: 0.5rem;
    padding: 0.9rem;
    border-radius: 50px;
    /* background:linear-gradient(#14ffe9, #ffeb3b, #ff00e0) ; */
}
#inp-button{
    padding: 0.9rem;
    border-radius: 50px;

}
#inp-button:hover{
    color: #ff00e0;
}

#main{
    display: flex;
    flex-direction: row;
    background-color: aqua;
    justify-content: space-between;
    margin-bottom: 15px;
    border-radius: 15px;
    color: black;
}

.delAll-btn{
    background-color: rgb(250, 47, 47);
    border-radius: 50px;
    padding: 0.8rem;
    color: white;
}

.tasks{
    width: 400px;
    padding: 0.6rem;
    margin: 0.5rem;
    border-radius:50px ;
    border: none;
    background: none;
    font-family: Arial, Helvetica, sans-serif;
}
.div2{
    display: flex;
    justify-content: center;
    align-items: center;
}

.edit, .delete{
    margin-top: 0.5rem;
    margin-right: 0.6rem;
    padding: 0.4rem;
    border-radius: 20px;
    width: 70px;
    font-size:0.9rem ;
    font-weight: bold;
}

.edit:hover, .delete:hover{
    background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0) ;
    animation: rotate 1.5s linear infinite;
}
@keyframes rotate{
    0%{
        filter: hue-rotate(0deg);
    }
    100%{
        filter: hue-rotate(360deg);
    }
}