*{box-sizing:border-box}body{margin:0;font-family:sans-serif;font-size:12px;background:#ffe;background-image:linear-gradient(#c77, #d8d, #ddd);background-repeat:no-repeat;background-size:cover;min-height:100vh}h1{text-align:center;color:#fff;text-transform:uppercase}h2{margin:0}p{line-height:1.3}.warning{margin-bottom:0;background:tomato}textarea{width:100%;max-width:300px}.title-text-field{margin-top:1em}.container{margin:2rem auto;width:90%;max-width:700px}.wrapper{display:flex;align-items:center;flex-direction:column}.tasks-wrapper{display:flex;justify-content:center;flex-wrap:wrap;flex-direction:row;margin:0 auto 1em}.open-tasks{background:rgba(221,221,255,0.4);border-radius:8px;padding:1em 0 1em}.task-card{padding:1.5em;margin:.5em;width:150px;height:100%;border-radius:8px;background-color:#ced}.masonry{column-count:4;column-width:150px;column-gap:.5em;column-rule-width:0;padding-left:.5em}.answered-card{display:inline-block;margin:0.5em;width:150px;height:100%}.answered-top{padding:1.5em 1.5em 1em;border-top-left-radius:8px;border-top-right-radius:8px}.answered-btm{padding:.1em 1.5em 1.5em;border-bottom-left-radius:8px;border-bottom-right-radius:8px}.btn{display:inline-block;padding:.5em 1em;background:#fff;margin:0 0 0.3em;text-decoration:none;font-size:.75rem}.btn-accent{border:hidden;background:purple;color:white}.btn:hover,.btn:focus{text-decoration:underline overline}