body,html{height:100%;margin:0;font-family:Arial,sans-serif;font-size:12px;background-color:#2d475f}.container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh}.box{background-color:#0f3147;padding:8rem 15rem;border-radius:.5rem;box-shadow:4px 3px #000}.todo-list-wrapper{max-height:300px;overflow-y:auto;margin-bottom:1rem}.content{box-shadow:4px 3px #000;margin-bottom:.5rem}button{width:75px;background-color:#346edb}.box h1{color:#fff;text-align:left}.box input[type=text]{padding:10px;width:250px;border:1px solid #ffffff;box-shadow:4px 3px #000}.box input:focus{outline:none;box-shadow:none}.box button{padding:10px;color:#fff;cursor:pointer;text-align:center;border:1px solid #ffffff;transition:background-color .2s ease,transform .2s ease}.box button:hover{background-color:#b92929}.box button:focus{outline:none;box-shadow:none}.text{display:flex;color:#d3cece}ul{list-style-type:none;padding:0}li{display:flex;align-items:center;justify-content:space-between;background-color:#fff;margin-bottom:.5rem;box-shadow:4px 3px #000}li input[type=checkbox]{margin-left:1rem;cursor:pointer}li span{flex:1;margin-left:.3rem}li button{height:100%!important}