:root{--accent-color: #4fa3a5}*,*:after,*:before{padding:0;margin:0;font-family:inherit;box-sizing:border-box}html,body{font-family:Quicksand,sans-serif;background:linear-gradient(135deg,#0d0d0d,#1f1f1f);background-color:#0d0d0d;color:#fff;display:block;align-items:center;justify-content:center;width:100vw;height:100vh;overflow-x:hidden;padding-top:24px}button{cursor:pointer}.visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden;white-space:nowrap}.text_large{font-size:32px}.text_small{font-size:24px}.wrapper{display:flex;flex-direction:column;align-items:center;padding:24px;margin:0 auto;max-width:600px;width:100%}@media (max-width: 510px){.wrapper{width:100%}header{justify-content:center}}header{display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:42px}.todohero_section{border:1px solid var(--accent-color);display:flex;align-items:center;justify-content:space-around;align-self:center;width:90%;max-width:455px;padding:12px;border-radius:11px}.todohero_section div:last-child{background-color:#88ab33;width:150px;height:150px;border-radius:75px;font-size:48px;display:flex;align-items:center;justify-content:center;text-align:center}.form{align-self:center;width:97%;max-width:455px;display:flex;align-items:center;gap:12px;margin-top:38px}.form label{width:90%}.form input{background-color:#1f2937;color:#fff;width:100%;height:50px;outline:none;border:none;border-radius:11px;padding:12px}.form button{width:10%;height:50px;border-radius:11px;background-color:#88ab33;border:none}.todo_list{align-self:center;width:97%;max-width:455px;display:flex;flex-direction:column;align-items:center;margin-top:27px;margin-bottom:27px;gap:27px}.todo_item,.edit-form input{display:flex;justify-content:space-between;align-items:center;height:70px;width:100%;max-width:455px;border:1px solid var(--accent-color);font-size:16px;background-color:#0d0d0d;color:#fff;padding:12px}.edit-form input{outline:transparent;width:calc(100% - 14px);height:calc(100% - 12px);border:transparent}.todo_items_left,.todo_items_right{display:flex;align-items:center}.todo_items_left{background-color:transparent;border:none;color:#fff;gap:12px;font-size:16px}.todo_items_right{gap:4px}.todo_items_right button{background-color:transparent;color:#fff;border:none}.todohero_section div:last-child,.form button{background-color:var(--accent-color)}.todo_items_right button svg{fill:var(--accent-color)}.form button:hover{background-color:#c2b39a}.todo_items_right button:hover svg{fill:#c2b39a}