*{box-sizing:border-box;text-align:center;font-family:system-ui,sans-serif;line-height:1.5;margin:0;padding:0;text-decoration:none;word-break:break-word}
body{display:grid;gap:10px;grid-template-areas:"header""main""footer";grid-template-rows:auto auto auto;grid-template-columns:auto}
header{grid-area:header}
main{grid-area:main}
footer{grid-area:footer}
header,h1,h2,h3{color:var(--brand-color)}
.tag{border:var(--bd);border-radius:1rem;aspect-ratio:1;max-width:3rem;align-content:center;margin:auto}
h1,h2{padding:1rem}
p{text-align:left;padding:1rem}
.task-bar .item{padding:.7rem;border:var(--bd);border-radius:1rem; flex:0 0 6rem}
.task-bar .item:hover{background-color:#111;color:#fff}
.task-bar .container{display:flex;justify-content:space-around;padding-top:1rem}
.task-bar{height:5em;width:100%;position:fixed;bottom:0;border:var(--bd)}
a:link{color:#111;background-color:transparent}
a:hover{color:#fff}
:root{--brand-color:hsla(120,50%,35%,1);--bd:1px solid#ccc;}
.container{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.services .card,.blog .card{border-radius:2rem;aspect-ratio:1;max-width:25rem}
.contact .card{border-radius: 0 2rem 0 2rem;;aspect-ratio:2/1;max-width:16rem}
.card{padding:2rem;border:var(--bd);align-content:center}
header,.services,.blog,.contact{margin:2rem.25rem;padding:1rem;border:var(--bd);border-radius:2rem}
.author{border:var(--bd);padding:2rem;color:#111;margin:7rem .25rem;border-radius:2rem}
.contact p,.author,header p{text-align:center}