*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(90deg,#add8e6,#87ceeb,#add8e6);min-width:100dvw;min-height:100dvh;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:16px}.TodoWrapper{flex-direction:column;align-items:center;width:100%;height:100%;padding:2rem;display:flex}.TodoForm{border-bottom:2px solid #000;flex-wrap:wrap;align-items:center;gap:.4rem;width:100%;max-width:50rem;margin-bottom:1rem;padding-bottom:1rem;display:flex}.TodoForm input{border:none;border-radius:70px;outline:none;flex:350px;width:100%;padding:.9rem 1.5rem;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:1.1rem;font-weight:600}.TodoForm input[type=submit]{cursor:pointer}.TodoListWrapper{flex-direction:column;align-items:center;gap:.4rem;width:100%;max-width:50rem;list-style:none;display:flex;overflow-y:auto}.TodoListWrapper li{background:#fff;border-radius:70px;flex-wrap:wrap;gap:.3rem;width:100%;padding:.9rem .7rem .9rem 1.5rem;display:flex}.TodoListWrapper li span{cursor:pointer;flex-grow:1;font-size:1.1rem;font-weight:600}.TodoListControls{gap:.4rem;width:max-content;display:flex}.TodoListControls button{color:#fff;cursor:pointer;background:#000;border:none;border-radius:70px;padding:.2rem 1rem;font-size:1.1rem;font-weight:530}@media screen and (width<=450px){.TodoWrapper{padding:1rem}}