:root{--normal-blue: rgb(147, 207, 226);--darker-blue: rgb(119, 181, 200);--bg: rgb(243, 35, 35);--card: rgb(236, 113, 113);--scale-size: 1.05}body{font-family:Noto Sans,sans-serif;padding:1rem 6rem;background-color:var(--bg);color:#fff;transition:background-color .2s ease}body.stage-none{--bg: rgb(243, 35, 35);--card: rgb(236, 113, 113)}body.stage-some{--bg: rgb(235, 153, 45);--card: rgb(235, 186, 118)}body.stage-all{--bg: rgb(156, 218, 63);--card: rgb(193, 240, 123)}input,button{font:inherit}.container{text-align:center}.done{color:gray;text-decoration:line-through}.card{background-color:var(--card);margin:20px auto;padding:10px;width:300px;border-radius:10px;transition:all .2s ease}.card:hover{transform:scale(var(--scale-size))}.card input{border:none;border-radius:5px;padding:5px}button{cursor:pointer}.tickButton{margin-left:5px;background:none;border:none;vertical-align:middle;color:#fff;transition:all .2s ease}.tickButton:hover{transform:scale(1.05)}.deleteBtn{background:none;border:none;color:#fff}.addButton{border:none;border-radius:5px;padding:7px;color:#fff;background-color:var(--normal-blue);transition:all .2s ease}.addButton:hover{background-color:var(--darker-blue);transform:scale(var(--scale-size))}.taskList{max-height:370px;overflow-y:auto;margin-bottom:10px}.taskList::-webkit-scrollbar-track{background:transparent}.taskList::-webkit-scrollbar-thumb{background-color:#fff;border-radius:10px}.taskList{scrollbar-color:white transparent}