@import url('/.css/main/main.navigation.css');
@import url('/.css/main/main.page.css');

@import url('/.css/main/main.font.css');
@import url('/.css/main/main.theme.css');

@import url('/.css/footer/footer.main.css');

:root {
    --border: 1px solid;
    --borderAccent: 1px solid var(--primaryColor);
    --borderThick: 2px solid var(--borderColor);
    --borderAccentThick: 2px solid var(--primaryColor);
    --borderTransparent: 1px solid transparent;
    --borderDrop: 2px dashed var(--borderColor);
    --innerBorderRadius: 0.5rem;
    --outerBorderRadius: calc(var(--innerBorderRadius) + var(--paddingL));
    --buttonBorderRadius: 2rem;
    --circleBorderRadius: 50%;
    
    --navigationHeight: 3rem;
    --columnGap: 1rem;
    --rowGap: 1rem;
    --footerGap: 4rem;
    
    --gapXS: 0.25rem;
    --gapS: 0.5rem;
    --gapM: 1rem;
    --gapL: 2rem;
    --gapXL: 4rem;

    --paddingS: 0.25rem;
    --paddingM: 0.5rem;
    --paddingL: 1rem;
    --paddingXL: 2rem;

    --paddingSW: 0.25rem 0.5rem;
    --paddingMW: 0.5rem 1rem;
    --paddingLW: 1rem 2rem;
    
    --marginS: 0.25rem;
    --marginM: 0.5rem;
    --marginL: 1rem;
    --marginXL: 2rem;

    --iconS: 1.5rem;
    --iconM: 2rem;
    --iconL: 3rem;

    --logoPadding: 0.25rem;
    --logoPaddingWide: 0.25rem 0.5rem;
    --inputSmall: 1.2rem;

    --heroElementWidth: calc(100% - 32px);
    --heroBorderRadius: 8rem;

    --mainElementWidth: 60vw;
}

* { margin: 0; padding: 0;}
*::selection { background: var(--primaryColor); color: var(--staticTextColor); }

@media (max-width: 768px) {
    :root {
        --mainElementWidth: 90vw;
    }
}

main.page {
    display: flex;
    justify-content: center;
    align-items: center;
}