body {
  --ory-theme-font-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
  --ory-theme-font-family-mono: monospace;
}

body {
  margin: auto;
  min-height: 100vh;
  min-width: 100%;
  background: var(--ory-theme-background-canvas);
  display: flex;
  flex-direction: column;
}

/* the browser adds margins to these elements by default */
ul,
ol,
p,
h1,
h2,
h3 {
  margin-top: 0;
  margin-bottom: 0;
}

/* main contains all of our page elements - excluding the footer */
main {
  /* fill the page */
  flex: 1;
}

.divider {
  width: 4rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.spacing-32 {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.spacing-32-horizontal {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}

.spacing-16 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.spacing-16-horizontal {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.spacing-8 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.divider-left {
  margin: 0;
}

.ory-branding {
  display: flex;
  flex-direction: row;
  gap: 0.375rem;
  align-items: center;
  padding-bottom: 2rem;
}

/* only manage the nav */
.main-nav {
  min-width: 18.75rem;
  position: fixed;
  height: auto;
  z-index: 1;
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 2;
}

/* pushes the menu links to either side of the footer bar */
.footer-container {
  padding: 1rem 1.5rem;
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.75rem;
  display: flex;
  justify-content: space-between;
  text-decoration: none;
  color: var(--ory-theme-foreground-muted);
  background-color: var(--ory-theme-background-surface);
}

.footer-divider {
  height: 0;
  border-top: 1px !important;
}

@media screen and (max-width: 24.375em) {
  .footer-container > div:last-child {
    display: none;
  }
}

@media screen and (max-width: 40em) {
  body {
    background: var(--ory-theme-background-surface);
  }
}