@import"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap";body{background-color:#212121}#todo .logo{text-align:center}#todo .logo img{display:inline-block;max-width:70px}#todo .contain{max-width:528px;display:grid;margin:auto;gap:1rem;padding:1.5rem 1rem;border-radius:16px}#todo form.todoForm{display:flex;gap:1rem;align-items:center}#todo form.todoForm input{background-color:#303030;color:#fff;width:100%;border:0;outline:none;font-size:16px;padding:1.2rem;font-weight:600;border-radius:.6rem;border:3px solid #212121;transition:box-shadow .2s ease}#todo form.todoForm input:focus{box-shadow:0 0 0 2px #303030}#todo form.todoForm input.error{box-shadow:0 0 0 2px #ff3e3e}#todo form.todoForm button{background-color:var(--main-color);padding:0;display:flex;width:56px;height:56px;outline:none;border:0;color:#000;min-width:56px;font-weight:600;align-items:center;justify-content:center;border:3px solid #212121;transition:box-shadow .2s ease}#todo form.todoForm button svg{width:26px;height:auto}#todo form.todoForm button:hover,#todo form.todoForm button:focus,#todo form.todoForm button:active{box-shadow:0 0 0 2px #799236}#todo .alert{background-color:#333;text-align:center;padding:1rem;font-weight:500;border-radius:.6rem;border:3px solid #212121}#todo .alert.error{background-color:#df484826;color:#ff3e3e}#todo .todoList{display:grid;gap:1rem}#todo .todoList .empty{background-color:#303030;text-align:center;font-size:16px;padding:1rem;color:#898989;font-weight:600;border-radius:.6rem;border:3px solid #212121}#todo .todoList .item{background-color:#303030;position:relative;display:flex;padding:1rem;gap:.8rem;border-radius:.6rem;align-items:center;border:3px solid #212121;transition:box-shadow .2s ease}#todo .todoList .item:hover{box-shadow:0 0 0 2px #303030}#todo .todoList .item .check label{cursor:pointer}#todo .todoList .item .check input{display:none}#todo .todoList .item .check .checkbox{background-color:#575757;position:relative;width:20px;height:20px;border-radius:6px}#todo .todoList .item .check .checkbox:before,#todo .todoList .item .check .checkbox:after{background-color:#000;position:absolute;content:"";height:2px;opacity:0;transition:opacity .2s ease}#todo .todoList .item .check .checkbox:before{width:6px;transform:translate(4px,10px) rotate(45deg)}#todo .todoList .item .check .checkbox:after{width:8px;transform:translate(8px,9px) rotate(-45deg)}#todo .todoList .item .check input:checked+.checkbox{background-color:var(--main-color)}#todo .todoList .item .check input:checked+.checkbox:before,#todo .todoList .item .check input:checked+.checkbox:after{opacity:1}#todo .todoList .item .name{font-size:16px;font-weight:600}#todo .todoList .item .actions{position:absolute;display:flex;gap:1rem;right:.5rem;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s ease}#todo .todoList .item:hover .actions{opacity:1;visibility:visible}#todo .todoList .item .actions button{background-color:#212121;outline:none;display:flex;width:40px;height:40px;border:0;padding:0;align-items:center;justify-content:center;border:3px solid #303030;transition:background .2s ease,box-shadow .2s ease}#todo .todoList .item .actions button:hover{background-color:#ed143d;box-shadow:0 0 0 3px #ed143d}:root{--main-color: #c7ff27;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}a{font-weight:500;text-decoration:inherit}body{margin:0}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}