:root{
  --b0021-bg:#f6f8fb;
  --b0021-surface:#ffffff;
  --b0021-ink:#1b2430;
  --b0021-muted:#6b778c;
  --b0021-accent:#2563eb;
  --b0021-border:rgba(20, 31, 55, .10);
}

body.theme-b0021{
  background:var(--b0021-bg);
  color:var(--b0021-ink);
}

/* Required footer skeleton uses .container */
#footer .container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.25rem 1rem;
}

#logo a{
  text-decoration:none;
}

.b0021-shell{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.b0021-mainwrap{
  flex:1;
}

.b0021-grid{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  grid-template-areas:
    "headline headline"
    "main aside";
  gap: 1rem;
}

.b0021-headline{
  grid-area: headline;
  padding: 1rem;
  background: var(--b0021-surface);
  border:1px solid var(--b0021-border);
  border-radius: 14px;
}

.b0021-main{
  grid-area: main;
  padding: 1rem;
  background: var(--b0021-surface);
  border:1px solid var(--b0021-border);
  border-radius: 14px;
}

.b0021-aside{
  grid-area: aside;
  padding: 1rem;
  background: linear-gradient(180deg, rgba(37,99,235,.08), rgba(37,99,235,0));
  border:1px solid var(--b0021-border);
  border-radius: 14px;
}

.b0021-kbd{
  display:inline-block;
  border:1px solid var(--b0021-border);
  border-bottom-width:2px;
  padding:.1rem .35rem;
  border-radius:8px;
  font-size:.8rem;
  color: var(--b0021-muted);
  background: #fff;
}

.b0021-tagline{
  color: var(--b0021-muted);
}

.social a{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-right:.5rem;
  text-decoration:none;
}

.social [class^="icon-"]::before,
.social [class*=" icon-"]::before{
  content:"";
  display:inline-block;
  width:.75rem;
  height:.75rem;
  border-radius:999px;
  background: var(--b0021-accent);
  opacity:.75;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@media (max-width: 992px){
  .b0021-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "headline"
      "main"
      "aside";
  }
}
