body {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: stretch;

  html:not(.site--ready) & {
    overflow: hidden;
  }

  .debug-mode &,
  &.debug-mode {
    &:before {
      background: rgba(255,0,0,0.5);
      color: white;
      content: ' ';
      font-size: 0.875rem;
      font-weight: 700;
      padding: 0.25rem;
      position: fixed;
      pointer-events: none;
      top: 0;
      right: 0;
      left: 0;
      text-align: center;
      z-index: 999999999999999999999999;

      @include media('>=xxs') {
        content: 'xxs';
      }

      @include media('>=xs') {
        content: 'xs';
      }

      @include media('>=sm') {
        content: 'sm';
      }

      @include media('>=ms') {
        content: 'ms';
      }

      @include media('>=md') {
        content: 'md';
      }

      @include media('>=lg') {
        content: 'lg';
      }

      @include media('>=xl') {
        content: 'xl';
      }

      @include media('>=xxl') {
        content: 'xxl';
      }

      @include media('>=xxxl') {
        content: 'xxxl';
      }
    }
  }

}

.site-header {
  background: #ccc;
  flex: 0 0 auto;
}

.site-content {
  flex: 1 0 auto;
}

.site-footer {
  background: #ccc;
  flex: 0 0 auto;
}