body{display:flex;justify-content:center}.to-do-list{flex-direction:column;text-align:center;position:relative;max-width:500px;margin:auto}h1,.task-name,input,.add-button,.delete-button{font-family:Gill Sans,Gill Sans MT,Calibri,Trebuchet MS,sans-serif;font-weight:50}.edit-btn{display:none;position:absolute;top:0;left:0;font-size:1.4rem;font-weight:700;color:#646464;background-color:#e6e6e6;width:46px;height:46px;padding:2px 0 0;border-radius:50%;transition:transform .4s ease-in-out,color .2s ease-in-out}.edit-btn-pressed{position:absolute;top:0;left:0;font-size:1.4rem;font-weight:700;color:#fff;background-color:#0085fa;width:46px;height:46px;padding:2px 0 0;border-radius:50%;transform:rotate(90deg);transition:transform .4s ease-in-out,color .2s ease-in-out}button{font-size:1.7rem;border:none;padding:10px 20px;border-radius:4px;color:#fff;cursor:pointer}.btn-div{position:absolute;z-index:99;top:0;right:0;height:46px;width:46px}.btn-div button{height:46px;width:46px;border-radius:50%;background-color:#e6e6e6}.input-div{display:flex}input{flex:1}input[type=text]{color:#000;font-size:1.6rem;font-weight:50;border-radius:30px;border:1px solid rgb(220,220,220);padding:10px 10px 10px 20px;flex:1}.add-button{background-color:#299329;border-radius:40px;margin-left:20px;padding:10px 30px}.add-button:hover{background-color:#1f701f}.add-button:active{background-color:#1f701f;opacity:80%}ol{padding:0}li{background-color:#e6e6e6;list-style:none;border-radius:40px;width:100%;padding-top:10px;padding-bottom:10px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;font-size:1.5rem}.task-name{text-align:left;flex:1;margin-right:20px;word-break:break-word;padding-left:30px}.button-div{display:flex;margin-right:6px;flex-shrink:0}.button-div button{font-size:1.4rem;font-weight:700;background-color:#fff;width:46px;height:46px;padding:0;margin-left:6px;margin-right:6px;border-radius:50%}.dark-text{color:#fff}.dark-input,input[type=text].dark-input{color:#fff;background-color:#232629}.dark-input::placeholder{color:#f2f2f2}.mode-btnlight{font-size:1.5rem;padding:0;transform:rotate(25deg);color:#fa0;transition:transform .4s ease-in-out,color .2s ease-in-out;display:inline-block}.mode-btndark{font-size:1.5rem;padding:0 0 0 2px;color:#3a1599;transition:transform .4s ease-in-out,color .2s ease-in-out;display:inline-block;transform:rotate(-15deg)}.backgroundlistdark{background-color:#2f3338}.delete-button,.move-button{transition:color .2s ease-in-out}.move-button{color:#000}button.edit-button{color:#0085fa}.edit-button:active{color:#0085faa6}button.delete-button{color:red}.delete-button:active{color:#ff00009d}@media (max-width: 480px){.edit-btn{display:inline-block}input[type=text]{font-size:1.4rem;padding:8px 8px 8px 20px}li{font-size:1.3rem;padding-top:8px;padding-bottom:8px}.button-div button{width:40px;height:40px;font-size:1.2rem;margin-left:4px;margin-right:4px}}@media (max-width: 102400px){.edit-btn{display:inline-block}}