*{box-sizing:border-box;margin:0;padding:0}body{background:#fff;font-family:Arial,sans-serif}#root{min-height:100vh}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0;padding:0}body{margin:0;font-family:Arial,sans-serif}.app{background:#a5b8df;flex-direction:column;min-height:100vh;display:flex}.main-layout{flex:1;grid-template-columns:1fr 1fr;align-items:center;gap:70px;padding:40px 8%;display:grid}.hero-section{justify-content:center;align-items:center;display:flex}.hero-content{flex-direction:column;align-items:center;display:flex}.floating-title{color:#4d55e8;letter-spacing:2px;margin:0 0 70px;font-size:60px;font-weight:900;animation:3s ease-in-out infinite floatingTitle}.floating-title span{color:red}@keyframes floatingTitle{0%{transform:translateY(0)}50%{transform:translateY(-12px)}to{transform:translateY(0)}}.todo-image{width:380px;max-width:100%;animation:4s ease-in-out infinite floatingImage}@keyframes floatingImage{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.todo-container{background:#d6c6bd;border-radius:28px;width:100%;max-width:600px;margin:auto;padding:35px 45px}.todo-form{background:#f4f5f7;border-radius:40px;margin-bottom:28px;display:flex;overflow:hidden}.todo-form input{background:0 0;border:none;outline:none;flex:1;min-width:0;padding:18px 30px;font-size:18px}.todo-form input::placeholder{color:#777}.todo-form button{color:#fff;cursor:pointer;background:#23499d;border:none;border-radius:40px;padding:0 35px;font-size:18px}.todo-form button:hover{background:#193c87}.todo-list{max-height:450px;margin:0;padding:0;list-style:none;overflow-y:auto}.todo-list::-webkit-scrollbar{width:10px}.todo-list::-webkit-scrollbar-track{background:#f1f1f1}.todo-list::-webkit-scrollbar-thumb{background:#999;border-radius:10px}.todo-list li{color:#fff;background:#283342;border-radius:30px;align-items:center;min-height:28px;margin-bottom:5px;padding:12px 18px;display:flex}.todo-list li span{cursor:pointer;flex:1;padding-left:40px;font-size:18px}.todo-list li.checked span{color:#aaa;text-decoration:line-through}.todo-list li button{color:#fff;cursor:pointer;background:0 0;border:none;font-size:28px;line-height:1}.todo-list li button:hover{color:#f55}.footer{color:#fff;text-align:center;background-color:#344563;width:100%;margin-top:auto;padding:15px 0}.footer p{color:#fff;text-align:center;margin:0;font-size:1.2rem}@media (width<=1000px){.main-layout{grid-template-columns:1fr;gap:40px;padding:40px 5%}.floating-title{margin-bottom:40px;font-size:50px}.todo-image{width:320px}.todo-container{margin:auto}}@media (width<=600px){.main-layout{gap:30px;padding:25px 15px}.floating-title{text-align:center;margin-bottom:30px;font-size:38px}.todo-image{width:250px}.todo-container{border-radius:20px;padding:25px 18px}.todo-form{flex-direction:row}.todo-form input{min-width:0;padding:15px;font-size:15px}.todo-form button{padding:0 20px;font-size:15px}.todo-list li span{padding-left:10px;font-size:16px}.footer{padding:12px 10px}.footer p{font-size:1rem}}