/*! modern-normalize v3.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */*,:before,:after{box-sizing:border-box}html{font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";line-height:1.15;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4}body{margin:0}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:currentcolor}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}*{margin:0;line-height:calc(1em + .5rem)}:root{--secondary-bg-color: #1e201e;--primary-bg-color: #3c3d37;--secondary-fg-color: #697565;--primary-fg-color: #ecdfcc;--catpuccin-peach: #fe640b;--catpuccin-green: #40a02b;--catpuccin-teal: #179299;--checkbox-accent-color: #e95420}body{font-family:Alpino,sans-serif;height:100vh;background-color:var(--secondary-bg-color)}.outer-container{display:flex;flex-direction:column;align-items:center}.outer-container h1{color:var(--primary-fg-color);font-size:3.5rem;margin-top:4rem}.input-container{margin:4rem 0;display:grid;grid-template-rows:1fr;grid-template-columns:2.5fr 1fr 1fr;grid-gap:0 1rem}.input-container input{border:none;outline:none;background-color:var(--primary-fg-color);font-size:18px;font-weight:700;padding:.5rem}.input-container input::placeholder{font-weight:500}.todo-container{display:grid;gap:1rem}.todo-item{display:flex;gap:2rem;align-items:center}.todo-item .input-field{background-color:var(--primary-fg-color);border:none;border-radius:2px;height:1.5rem;font-size:20px;font-weight:700;padding:1rem}.todo-item .checkbox:checked{accent-color:var(--checkbox-accent-color)}@media (max-width: 810px) and (min-width: 100px){.input-container{display:grid;grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr;grid-gap:1rem;width:24rem}.input-container input{grid-column:span 2}.input-container button{margin:0}.todo-container{gap:.5rem}.todo-item{gap:.4rem}.todo-item input{padding:.5rem}}.btn{font-weight:900;font-size:18px;margin:0 .5rem;padding:10px 25px;border:none;background-color:var(--secondary-fg-color);border-bottom:3.5px solid var(--primary-fg-color);border-radius:2px;color:var(--primary-fg-color);transition:color .3s}.btn:hover{cursor:pointer;color:#fff;transition:translateY .3s;transition:background-color .3s ease-in-out}.btn:active{transform:translateY(3px);border:none;color:#fff;border-bottom:3px solid var(--primary-fg-color);background-color:var(--primary-fg-color)}.clear-btn:hover,.delete-icon{color:var(--catpuccin-peach)}.delete-icon:hover{color:red;cursor:pointer}.edit-icon{color:var(--catpuccin-teal)}.edit-icon:hover{cursor:pointer}.save-icon{color:var(--catpuccin-green)}.save-icon:hover{cursor:pointer}