.app.body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.app.body > .header,
.app.body .app-header {
  margin: 0 0 auto 0;
  position: sticky;
  top: 0;
  display: block;
  z-index: 3;
}

.app.body > .main,
.app.body .app-main {
  margin: auto;
}

.app.body > .footer,
.app.body .app-footer {
  margin: auto 0 0 0;
}

.app.body > .footer .contain,
.app.body .app-footer .contain,
.app.body > .header .contain,
.app.body .app-header .contain {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.app.body > .footer .contain :is(.left, .right),
.app.body .app-footer .contain :is(.left, .right),
.app.body > .header .contain :is(.left, .right),
.app.body .app-header .contain :is(.left, .right) {
  display: flex;
  align-items: center;
  gap: calc(var(--gap) * 1);
}