form{width:100%;max-width:calc(100% - 32px);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:16px auto}form>*{line-height:2;border:none;padding:4px 6px;outline:none;font-family:monospace}form>label{width:100%}form>button,form>input{font-size:18px}form>input:not([type=submit]){background-color:#415c76;color:#fff;box-shadow:inset 0 -2px 0 0 #53dfc1;transition:background-color .125s ease-out,box-shadow .125s ease-out}form>input:not([type=submit]):focus{background-color:#4c6c8a;box-shadow:inset 0 -2px 0 0 #349882}form>button[type=submit],form>input[type=submit]{width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:32px;max-width:250px;padding:4px 8px;background-color:#21b595;color:#fff;font-weight:900;transition:background-color .125s ease-out}form>button[type=submit]:hover,form>input[type=submit]:hover{cursor:pointer;background-color:#26cfaa}form>button[type=submit]:active,form>input[type=submit]:active{cursor:pointer;background-color:#167963}section{width:100%;margin:32px auto}ul{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;list-style:none;gap:8px;padding:12px 8px}li,ul{width:100%}li{background-color:#33475c;padding:4px 6px;text-align:left;position:relative;box-shadow:0 0 1px 0 #7594b3}.taskText{padding:4px 8px;font-size:24px}li:before{content:"→";padding:0 6px}li:before,li>.control-btn-container{width:-webkit-max-content;width:-moz-max-content;width:max-content}li>.control-btn-container{display:inline-flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:4px;background-color:#417676;padding:3px;margin-left:auto;opacity:.05}li:focus>.control-btn-container,li:hover>.control-btn-container{opacity:1}li>.control-btn-container>button{width:25px;height:25px;display:flex;justify-content:center;align-items:center;font-family:monospace;border:none;background-color:#509191;color:#fff;font-size:18px;font-weight:900;transition:background-color .125s ease-out}li>.control-btn-container>button:hover{background-color:#417676}li>.control-btn-container>button[disabled]{background-color:#1d3535;opacity:.2}li>.control-btn-container>button.delete-btn{background-color:#aa0e20}li>.control-btn-container>button.delete-btn:hover{background-color:#d91229}li>.control-btn-container>button.edit-btn{background-color:#325d5d}li>.control-btn-container>button.edit-btn:hover{background-color:#6bc2c2}li>.control-btn-container>button.validate-btn{background-color:#325c5c}li>.control-btn-container>button.validate-btn:not([disabled]):hover{background-color:#6bc2c2}.validateTask{text-decoration:line-through}li>.control-btn-container>button.edit-btn-save{background-color:#c29b57;padding-left:24px;padding-right:24px}.save-list-btn{width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:120px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;margin:12px auto;padding:6px 8px;background-color:#417676;font-weight:500;font-family:system-ui;color:#fff;border:none;box-shadow:inset 0 0 0 2px #417676}.save-list-btn:hover{background-color:#325c5c;box-shadow:inset 0 0 0 1px #417676}.save-list-btn:active{background-color:#325c5c;box-shadow:inset 0 0 0 2px #2c3e50}.edit-area{min-width:350px;max-width:calc(100% - 64px);min-height:40px;height:auto;aspect-ratio:4/1;max-height:240px;width:100%;line-height:2;resize:none;padding:6px 8px;border:none;background-color:#2c3e50;color:#d0c4ae;font-size:16px}*,:after,:before{max-width:100%;box-sizing:border-box;margin:0;padding:0;word-wrap:break-word;word-break:break-word}body{background-color:#2c3e50}ol,ul{width:100%;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;list-style:none;gap:6px}a,button,input[type=submit]{cursor:pointer}a,a:visited{text-decoration:none;box-shadow:0 1px 0 0 #fff;color:#fafafa;transition:color .125s ease-out,box-shadow .125s ease-out}a:hover{color:#21b595;box-shadow:0 1px 0 0 #21b595}.mentions-webdevoo{max-width:720px;margin:0 auto;font-size:13px;font-family:monospace}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#dce5ee;margin-top:60px}@media only screen and (max-width:720px){.mentions-webdevoo{max-width:330px}}