:root{--primary-900: hsl(250, 38%, 5%);--primary-800: hsl(250, 35%, 10%);--primary-700: hsl(250, 48.39%, 12.16%);--primary-600: hsl(249.15, 29.65%, 30%);--primary-500: hsla(249, 30.3%, 65%, .59);--primary-400: hsl(249.47, 29.69%, 32%);--primary-300: hsl(250, 15%, 60%);--primary-200: hsl(250, 12%, 72%);--primary-100: hsl(250, 10%, 85%);--neutral-100: hsl(0, 0%, 100%);--accent-400: hsl(93, 60%, 69%);--text-1: var(--neutral-100);--text-2: var(--primary-100);--text-3: var(--primary-200);--surface-1: var(--primary-900);--surface-2: var(--primary-800);--surface-3: var(--primary-700);--border-1: var(--primary-500);--border-2: var(--primary-600)}body{background-color:#090e19;font-family:Lato,san-serif;font-weight:400;font-style:normal}.webgl{z-index:-1000;position:absolute;inset:0}label{font-size:19px}.form-grid{display:inline-grid;grid-template-columns:20% 20% 20% 20%;align-items:start;justify-items:center;justify-content:space-between;width:100%}.task-text{padding:18px 8px;font-size:17px;background-color:#0f172a;font-family:Lato,san-serif;font-weight:400;font-style:normal}.form-area{margin:20px 7px;padding:7px;--border-width: 1px;border-radius:1rem;position:relative;background:hsl(from var(--surface-3) h s l / .25);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.form-area:before,.task-area:before,.finished-task-area:before{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;border:var(--border-width) solid transparent;background:linear-gradient(var(--border-1),var(--border-2)) border-box;mask:linear-gradient(black,black) border-box,linear-gradient(black,black) padding-box;-webkit-mask-composite:source-out;mask-composite:subtract}.input-field{color:#fff}input{border-radius:1rem;border:none;padding:2px;width:140px;height:45px;font-size:18px;text-align:center;color:#fff}input.placeholder{text-align:center}input[type=text],input[type=password],textarea{border:none;outline:none}input[type=text]:focus{border:1px solid rgba(255,255,255,.1);width:138px;height:43px}.submit-btn{background-color:#0f172a;border:none;color:#757575;padding:20px 10px;border-radius:1rem;font-size:16px}.task-area{margin:20px 7px;--border-width: 1px;border-radius:1rem;position:relative;background:hsl(from var(--surface-3) h s l / .25);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:7px}.todo-grid{display:inline-grid;width:100%;gap:5px}.delete-todo-button{background-color:maroon;color:#fff;border:none;padding:6px 5px;margin-right:.1vw;border-radius:5px;height:30px}.finished-task-area{margin:20px 7px;--border-width: 1px;border-radius:1rem;position:relative;background:hsl(from var(--surface-3) h s l / .25);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:7px}.complete-todo-button{background-color:#004b17;color:#fff;border:none;padding:6px 5px;margin-right:2px;border-radius:5px;height:30px}.finished-todo-grid{display:inline-grid;width:100%;gap:5px}.delete-todo-button:hover,.submit-btn:hover,.task-start:hover,.task-end:hover,.task-text:hover{cursor:pointer}.task>div{cursor:default}.task{display:inline-grid;color:#fff;border-radius:1rem;border:1px solid rgba(255,255,255,.1);grid-template-columns:20% 15% 5% 15% 5%;align-items:center;justify-items:center;justify-content:space-between;vertical-align:middle;padding:9px 0;margin-bottom:3px}.comp-task{display:inline-grid;color:#fff;border-radius:1rem;border:1px solid rgba(255,255,255,.1);grid-template-columns:20% 5% 7% 5%;align-items:center;justify-items:center;justify-content:space-between;vertical-align:middle;padding:9px 0}.column-title{display:inline-grid;color:#fff;padding:9px 0}.task-area>.catagory-title{display:inline-grid;align-items:center;justify-items:center;grid-template-columns:20% 15% 5% 15% 5%;justify-content:space-between;vertical-align:middle;width:100%}.finished-task-area>.catagory-title{display:inline-grid;align-items:center;justify-items:center;grid-template-columns:20% 5% 7% 5%;justify-content:space-between;vertical-align:middle;width:100%}