// Styles for the main sections
body,
html {
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  --header-height: 4rem;
  --header-spacing: 0rem;
  --header-offset: calc(var(--header-height) + var(--header-spacing));
  --wrapper-block-spacing-s: #{$wrapper-block-spacing-s};
  --wrapper-block-spacing-m: #{$wrapper-block-spacing-m};
  --wrapper-block-spacing-l: #{$wrapper-block-spacing-l};
  --wrapper-block-spacing-r: #{$wrapper-block-spacing-r};
  --wrapper-inline-spacing-s: #{$wrapper-inline-spacing-s};
  --wrapper-inline-spacing-m: #{$wrapper-inline-spacing-m};
  --wrapper-inline-spacing-l: #{$wrapper-inline-spacing-l};
  --wrapper-inline-spacing-r: #{$wrapper-inline-spacing-r};
  display: flex;
  flex-direction: column;
  background-color: var(--global-background);
  color: var(--global-foreground);
  min-height: 100dvh;

  @each $code, $size in $bkpt-lang-headers {
    @media (min-width: $size) {
      [lang='#{$code}'] & {
        --inline-header: 1;
      }
    }
  }
}

.main {
  flex: 1 0 auto;
  height: max-content;
  display: flex;
  flex-direction: column;
}
