html {
  box-sizing: border-box;
}

body {
  margin: 0;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  -webkit-tap-highlight-color: transparent;
}

:host {
  font-family: var(--c-font-family);
}

::-ms-reveal {
  display: none;
}

:host(c-page) {
  /**
   * @prop --c-page-max-width: Maximum width for the content
   * @prop --c-page-justify-content: Justify page content
   */
  --_c-page-max-width: var(--c-page-max-width, 1280px);
  --_c-page-justify-content: var(--c-page-justify-content, start);
  display: grid;
  height: calc(100lvh - 60px);
  grid-template-rows: 1fr auto;
  grid-template-columns: 1fr;
  width: 100%;
  overflow-y: auto;
  scroll-behavior: smooth;
  position: relative;
  place-items: start var(--_c-page-justify-content);
}
:host(c-page) .scroll-indicator {
  z-index: 9;
  height: 4px;
  background-color: var(--c-primary-600);
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
}
:host(c-page) .c-page__container {
  padding: 0.5rem;
  position: relative;
  width: 100%;
  height: 100%;
  max-width: var(--_c-page-max-width);
}
@media (min-width: 640px) {
  :host(c-page) .c-page__container {
    padding: 0.75rem;
  }
}
@media (min-width: 768px) {
  :host(c-page) .c-page__container {
    padding: 1rem;
  }
}