@import "https://fonts.googleapis.com/css2?family=Chiron+GoRound+TC:wght@200..900&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Jost:ital,wght@0,100..900;1,100..900&display=swap";*{box-sizing:border-box;margin:0;padding:0}:root{--main:#36c;--secondary:#1f3d7a;--bg-dark:#000;--bg:#0d0d0d;--bg-light:#1a1a1a;--border:#262626;--main-font:"Jost";--text:#f2f2f2;--text-muted:#bfbfbf}body{background-color:var(--bg-dark)}#root{flex-direction:column;justify-content:center;align-items:center;gap:.75rem;display:flex}h1{color:var(--main);font-family:var(--main-font);margin-top:10dvh;font-size:4rem}.ToDo{background-color:var(--bg);border:2px solid var(--border);border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:1rem;width:max(30dvw,40dvh);height:fit-content;padding:1rem;display:flex}.AddTask{font:var(--main-font);color:var(--main);background-color:var(--bg);border:4px solid var(--main);border-radius:8px;outline:none;width:max(28dvw,36dvh);padding:.5rem;transition:box-shadow .25s ease-in-out,transform .25s ease-in-out}.AddTask:focus{box-shadow:4px 4px var(--secondary);transform:translate(-4px,-4px)}#taskCreator{flex-direction:row;gap:1rem;width:max(30dvw,40dvh);display:flex}#taskCreator>button{background-color:var(--bg);aspect-ratio:1;border:4px solid var(--main);border-radius:8px;padding:.25rem;transition:box-shadow .25s ease-in-out,transform .25s ease-in-out}#taskCreator>button:hover{box-shadow:4px 4px var(--secondary);transform:translate(-4px,-4px)}#taskCreator>button:active{box-shadow:0px 0px var(--secondary);transform:translate(0)}.task-container{border:2px solid var(--border);background-color:var(--bg-light);color:var(--text);border-radius:8px;flex-direction:row;place-items:center;width:max(30dvw,40dvh);padding:.75rem;display:flex}.task-container>label{font-family:var(--main-font)}.taskState{margin-left:auto}.completedTask{color:var(--text-muted);text-decoration:line-through}