@import url('fonts.css');

html,
body {
    height: 100%;
    min-height: 100%;
    font: 400 100% SuisseIntl;
    letter-spacing: 0;
    background-color: #f5f5f0;
}

body {
    display: flex;
    flex-direction: column;
}

b,
strong {
    font-weight: 700;
}


main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

main nav {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    align-self: stretch;
    background: #fff;
    gap: 10px;
    padding: 0.75rem 5rem;
}

main nav {
        color: #787375;
        font-size: 18px;
        line-height: 24px;

    @media only screen and (min-width: 37.5rem) and (max-width: 75rem) {
        padding: 0.75rem 2.5rem;
    }

    @media only screen and (max-width: 37.5rem) {
        padding: 0.75rem 1.25rem;
    }
}

main > div {
    justify-content: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #F5F5F0;
    padding: 40px 0;

    /* only apply white after tablet */
    @media only screen and (min-width: 37.5rem) and (max-width: 75rem) {
        background: #fff;
        justify-content: start;
    }

    @media only screen and (max-width: 37.5rem) {
        background: #fff;
        justify-content: start;
    }
}