:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;color-scheme:light dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;background-color:#f0f0f0}h1{font-size:2.5em;color:#00a7c1;line-height:1.1;margin:0}.logo{padding:0 1em 0 0}.app{margin:0;padding:1rem;width:100%}.content{padding:1rem;border-radius:12px;box-shadow:0 0 10px #0000001a;background:#fff}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#00b8d3;color:#fff;cursor:pointer;transition:border-color .25s}button:hover{color:#000;background-color:#a1eaf5}button:focus{outline:2px solid #2b2b2b;outline-offset:2px;border-radius:8px}.delete-todo:hover{background-color:#fc7e7e;color:#fff}input:focus,input:focus-visible,select:focus,select:focus-visible{outline:2px solid #2b2b2b;outline-offset:2px;border-radius:8px!important}form{display:flex;gap:1rem;flex-wrap:wrap}input,select,button{padding:.5rem;font-size:1rem}select{max-width:120px}#todoForm{display:flex;justify-content:space-between;gap:.7rem;flex-direction:column;align-items:flex-end}.header-container{display:flex;align-items:center;margin:0 0 3rem}.submit-button{flex:none;white-space:nowrap;margin-left:auto;height:2.4rem}input[type=checkbox]{transform:scale(1.7);margin-right:10px}.toggle-completed{margin-top:5px;border-radius:8px;accent-color:#a1eaf5}.delete-todo{font-weight:700;border-radius:8px;background:#ffdbdb;line-height:.7;color:#000;margin:.5rem 0;justify-content:space-between;padding:8px}.todo-item{gap:8px;padding:6px 0;max-width:100%;justify-content:start;display:flex;align-items:center}.task-div{flex:1;width:100%}.task-div input{width:100%}.task-text{flex-shrink:1;max-width:72%;min-width:0;white-space:normal;overflow-wrap:break-word}.priority{flex-shrink:0;color:#555}.dots{flex-grow:1;border-bottom:1px dotted #ccc;height:.7em;overflow:hidden}.message-container{min-height:2.3rem;margin-bottom:1rem}.message:empty{visibility:hidden}.message{visibility:visible;color:#111;font-weight:700;padding:.2rem .7rem;border-radius:8px;transition:background-color .3s ease;margin:0}.error{background-color:#ffdbdb66;margin-top:.7rem}.success{background-color:#2e8b571a}footer{padding:0 2rem;color:#6a6a6a}.site-footer{padding:2rem;border-top:1px solid #ddd;font-size:.95rem;display:flex;flex-direction:column;gap:2rem}.footer-row{display:flex;flex-direction:column;gap:1rem}.footer-column{width:100%;flex:1 1 50%}.footer-row .column2,.footer-row .column3{flex:3}.footer-row .column1,.footer-row .column4{flex:1}.footer-column h2{margin-top:0}.footer-column a{color:#007acc;text-decoration:none}.footer-column a:hover{text-decoration:underline}picture img{border-radius:8px}.github{margin-top:.5rem;border-radius:8px}.github:hover{border-radius:8px}.github:focus{outline:2px solid #2b2b2b;outline-offset:2px;border-radius:8px}footer svg{border-radius:8px}.icons-container{display:flex}.icon-wrapper{margin-right:1rem}.icon-wrapper{display:block;width:32px;height:32px}a.icon-wrapper{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;text-decoration:none;line-height:0;outline-offset:1px}.mail{width:100%;height:auto;transition:fill .3s ease}.mailbkg{fill:#fff;transition:fill .3s ease}.icon-wrapper:hover .mailbkg{fill:#00a7c1;transition:fill .3s ease}.stroke-line{fill:none;stroke:#00a7c1;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.5px;transition:stroke .3s ease}.icon-wrapper:hover .stroke-line{stroke:#fff}.github-icon{width:32px;height:32px;transition:all .3s ease;border-radius:8px;cursor:pointer}.gh-bkg{fill:#fff;transition:fill .3s ease}.gh-logo{fill:#00a7c1;transition:fill .3s ease}.github-icon:hover .gh-bkg{fill:#00a7c1}.github-icon:hover .gh-logo{fill:#fff}footer a.icon-wrapper:focus,a.svg-wrapper{outline:2px solid #2b2b2b;outline-offset:2px;border-radius:8px}figure{margin:0}@media (min-width: 320px) and (max-width: 600px){.app{min-width:320px;padding-top:1rem;width:100%}.content{padding:1rem}#todoForm{flex-direction:column;padding-top:.7rem}#todoForm input,#todoForm select,#todoForm .submit-button{margin:.5rem 0}.footer-column img{width:100px;height:100px}footer{padding:0 1rem;color:#6a6a6a}.site-footer{padding:1rem;gap:1rem}.footer-row{display:flex;flex-direction:column;gap:1rem}}@media (min-width: 600px) and (max-width: 900px){.app{max-width:560px;padding-top:2rem}.content{padding:2rem}#todoForm{flex-direction:row;padding-top:.7rem}#todoForm input,#todoForm select,#todoForm .submit-button{margin:.5rem 0}.footer-column img{width:100px;height:100px}footer{padding:0 2rem;color:#6a6a6a}.site-footer{padding:2rem;gap:2rem}.footer-row{display:flex;flex-direction:row;gap:2rem}}@media (min-width: 900px) and (max-width: 1024px){.app{max-width:900px;padding:3rem 3rem 0}.content{padding:3rem}#todoForm{flex-direction:row;padding-top:.7rem}#todoForm input,#todoForm select,#todoForm .submit-button{margin:.5rem 0}.footer-column img{width:100px;height:100px}footer{padding:0 3rem;color:#6a6a6a}.site-footer{padding:3rem;gap:3rem}.footer-row{display:flex;flex-direction:row;gap:3rem}}@media (min-width: 1024px) and (max-width: 1600px){.app{max-width:1024px;padding:4rem 4rem 0}.content{padding:4rem}#todoForm{flex-direction:row;padding-top:.7rem}#todoForm input,#todoForm select,#todoForm .submit-button{margin:.5rem 0}.footer-column img{width:100px;height:100px}footer{padding:0 4rem;color:#6a6a6a}.site-footer{padding:4rem;gap:4rem}.footer-row{display:flex;flex-direction:row;gap:4rem}}@media (min-width: 1600px){.text,label,span{font-size:1.5em!important}.app{max-width:1600px;padding:5rem 10rem 0}.content{padding:7rem}#todoForm{flex-direction:row;gap:4rem}.todo-item{padding:10px 0;gap:25px}}@media (min-width: 1600px){.text,label,span{font-size:1.5em!important}select{max-width:180px}p,input,select,button{font-size:1.5em!important}figcaption{font-size:1.4em!important}.submit-button{height:auto}h1{font-size:4em}h2{font-size:2em;padding-bottom:.5em}.footer-column img{width:200px;height:200px}footer{padding:0 10rem;color:#6a6a6a}.site-footer{padding:7rem;gap:4rem}.footer-row{display:flex;flex-direction:row;gap:10rem}}