@import "reset.css";
@import "variables.css";
@import "components.css";

@import "header.css";
@import "hero.css";
@import "social-proof.css";
@import "usp.css";
@import "lifecycle.css";
@import "cta.css";
@import "product.css";
@import "security.css";
@import "fargeau.css";
@import "contact.css";
@import "footer.css";
@import "index.css";

html {
    scroll-behavior: smooth;
}

body {
    overflow-y: scroll;

    font-family: sans-serif;
    background-color: var(--color-gray);
    color: var(--color-primary);

    main, header {
        background-color: white;
    }

    a {
        color: var(--color-accent);
    }

}

@media (min-width: 2400px) {
    #root {

        max-width: var(--page-width);
        margin-inline: auto;
        box-shadow: 5px 7px 11px rgba(0, 0, 0, 0.2);
        border-bottom-left-radius: 1em;
        border-bottom-right-radius: 1em;
        margin-bottom: 1em;
    }

    .submenu {
        padding: 0 2em;
    }
}


.container {
    max-width: var(--page-width);
    margin-inline: auto;
}

section.alternating {
    padding: 2em;
    background-color: var(--color-primary-light);

    h3 {
        margin-top: 1em;
    }

    ul {
        margin-left: 1em;
    }
}

section.alternating:nth-child(even) {
    background-color: #fff;
}

.submenu {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--color-gray);
    border-bottom: 1px solid var(--color-gray-dark);


    nav {
        display: flex;
        justify-content: space-between;
        padding: 0;


        @media (max-width: 500px) {

            padding: .5em 2em;
            a {
                font-size: 0.8em;
                line-height: 1!important;
                display:none;

                &:nth-child(1),&:nth-child(2),&:nth-child(3),&:nth-child(4) {
                    display: inline;
                }
            }
        }

        a {
            color: var(--color-accent);
            line-height: 2.2;

            &:hover {
                color: var(--color-primary);
            }
        }
    }
}

main [id] {
    scroll-margin-top: 3em;
}