*{margin:0;box-sizing:border-box}:root{--bg-color: #fdf0d5;--font-color: #000000;--toggle-color: #f7e4bc}html,body{background-color:var(--bg-color);color:var(--font-color);font-family:DotGothic16,sans-serif;padding:20px 40px}html[data-theme=dark]{--bg-color: #000000;--font-color: #fdf0d5;--toggle-color: #121111}html[data-theme=dark] .check-box img,html[data-theme=dark] .delete-box img{filter:invert(95%) sepia(15%) saturate(200%) hue-rotate(350deg)}h1{font-size:50px}h3{font-size:25px}button{font-family:DotGothic16,sans-serif;border:none;background-color:var(--bg-color);font-size:14px;font-weight:700;cursor:pointer}.headline{display:flex;align-items:center;justify-content:space-between;gap:12px}#themeBtn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:32px;padding:0}.theme-btn{align-items:center;justify-content:end}*/ */ #themeBtn .icon-sun,#themeBtn .icon-moon{width:18px;height:18px;object-fit:contain}#themeBtn .icon-moon{filter:invert(95%) sepia(15%) saturate(200%) hue-rotate(350deg)}#themeBtn>img{width:25px;height:25px;display:block;object-fit:contain}.theme-btn .icon-moon{display:none}.theme-btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--font-color)}.container{display:grid;justify-content:center;grid-template-columns:minmax(0,600px) minmax(320px,1fr);margin-top:50px;align-items:start}.todo-container{display:grid;text-align:initial;padding:0 20px 0 0;min-width:0}.todo-footer{display:grid;grid-template-columns:1fr auto 1fr;margin-top:10px;padding:10px}.number-task{display:flex;justify-content:start;font-size:14px}.filter{grid-column:2;display:flex;gap:15px;justify-content:center}.big-three,.clear-completed{color:var(--font-color);border:2px solid var(--font-color);box-shadow:5px 5px 0 var(--font-color);padding:4px 10px;transform:translate(0);transition:transform .12s ease,box-shadow .12s ease}.big-three:active,.clear-completed:active{box-shadow:2px 2px 0 var(--font-color);transform:translate(4px,4px);color:var(--font-color)}.big-three.is-active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--font-color);color:var(--font-color)}.clear-completed{grid-column:3;justify-self:end}.quote-container{display:grid;grid-template-rows:auto 1fr;min-width:0;border:1px solid var(--font-color)}.date-content,.quote-content{border:1px solid var(--font-color);padding:1px;font-size:18px}p.quote{font-style:bold;font-size:20px;padding:60px}.quote-author{padding:20px;align-self:end;text-align:right}input{background-color:transparent;outline:none;border:2px solid var(--font-color);font-size:18px;color:var(--font-color);padding:5px 5px 5px 10px;font-family:DotGothic16,sans-serif}ul{padding:0;margin:0}ul li{list-style:none;font-size:20px;-webkit-user-select:none;user-select:none;padding:12px 40px 12px 50px;position:relative;display:flex;justify-content:start}.check-box{position:absolute;height:28px;width:28px;top:15px;left:8px;cursor:pointer}ul li.checked{color:#555;text-decoration:line-through}.delete-box{position:absolute;height:28px;width:28px;background-size:cover;background-position:center;top:15px;right:8px;cursor:pointer}.date{padding:4px 4px 4px 10px}.quote{padding:10px}@media(max-width:430px){html,body{padding:10px}.headline{flex-wrap:wrap;gap:10px}#themeBtn{margin-left:0}.container{grid-template-columns:1fr;gap:20px}input,#list-container,.todo-footer{width:100%}.todo-container{padding:0}.todo-footer{grid-template-columns:1fr;gap:10px;text-align:center}.number-task,.filter,.clear-completed{justify-self:center;grid-column:auto}.filter{flex-wrap:wrap;gap:8px}ul li{font-size:18px;padding:12px 36px 12px 46px}p.quote{padding:20px;font-size:18px}}