$footer-height: 42pt;

html,
body {
  height: 100%;
  flex: auto;
}

footer {
  height: $footer-height;
  position: sticky;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 0;
}

#content {
  min-height: calc(100% - 42pt * 3);
  right: auto;
  padding: 42pt;
}

#footer-left {
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 24pt;
  justify-self: left;
  margin-right: auto;
  display: inline-flex;
}

#footer-right {
  margin-top: auto;
  margin-bottom: auto;
  margin-left: auto;
  justify-self: right;
  margin-right: 24pt;
  align-content: center;
  display: inline-flex;
}

#footer-center {
  margin-top: auto;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  justify-self: center;
  display: inline-flex;
}

* {
  padding: 0;
  margin: 0;
}

#footer-right *{
  display: flex;
  margin-top: auto;
  margin-bottom: auto;
}

#footer-center *{
  display: flex;
  margin-right: 8pt;
  margin-left: 8pt;
  margin-top: auto;
  margin-bottom: auto;
  justify-content: center;
  align-items: center;
}


article {
  margin-top: 42pt;
  margin-inline: auto;
  padding: 4em;
}