@import "normalize.css";
@import "typography-utils.css";
@import "layout-utils.css";
@import "hero.css";
@import "how-it-works.css";
@import "footer.css";

body {
    font-family: var(--sl-font-sans), sans-serif;
    font-size: var(--sl-font-size-base);
    font-weight: var(--sl-font-weight-normal);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: var(--sl-spacing-4x-large);
    min-height: 100dvh;
    margin: 0;
    line-height: var(--sl-line-height-normal);
    background-color: var(--sl-color-neutral-50);
    padding-inline: var(--sl-spacing-x-large);
    padding-block: var(--sl-spacing-4x-large);
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

footer,
main {
    width: 100%;
    max-width: 77ch;
}

main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--sl-spacing-2x-large);
}

sl-details::part(header) {
    font-size: var(--sl-font-size-large);
    font-weight: var(--sl-font-weight-semibold);
}

footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--sl-spacing-medium);
}