body,html{margin:0;padding:0}body{background:url(https://images.pexels.com/photos/1034425/pexels-photo-1034425.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=2&h=750&w=1260);background-size:cover}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50;font-size:18px;padding:20px;position:relative;background:#fff;opacity:.95;-webkit-box-shadow:1px 1px 2px 1px #aaa;box-shadow:1px 1px 2px 1px #aaa;margin:0;width:100%}@media only screen and (min-device-width:768px){#app{margin:60px auto 30px auto;width:50%}}h2{text-align:center}.message{padding:20px;display:grid;justify-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:30px;color:grey;font-weight:700}.summary{display:grid;grid-template-columns:auto -webkit-max-content;grid-template-columns:auto max-content;font-size:14px;grid-gap:10px;margin:20px 0}.hr{border-bottom:1px solid #eee;height:10px}.task{display:grid;grid-template-columns:40px auto 40px;grid-gap:15px;justify-items:baseline;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:20px}.task a{border:1px solid #7fffd4;border-radius:25px;cursor:pointer}.task a,.task button{display:block;width:25px;height:25px}.task button{border:1px solid #ffb6c1;padding:0;padding-left:3px;border-radius:2px}.task a:hover{background:rgba(127,255,212,.25098039215686274)}.tasks .task.checked a{background:#7fffd4;border:1px solid #6cdcb6}.delete-modal .complete,.tasks .task.checked span{text-decoration:line-through}.new-task{width:calc(100% - 120px);font-size:18px;margin-left:55px;padding:1px 5px;border:none;border-bottom:1px dashed #d3d3d3;color:grey}.new-task::-webkit-input-placeholder{color:#d3d3d3}.new-task::-moz-placeholder{color:#d3d3d3}.new-task:-ms-input-placeholder{color:#d3d3d3}.new-task::-ms-input-placeholder{color:#d3d3d3}.new-task::placeholder{color:#d3d3d3}.new-task:active,.new-task:focus{border-bottom:1px solid #9a9999;outline:none!important}.delete-modal-overlay{background:rgba(0,0,0,.35294117647058826);z-index:100;position:absolute;top:0;left:0;bottom:0;right:0}.delete-modal{position:absolute;border:1px solid #d3d3d3;background:#fff;padding:30px;display:grid;grid-template-rows:auto -webkit-min-content;grid-template-rows:auto min-content;-webkit-box-shadow:0 0 1px 2px #eee;box-shadow:0 0 1px 2px #eee;left:22%;top:33%;z-index:101}.buttons{margin-top:20px;display:grid;grid-template-columns:-webkit-min-content -webkit-min-content;grid-template-columns:min-content min-content;grid-gap:20px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.buttons button{padding:5px;border:1px solid #d3d3d3;border-radius:2px;min-width:50px;font-size:16px;cursor:pointer}.buttons button:hover{background:#efefef}.percentage.red{color:#ff4500}.percentage.yellow{color:orange}.percentage.green{color:#6b8e23}.show-more{display:grid;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:12px;cursor:pointer}.show-more:hover{text-decoration:underline}footer{position:absolute;bottom:10px;right:10px;font-family:Avenir,Helvetica,Arial,sans-serif}footer,footer a{color:#fff;font-size:12px}