@import"https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap";*,*:after,*:before{margin:0;padding:0;box-sizing:border-box}html{font-size:62.5%}body{font-size:1.6rem;font-family:Josefin Sans,sans-serif;line-height:1.7;max-width:112.5em;margin:0 auto}.hero{min-height:70vh;background:linear-gradient(#00f6,#0000ff4d),url(/assets/bg-CW26kNFM.jpg);background-position:center;background-size:cover;background-repeat:no-repeat;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:1rem;padding:1rem}.hero h3,h2{color:#fff;text-align:center}.hero h3{font-size:3rem;background-color:#007bff;padding:.5rem;border-radius:8px;text-transform:capitalize}.hero h2{font-size:5rem;text-transform:capitalize}.todo-input-form{display:flex;flex-direction:column;gap:1rem;margin-top:3rem;width:40%}@media screen and (max-width: 56.25em){.todo-input-form{width:100%}}.todo-text-input{padding:1rem;font-weight:600}.todo-text-input::placeholder{text-transform:capitalize}textarea{resize:vertical;padding:1rem;font-family:inherit;font-weight:500}textarea::placeholder{font-weight:500;text-transform:capitalize}.submit-btn{display:inline-block;padding:1rem;background-color:#007bff;color:#fff;font-weight:600;border:none;outline:none;border-radius:10px}.todo-items-container{max-width:1200px;margin:5rem auto 1rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(38rem,1fr));justify-items:center;row-gap:3rem;padding:1rem}.todo-item{width:38rem;display:flex;flex-direction:column;gap:1rem;padding:1rem;box-shadow:1px 2px 5px #000000bf;-webkit-box-shadow:1px 2px 5px 0px rgba(0,0,0,.75);-moz-box-shadow:1px 2px 5px 0px rgba(0,0,0,.75);border-radius:8px}.todo-title{text-transform:capitalize}.todo-item__controls{display:flex;gap:1rem}.todo-item__controls button{display:inline-block;padding:.8rem;text-transform:capitalize;background-color:#007bff;border:none;outline:none;border-radius:5px;color:#fff;cursor:pointer}.delete-btn{background-color:#dc143c!important}.complete{text-decoration:line-through}.container{width:100%;display:flex;align-items:center;justify-content:center;padding:0}.timer{margin-top:10px;font-size:2rem;font-weight:700;color:#afa2a2;background-color:#1d867e;border-radius:5px;display:inline-block;border:2px solid #007bff}.ti{font-size:2rem;margin-right:1rem;background-color:#faebd7;font-weight:550}