*{
    position: relative;
    font-family:"Caveat", cursive;
    font-size: x-large;
    border: none;
    margin: 0px;
    padding: 0px;
}
body{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(200, 161, 224, 0.181);
    color:rgba(96, 55, 87, 0.949);
    font-weight: bold;
    font-family:Verdana, Geneva, Tahoma, sans-serif
   
}

form{
    margin:10% auto 10px;
}

input{
    border: 0px;
    padding: 5px;
    border-radius:10px ;
    -webkit-border-radius:10px ;
    -moz-border-radius:10px ;
    -ms-border-radius:10px ;
    -o-border-radius:10px ;
    box-shadow: 1px 1px 15px rgba(67, 28, 64, 0.868);
    color: rgba(4, 4, 4, 0.654);
}

#addBtn{
    background-color: (247, 239, 229);
    box-shadow: 1px 1px 10px rgba(67, 28, 64, 0.868);
    height: 40px;
    width: 40px;
    border-radius:45% ;
    -webkit-border-radius:45% ;
    -moz-border-radius:45% ;
    -ms-border-radius:45% ;
    -o-border-radius:45% ;
}

ul{
    padding: 30px;
    list-style-type:decimal;
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap:10px;
}

li .delete-btn{
    display: inline-block;
    background-color: rgb(62, 20, 50);
    margin-left: 35px;
    color: aliceblue;
    border-radius: 5px;
    padding: 1px 10px;
}

li .check-btn{
    background-color: rgba(200, 161, 224, 0.663);
    margin-left: 10px;
    color: rgb(51, 53, 54);
    border-radius: 5px;
    padding: 1px 10px;
}

i{
    display: inline-block;
    padding-top: -3px;
    font-size: 15px;
    color: rgb(62, 20, 50);
}

.checked{
    text-decoration: line-through black;
}

p{ 
    overflow: hidden;
    margin-bottom: 10px;
}

p::before {  
    color: rgb(62, 20, 50);
    font-weight: bold;
    content: "|";  
    animation-name: text;  
    animation-duration: 4s;  
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;  
    white-space: nowrap; 
}  

@keyframes text {
    0% { content: "D|";}
    5% { content: "Do |";}
    10% { content: "Do M|"; }
    20% { content: "Do Mo|"; }
    30% { content: "Do Mor|"; }
    40% { content: "Do More|"; }
    50% { content: "Do More G|"; }
    60% { content: "Do More Gre|"; }
    70% { content: "Do More Great|"; }
    80% { content: "Do More Great W|"; }
    85% { content: "Do More Great Wo|"; }
    90% { content: "Do More Great Work|"; }
    100% { content: "Do More Great Work...|"; }
}

@media (max-width: 508px) {
    body{
        font-size: normal;
        
    }
}