*,:before,:after{margin:0;padding:0;box-sizing:border-box}#root{width:100%;min-height:100vh;font-size:62.5%}body{display:flex;justify-content:center;background-color:#333}.todo{display:flex;flex-direction:column;align-items:center;margin:50px auto 0;max-width:600px;width:90%;padding:10px;border-radius:10px;font-size:clamp(1.2rem,3vw,2rem);background-color:#575761;box-shadow:inset 2px 2px 5px #d8d4d466,inset -2px -2px 5px #000000fe;font-family:Courier New,Courier,monospace}.todo h1{color:#fff;text-shadow:0 2px 2px #000000}.form{display:flex;flex-direction:column;align-items:center;gap:15px;width:100%}.form_group{display:flex;justify-content:space-around;max-width:400px;width:90%;border-radius:10px;padding:5px 15px;box-shadow:inset 2px 2px 5px #929090cb,inset -2px -2px 5px #000000d6}.form_input{border:none;outline:none;width:100%;font-size:clamp(1.1rem,2vw,1.4rem);color:#fff;background-color:transparent}.form_btn{border:none;cursor:pointer;background-color:transparent}@media screen and (max-width: 515px){.form_group{padding:5px 10px}}.todoList{width:90%}.todoList_item{display:flex;justify-content:space-between;flex-wrap:wrap;padding:10px 15px;margin-bottom:15px;border-radius:10px;font-size:clamp(1.1rem,2vw,1.4rem);background-color:#9fb4c7;box-shadow:inset 2px 2px 5px #fffefeaf,inset -2px -2px 5px #000000f6}.todoList_item_btn{display:flex;gap:15px}.done{text-decoration:line-through;background-color:#9fb4c75b}@media screen and (max-width: 515px){.todoList_item{padding:10px}.todoList_item_btn{gap:5px}}