*,:after,:before{padding:0;margin:0;box-sizing:border-box}html{scroll-behavior:smooth}:root{--bg-color: rgb(245, 245, 245);--border-color: rgb(68, 68, 68);--text-sm: .75rem;--text-base: 1rem;--text-lg: 1.75rem;--text-xl: 2rem;--font-title: "Figtree", sans-serif;--font-content: "Work Sans", sans-serif}body{font-family:var(--font-content);font-size:1rem}.container{width:100%;margin-left:auto;margin-right:auto;padding-left:.5rem;padding-right:.5rem}.to-do-container{border:2px solid var(--border-color);margin-top:.5em;height:calc(100vh - 18px);display:flex;flex-direction:column;align-items:center}.header{width:100%;padding:.5em;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--border-color);background-color:var(--bg-color)}.title{font-family:var(--font-title);font-weight:600}.add-icon{margin-right:.8em}.tasks{margin:.5em;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5em}.task{width:320px;border:1.5px solid var(--border-color);border-radius:5px}.task-header{width:100%;display:flex;justify-content:space-evenly;align-items:center;border-bottom:1.5px solid var(--border-color);padding:.3em}.task-content{padding:.5em;font-family:var(--font-content)}.task-date{text-align:center;font-size:var(--text-sm)}.add-icon,.close-icon,.delete-icon,.edit-icon,.done-icon{cursor:pointer}.add-task{width:320px;border:1.5px solid var(--border-color);border-radius:5px;display:none;flex-direction:column;margin-top:10em;background-color:#fff;position:absolute;z-index:999}.add-task-header{padding:.5em;display:flex;justify-content:space-between;align-items:center;border-bottom:1.5px solid var(--border-color)}.add-task-content{padding:.5em;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5em}#ip-text{width:100%;border:1.3px solid var(--border-color);border-radius:5px;height:100px;padding:.5em;font-family:var(--font-content);font-size:var(--text-sm)}#ip-date{width:100%;border:1.3px solid var(--border-color);border-radius:5px;height:30px;padding:.3em}@media (min-width: 768px){.tasks{flex-direction:row;flex-wrap:wrap;justify-content:center;align-content:center}}button{display:inline-block;padding:0;margin:0;border:none;background:none;cursor:pointer}img,picture,video,canvas,svg{display:block;max-width:100%;-webkit-user-select:none;user-select:none}input{font-family:var(--font-content)}.btn{padding:.3em 1em;width:5em;border:1.5px solid var(--border-color);border-radius:5px;font-family:var(--font-title);letter-spacing:.4px;transition:all .4s ease 0s}.btn:hover{color:#fff;background-color:#393939}@media (min-width: 360px){.container{max-width:360px}}@media (min-width: 480px){.container{max-width:480px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}