@import url(phpolar.theme.css);
@import url(phpolar.typography.code.css);

/* layout */
body>header>div,
body>main>section>p,
aside,
section>h2 {
  text-align: center;
}
code {
  text-align: left;
}
body>footer img {
  position: relative;
  bottom: -0.5rem;
  margin-right: 0.2rem;
}

body>main>article>section {
  display: inline-block;
  vertical-align: top;
  padding-left: 1rem;
}

@media (min-width: 1278px) {
  body>main>article>section {
    width: 46vw;
  }

  body>main>article>section>section {
    margin-bottom: 282px;
  }
}

/* theme */
:root:not([data-theme=dark]),
[data-theme=light] {
  --pico-h1-color: #000000;
  --pico-h2-color: #2d3138;
}

/* typography */
footer>address>p>a,
body>footer>a,
body>footer>a:hover,
footer>address a {
  --pico-text-decoration: none;
}

footer>address a.email-link,
footer>address a.email-link {
  --pico-color: var(--pico-h3-color)
}

footer>address a,
footer>address a {
  /* we don't want the tooltips to float */
  display: inline-block;
  vertical-align: bottom;
}

footer>hgroup {
  display: inline-grid;
}