.grid-container{display:grid;grid-template-columns:auto;justify-content:center;grid-gap:10px;padding:10px}.input-section{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:23px;padding:10px;min-width:500px;margin:0 0 50px}.header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:0 20px;margin:0 0 50px}.title-section{display:flex;flex-direction:row;align-items:center;justify-content:center}.title-section img{width:30px;height:30px}.header h2{padding:0;margin:0;font-size:2.5rem}.header h2 span{color:#37e189;text-decoration:underline}.header nav{display:flex;flex-direction:row;gap:20px}.nav-item{cursor:pointer;color:var(--nav-item-color);text-decoration:underline}.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:40%;height:auto;background-color:var(--modal-bg-color);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:25px;border-radius:30px}.modal h2{text-decoration:underline}.modal p{text-align:center}.todo-container{display:flex;flex-direction:row;justify-items:center;align-items:center;justify-content:space-between;gap:10px;padding:10px;background-color:var(--background-color);border:2px solid var(--text-color);border-radius:10px;width:80vw;max-width:80vw}.todo-container>*{flex:1;overflow:hidden;overflow:auto}.title-section{display:flex;flex-direction:row;justify-items:center;align-items:center;gap:10px}#todo-icon{cursor:pointer;font-size:30px}#todo-icon-input{width:40px}#todo-title,#todo-text-input{word-wrap:break-word;overflow:auto;cursor:pointer}.check-button{display:inline-block;cursor:pointer;border-radius:10px;width:40px;height:40px;background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20384%20512'%3e%3c!--!Font%20Awesome%20Free%206.5.2%20by%20@fontawesome%20-%20https://fontawesome.com%20License%20-%20https://fontawesome.com/license/free%20Copyright%202024%20Fonticons,%20Inc.--%3e%3cpath%20fill='%23cb0606'%20d='M342.6%20150.6c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200L192%20210.7%2086.6%20105.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3L146.7%20256%2041.4%20361.4c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200L192%20301.3%20297.4%20406.6c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3L237.3%20256%20342.6%20150.6z'/%3e%3c/svg%3e");background-position:center;background-size:cover;background-color:var(--svg-bg-color)}.check-button.checked{background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'%3e%3c!--!Font%20Awesome%20Free%206.5.2%20by%20@fontawesome%20-%20https://fontawesome.com%20License%20-%20https://fontawesome.com/license/free%20Copyright%202024%20Fonticons,%20Inc.--%3e%3cpath%20fill='%2365e692'%20d='M438.6%20105.4c12.5%2012.5%2012.5%2032.8%200%2045.3l-256%20256c-12.5%2012.5-32.8%2012.5-45.3%200l-128-128c-12.5-12.5-12.5-32.8%200-45.3s32.8-12.5%2045.3%200L160%20338.7%20393.4%20105.4c12.5-12.5%2032.8-12.5%2045.3%200z'/%3e%3c/svg%3e");background-repeat:no-repeat}.check-button:hover{background-color:var(--svg-bg-hover-color)}.check-button:focus,.check-button:focus-visible{outline:none}.todo-buttons{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:10px}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--background-color: #ffffff;--text-color: #0c0c0c;--input-bg-color: #acacac;--button-bg-color: #1a1a1a;--button-text-color: #ffffff;--button-hover-color: #2a2a2a;--svg-bg-color: #d9d9d9;--svg-bg-hover-color: #c3c3c3;--todo-check-color: #51cd84;--link-color: #51cd84;--link-color-hover: #2c744a;--modal-bg-color: #e4e4e4e7;--background-color: #242424;--text-color: #ffffffde;--input-bg-color: #3e3e3e;--button-bg-color: #ffffff;--button-text-color: #1a1a1a;--button-hover-color: #848484;--nav-item-color: #7f7f7f;--svg-bg-color: #353535;--svg-bg-hover-color: #434343;--todo-check-color: #1d643a;--link-color: #1d643a;--link-color-hover: #32a060;--modal-bg-color: #3f3f3fe7}.app{min-height:100%}a{font-weight:500;color:var(--link-color);text-decoration:inherit}a:hover{color:var(--link-color-hover)}html,body{margin:0;padding:0;background-color:var(--background-color);color:var(--text-color);height:100%}h1{font-size:3.2em}input,textarea{font-size:1em;font-family:inherit;padding:.6em 1.2em;border-radius:8px;border:1px solid transparent;background-color:var(--input-bg-color);color:inherit;transition:border-color .25s}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--button-bg-color);color:var(--button-text-color);cursor:pointer;transition:border-color .25s}button:hover{background-color:var(--button-hover-color)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.svg{width:20px;height:20px;padding:10px;border-radius:10px;background-color:var(--svg-bg-color);cursor:pointer}.svg:hover{background-color:var(--svg-bg-hover-color)}