*:before,*:after,*{margin:0;padding:0;box-sizing:border-box}:root{--primary-font: Roboto, sans-serif;--primary-background: beige;--primary-border: 2px solid #ccc;--primary-box-shadow: 2px 2px 10px 0px #00000033;font-family:var(--primary-font);font-size:62.5%}.collapsed{display:none!important}.svg-disabled{cursor:default!important;fill:#ccc!important}.cursor-pointer{cursor:pointer}.text-align-left{text-align:left}.text-align-center{text-align:center}body{margin:5rem 1rem;background-color:var(--primary-background);min-width:30rem}h1{font-size:2.5rem;font-weight:700;margin-bottom:3rem}h2{font-size:2rem;font-weight:700;margin:2rem auto}header{position:fixed;top:2rem;right:2rem;width:fit-content;display:flex;justify-content:space-between;align-items:center;column-gap:1.5rem}header div svg{width:2.4rem;height:2.4rem;cursor:pointer}.button-container{height:fit-content;margin:3rem auto;display:flex;justify-content:center;align-items:center;gap:2rem}.button-container button{width:15rem;padding:1rem 2rem;box-shadow:var(--primary-box-shadow);border:var(--primary-border);border-radius:5px;font-size:1.4rem;font-weight:700}.grid-container-width{margin:0 auto;max-width:50rem;width:100%}.grid-container-height{max-height:65svh}.grid-list-caption-font{font-size:1.4rem;line-height:2rem;font-weight:700;font-style:italic}.grid-list-font{font-size:1.6rem;line-height:2rem;font-weight:500}.grid-list-caption{display:grid;grid-template-columns:6rem 1fr 6.5rem;justify-content:center;align-items:center}.grid-list{display:grid;grid-template-columns:4rem 1fr 4rem;justify-content:center;align-items:center}#todo-list{text-align:left;border:var(--primary-border);box-shadow:var(--primary-box-shadow);list-style-type:none;overflow-y:auto}#todo-list li{padding:1rem 2rem;text-decoration:none;border-bottom:var(--primary-border);background-color:#fff}#todo-list li button{width:1.75rem;height:1.75rem;text-align:center;cursor:pointer;color:#000;border:1px solid black;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:5px}#todo-list li p{cursor:pointer}#todo-list li input[type=checkbox]{margin-left:2rem;width:1.5rem;height:1.5rem;cursor:pointer}#todo-list li:last-child{border-bottom:none}#todo-list li:nth-of-type(odd){background-color:#f0f0f0}#todo-list li:hover{background-color:#cbf3fa}#login-dialog{margin:auto;height:fit-content;max-height:90svh;width:80vw;min-width:30rem;max-width:60rem;padding:0 2rem;border-radius:10px;background-color:var(--primary-background);border:var(--primary-border)}#login-dialog h2{height:3rem;font-size:3rem;line-height:3rem;font-weight:700;text-align:center}#login-dialog form{height:fit-content;display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:2rem}#login-dialog form .login-dialog-input-container{width:100%;height:7rem;display:flex;flex-direction:column;justify-content:space-between;align-items:center}#login-dialog form .login-dialog-input-container label{margin:0 auto;min-width:100%;min-height:2rem;font-size:1.6rem}#login-dialog form .login-dialog-input-container input{margin:0 auto;min-width:100%;min-height:2rem;padding:1rem;font-size:1.6rem;border:var(--primary-border);border-radius:5px}#login-dialog form #login-dialog-btn-container{height:6rem;margin:0 auto;margin-bottom:2rem;display:flex;justify-content:center;align-items:center;gap:2rem}#login-dialog form #login-dialog-btn-container button{width:10rem;padding:1rem 2rem;box-shadow:var(--primary-box-shadow);border:var(--primary-border);border-radius:5px;cursor:pointer;font-size:1.4rem;font-weight:700;text-align:center}#todo-dialog{margin:auto;height:60%;width:80vw;min-width:30rem;max-width:60rem;padding:0 2rem;border-radius:10px;background-color:var(--primary-background);border:var(--primary-border)}#todo-dialog h2{height:3rem;font-size:3rem;line-height:3rem;font-weight:700;text-align:center}#todo-dialog form{height:calc(100% - 11rem)}#todo-dialog form textarea{margin:0 auto;min-width:100%;min-height:2rem;height:calc(100% - 6rem);padding:1rem;font-size:1.6rem;border:var(--primary-border);border-radius:5px;resize:none}#todo-dialog form div{height:6rem;margin:2rem auto;display:flex;justify-content:center;align-items:center;gap:2rem}#todo-dialog form div button{width:10rem;padding:1rem 2rem;box-shadow:var(--primary-box-shadow);border:var(--primary-border);border-radius:5px;cursor:pointer;font-size:1.4rem;font-weight:700}@media (max-width: 1024px) and (min-width: 650px){:root{font-size:78.125%}}@media (min-width: 1024px){:root{font-size:93.75%}}