body,html{margin:0;padding:0;background:#f5f5f5}html{font:14px Helvetica Neue,Helvetica,Arial,sans-serif;font-size:30px;font-weight:300}.todo{display:flex;flex-direction:column;align-items:center;width:90vw;min-height:80vh;margin:3vh 3vw;padding:50px 0}.todo__btn-wrapper{display:flex;gap:4vw}.todo__taskbar{display:flex;flex-direction:column;gap:40px;align-items:center;width:40vw;border-radius:15px;box-shadow:0 2px 4px 0 rgba(0,0,0,.2),0 25px 50px 0 rgba(0,0,0,.1)}.todo__input{width:100%;height:65px;padding:0 20px;font-size:calc(14px + .69444vw);border-radius:15px;border:none}.todo__description{display:none}.todo__btn{width:120px;height:60px;background:#224636;color:#fff;border-radius:50px;transition:all .3s ease-in-out;font-size:22px}.todo__btn:hover{cursor:pointer;background:#6baf92}.todo__list{display:flex;flex-direction:column;gap:4vh;width:40vw;padding:20px}@media screen and (max-width:760px){.todo__list,.todo__taskbar{width:70vw}}.item[data-v-6c871267]{position:relative;display:flex;flex-direction:column;align-items:center;background:#fff;border-radius:10px;box-shadow:0 2px 4px 0 rgba(0,0,0,.2),0 25px 50px 0 rgba(0,0,0,.1)}.item[data-v-6c871267]:before{content:"";position:absolute;right:0;bottom:0;left:0;height:50px;overflow:hidden;box-shadow:0 1px 1px rgba(0,0,0,.2),0 8px 0 -3px #f6f6f6,0 9px 1px -3px rgba(0,0,0,.2),0 16px 0 -6px #f6f6f6,0 17px 2px -6px rgba(0,0,0,.2)}.title[data-v-6c871267]{width:90%;word-wrap:break-word;font-size:calc(14px + .69444vw);text-align:center}.delete-btn[data-v-6c871267]{position:absolute;z-index:5;right:10px;top:calc(50% - 20px);visibility:hidden;width:40px;height:40px;font-size:30px;color:#dc143c;background:#fff;border:hidden;opacity:.3}.item:hover .delete-btn[data-v-6c871267]{visibility:visible}.delete-btn[data-v-6c871267]:hover{opacity:1}.delete-btn[data-v-6c871267]:after,.delete-btn[data-v-6c871267]:before{position:absolute;top:0;left:15px;content:" ";height:33px;width:2px;background-color:#333}.delete-btn[data-v-6c871267]:after:hover,.delete-btn[data-v-6c871267]:before:hover{background:#af5b5e}.delete-btn[data-v-6c871267]:before{transform:rotate(45deg)}.delete-btn[data-v-6c871267]:after{transform:rotate(-45deg)}