.new-task{margin:35px}.form-element{outline:none;font-size:2rem;border:1px solid #fff;padding:5px 10px 8px;color:#fff}input.form-element{width:500px;background:#fff2;border-top-left-radius:8px;border-bottom-left-radius:8px}button.form-element{border-left:none;background-color:#2196f3;border-top-right-radius:8px;border-bottom-right-radius:8px}.task{position:relative;box-sizing:border-box;width:350px;height:150px;padding:10px;border-radius:8px;font-size:2rem;font-weight:300;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:flex;justify-content:center;align-items:center}.pending{border-left:12px solid #b73229;background-color:#f44336}.done{color:#ddd;border-left:12px solid #0a8f08;background-color:#4caf50;text-decoration:line-through}.pending .close{background-color:#b73229}.done .close{background-color:#0a8f08}.close{position:absolute;right:10px;top:10px;font-size:.9rem;font-weight:600;height:20px;width:20px;border-radius:10px}.TaskGrid,.close{display:flex;justify-content:center}.TaskGrid{flex-wrap:wrap}.TaskGrid .task{margin:10px}.no-task{color:#aaa;font-size:1.7rem}.tasks-progress{position:relative;width:80%;border:1px solid #fff;color:#fff;border-radius:8px;margin-bottom:15px;display:flex;flex-direction:column;align-items:center}.progress-bar{position:absolute;border-radius:8px;height:100%;background-color:#4caf50;align-self:flex-start}.progress-value{z-index:1;font-size:1.5rem}body{font-family:Lato,sans-serif;background:linear-gradient(90deg,#000,#434343);color:#f0f8ff}#app{display:flex;flex:1;flex-direction:column;justify-content:center;align-items:center;height:100vh}#app h1{margin-bottom:5px;font-weight:300;font-size:3rem}