#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}*,*:before,*:after{box-sizing:border-box}*{margin:0}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}body{background-color:#07000d;background-image:url(https://www.transparenttextures.com/patterns/cartographer.png);color:#fff;font-family:Rubik,sans-serif}.container{max-width:1200px;margin:0 auto}.title{text-align:center;font-size:3rem;padding:3rem 0 1rem}.todos{display:flex;flex-direction:column;align-items:center;gap:1rem}.todo{display:flex;justify-content:space-between;padding:1rem 1.25rem;background-color:#ffffff1a;width:50%;font-size:1.4rem;border-radius:1rem;transition:all .2s}.todo:hover{background-color:#fff3}.mutations{display:flex;gap:.75rem}.todo__status,.todo__delete{border:none;padding:0;line-height:1;cursor:pointer;transition:all .2s;background:none;color:#fff;font-size:1.6rem}.todo__status:hover,.todo__delete:hover{transform:scale(1.15)}.todo__status{font-size:1.75rem}.form{display:flex;gap:.5rem;width:50%;margin:1rem auto}.form__input{flex:1;padding:.5rem .75rem;border-radius:.25rem;border:none;outline:none}.form__button{border:none;background-color:#7100d4b3;cursor:pointer;color:#fff;border-radius:.25rem;transition:all .2s}.form__button:hover{background-color:#5f00b380}@media (max-width: 420px){.title{font-size:2.5rem}.form{width:95%}.todo{width:95%;font-size:1.2rem}}