:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--color-purple-50: #f8f6fc;--color-purple-100: #f1eef9;--color-purple-200: #e6dff5;--color-purple-300: #d3c6ec;--color-purple-400: #bca5e0;--color-purple-500: #9e78cf;--color-purple-600: #9464c3;--color-purple-700: #8252af;--color-purple-800: #6d4493;--color-purple-900: #5a3979;--color-purple-950: #3a2451;--color-light-purple: #9E78CF;--color-dark-purple: #1D1825;--color-black: #1E1E1E;--color-light-green: #78CFB0;--color-light-orange: #ed9363}html,body{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}body{margin:0;min-width:320px;min-height:100vh;background-color:var(--color-black)}#root{max-width:calc(100vw - 64px);margin:0 auto;text-align:center}.main{text-align:center;box-sizing:border-box;background-color:var(--color-dark-purple);color:var(--color-light-purple);margin-top:56px;padding-bottom:24px;border-radius:8px;box-shadow:0 0 10px #00000080;min-height:calc(100vh - 56px)}header{padding-top:24px}header h3{width:48%}input[type=text]{width:60%;font-size:24px;padding:12px 20px;margin:20px 10px 10px;border:1px solid var(--color-light-purple);border-radius:16px;background-color:transparent;color:var(--color-light-purple)}.add-button{background-color:var(--color-light-purple);color:var(--color-purple-100);padding:10px 20px;border-radius:25%;margin-left:24px;font-size:x-large}.add-button:hover{background-color:var(--)}.footer-container{width:90%;padding:20px;background-color:var(--color-dark-purple);position:fixed;bottom:0}.clear-button{background-color:var(--color-light-purple);color:var(--color-purple-100);padding:10px 20px;border-radius:10px;margin-left:24px;font-size:large;font-weight:700}.tabs{display:flex;margin-top:20px}.tab{width:100%;background-color:inherit;color:var(--color-light-purple);font-size:18px;font-weight:bolder;border:none;outline:none;cursor:pointer;padding:14px 16px;transition:.3s}.tab:hover{color:var(--color-purple-100)}.active{background-color:var(--color-light-purple);color:var(--color-dark-purple)}.tasks-list{list-style-type:none;text-align:justify;width:73%;margin:0 auto}.list-button{display:flex;justify-content:space-between;width:85%;padding:16px;margin-top:4px;border-bottom-style:solid}.task-button{font-size:24px;border:none;width:100%;text-align:justify;background-color:transparent;color:var(--color-light-purple)}.completed{text-decoration:line-through;color:var(--color-light-orange)}.delete-task{color:var(--color-purple-100);background-color:var(--color-light-purple)}