@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    font-family: 'Roboto Mono', monospace;
}
:root{
    --main: #BC8F8F;
}
body{
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--main);
}

  .container{
    height: 600px;
    width: 500px;
    background: #FAF0E6;
    padding: 1.5em;
    border-radius: 12px;
    box-shadow: 0 25px 35px rgba(250, 240, 230, 1);
    box-sizing: border-box;
}

.heading{
    text-align: center;
    color: var(--main);
    font-size: 2.2em;
    font-weight: 800;
    margin: .6em;
    word-spacing: 10px;
}
.textarea{
    display: flex;
    gap: 1em;
}
.textbox{
    width: 100%;
    height: 60px;
    border: 2px solid var(--main);
    background: #FFF0F5;
    border-radius: 8px;
    padding: 0 1em;
    color: #000;
    font-size: 1.2em;
    font-weight: 500;
}
.textbox::placeholder{
    color: #000;
    font-size: 1.1em;
    font-weight: 400;
}
.addbtn{
    width: 60px;
    height: 60px;
    border: none;
    background: var(--main);
    color: #FFF0F5;
    font-size: 2em;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: .3s;
    opacity: 0.5;
}
.addbtn.active{
    cursor: pointer;
    opacity: 1;
}
.listbox{
    display: block;
    margin-top: 1em;
    height: calc(400px - 1.5em);
    width: 100%;
    overflow-y: auto;

}

.listbox li{
    background: #d8b3bf;
    color: antiquewhite;
    list-style: none;
    font-size: 1.2em;
    width: calc(100% - 2em);
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.7em auto;
    border-radius: 8px; 
    overflow: hidden;
    padding: 0 1em;
}
.listbox li span{
    font-size: 0.8em;
    font-weight: 400;
}
.listbox li span label{
    display: flex;
    align-items: center;
    gap: 1em;
    cursor: pointer;
}
.listbox li span label input{
    appearance: none;
}
.done{
    display: flex;
    height: 30px;
    width: 30px;
    scale: 0.8;
    background: transparent;
    border:2 px solid #e7d5db;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}
.done .uil-check{
    margin: auto;
    display: none;    
}
#checked:checked ~ .done .uil-check{
    display: block;
    background-color: var(--main);
    scale: 2.2;
}
#checked:checked ~ p{
    text-decoration: line-through;
    opacity: 0.4;
}
.uil-trash-alt{
   color: #803c52;
   display: block;
   height: 55px; 
   width: 55px;
   text-align: center;
   line-height: 55px;
   font-size: 1.3em;
    cursor: pointer;
}
.uil-trash-alt:hover{
    animation: shakeEffect 0.5s ease-in-forwards;  
    transform-origin: bottom; 
}
@keyframes shakeEffect {
     0%,40%,80%{
        rotate: 10deg;
        scale: 1.1;
    }
    20%,60%,100%{
        rotate: -10deg;
        scale: 1.1;
        text-shadow: 0 0 10px,
                     0 0 30px,
                     0 0 50px;     
    }                      
    100%{
        rotate: 0deg;
        scale: 1;
    }
}

.completed .done .uil-check {
    display: block;
    color: #FAF0E6;
    scale: 1.6;
}

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