/* Footer in the flow: the absolute footer overlapped the header once the copy grew */
html, body {
  height: auto;
  min-height: 100%;
}
html {
  height: 100%;
}
#header {
  margin: auto 0;
}
#footer {
  position: relative;
  bottom: auto;
  left: auto;
  margin: 2em 0 0 0;
}
body {
  padding-top: 3.5em;
}
#logo {
  height: auto;
  margin-bottom: 1.5em;
  max-width: min(42vw, 24rem);
}
#header .skills {
  display: block;
}
#header p {
  margin-bottom: 1.1em;
}
@media screen and (max-width: 736px) {
  body {
    padding-top: 2em;
  }
  #logo {
    max-width: 16rem;
  }
}