@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; font-size: 14px; font-family: "Fredoka", sans-serif; }
html, body { width: 100%; min-height: 100%; background: #f1f1f1; }
ul, ol { list-style: none; }
a { text-decoration: none; color: #333; -webkit-tap-highlight-color: rgba(0,0,0,0); }
h1, h2, h3, h4 { text-transform: capitalize; color: #333; font-weight: 600; }
.container { max-width: 900px; width: calc(100% - 24px); margin-left: auto; margin-right: auto; }

header { width: 100%; background: #8cc63f; }
header .container { height: 60px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.1); }
header .container .logo { height: 45px; display: block; }
header .container .logo > img { height: 100%; }

.company { margin-top: 10px; }
.pobox { display: flex; align-items: center; padding-bottom: 8px; border-bottom: 1px solid #fff; margin-top: 24px; }
.pobox > a { display: block; margin-right: 20px; border-radius: 4px; text-align: center; color: #999; position: relative; font-size: 18px; font-weight: 600; }
.pobox > a::before { content: ""; display: none; bottom: -9px; left: 0; width: 100%; height: 4px; background: #8cc63f; border-radius: 2px; position: absolute; }
.pobox > a.active { color: #333; }
.pobox > a.active::before { display: block; }

.comCon { margin-top: 10px; background: #fff; border-radius: 16px; padding: 24px 12px; }
.comCon h1, .comCon > h2 { font-size: 18px; text-align: center; margin-bottom: 20px; }
.comCon h3 { font-size: 16px; }
.comCon p { margin: 10px 0; line-height: 21px; font-weight: 400; color: #333; }
.comCon a { color: #8cc63f; }

footer { margin-top: 24px; }
footer .bot { margin-top: 24px; background: #8cc63f; padding: 24px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
footer .bot .copy { text-align: center; font-size: 12px; font-weight: 400; color: rgba(255,255,255,.5); }