@import "reset.css";
@import "button.css";
@import "nav.css";
@import "hero.css";
@import "content.css";
@import "footer.css";

:root {
    --font-header: 'Archivo Black';
    --font-body: 'Montserrat';
    --color-primary: #c86c58;
    --color-secondary: #80150a;
    --color-secondary-hover: #852b22;
    --color-secondary-outline-hover: rgba(128, 21, 10, 0.3);
    --color-tertiary: #4f743e;
    --color-bg: #e4e2dd;
    --color-body: #2b1b10;
    --color-divider: rgba(128, 21, 10, 0.3);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body), sans-serif;
    background-color: var(--color-bg);
    font-size: 0.875rem;

    @media only screen and (min-width: 600px) {
        font-size: 1rem;
    }
}

body:has(.nav__links.nav-open) {
    overflow: hidden;
}

.container {
    padding-inline: 1rem;

    @media only screen and (min-width: 600px) {
        padding-inline: 4rem;
    }
}

.container-sm {
    padding-inline: 1rem;
    max-width: 75rem;
    margin-inline: auto;

    @media only screen and (min-width: 600px) {
        padding-inline: 4rem;
    }
}

.anchor-offset {
    position: absolute;
    top: -6.75rem;
}