*{box-sizing:border-box;margin:0;padding:0}body{color:#292524;background:#f7f4ef;font-family:Arial,sans-serif}.app{min-height:100vh}.navbar{background:#fffdf9;border-bottom:1px solid #e8e1d8;justify-content:space-between;align-items:center;height:70px;padding:0 8%;display:flex}.navbar h2{font-size:26px}.nav-links{gap:28px;display:flex}.nav-links a{color:#57534e;font-size:15px;text-decoration:none}main{width:84%;max-width:1100px;margin:0 auto}.hero{padding:60px 0 35px}.small-text{letter-spacing:2px;color:#8b8175;margin-bottom:12px;font-size:12px}.hero h1{margin-bottom:8px;font-size:42px}.hero p:last-child{color:#78716c;font-size:17px}.cards{grid-template-columns:1fr 1fr;gap:20px;margin-bottom:45px;display:grid}.card{background:#fffdf9;border:1px solid #e8e1d8;border-radius:18px;padding:25px}.card p{color:#78716c;margin-bottom:12px}.card h2{margin-bottom:5px;font-size:30px}.card span{color:#a8a29e;font-size:14px}.tasks{background:#fffdf9;border:1px solid #e8e1d8;border-radius:18px;margin-bottom:30px;padding:28px}.tasks h2{margin-bottom:20px}.task input{width:17px;height:17px}.focus{text-align:center;color:#fff;background:#292524;border-radius:20px;margin-bottom:50px;padding:40px}.focus p{letter-spacing:2px;margin-bottom:15px;font-size:12px}.focus h1{margin-bottom:20px;font-size:55px}.focus button{cursor:pointer;border:none;border-radius:25px;padding:12px 25px;font-size:15px}.add-task{gap:10px;margin-bottom:20px;display:flex}.add-task input{border:1px solid #ddd5cc;border-radius:10px;outline:none;flex:1;padding:12px 15px;font-size:14px}.add-task input:focus{border-color:#a89b8c}.add-task button{color:#fff;cursor:pointer;background:#292524;border:none;border-radius:10px;padding:12px 20px}.task{border-top:1px solid #eee9e2;align-items:center;gap:12px;padding:14px 0;display:flex}.task span{flex:1}.task .completed{color:#a8a29e;text-decoration:line-through}.delete-task{color:#a8a29e;cursor:pointer;background:0 0;border:none;font-size:13px}.delete-task:hover{color:#292524}.focus-buttons{justify-content:center;gap:10px;display:flex}.reset-button{color:#fff;background:0 0;border:1px solid #777}@media (width<=700px){.navbar{padding:0 5%}.nav-links{gap:15px}main{width:90%}.hero{padding:40px 0 25px}.hero h1{font-size:32px}.cards{grid-template-columns:1fr;gap:12px}.add-task{flex-direction:column}.add-task button{width:100%}.task{gap:8px}.delete-task{font-size:12px}.focus{padding:30px 20px}.focus h1{font-size:45px}.focus-buttons{flex-wrap:wrap}}