/* TOKENS DESIGN*/
@import "css/tokens/design/typography.css";
@import "css/tokens/design/colors.css";
@import "css/tokens/design/spacing.css";
@import "css/tokens/design/transitions.css";
@import "css/tokens/design/radius.css";
@import "css/tokens/design/shadows.css";
@import "css/tokens/design/z-index.css";

/* TOKENS LAYOUT*/
@import "css/tokens/layout/breakpoints.css";
@import "css/tokens/layout/sizing.css";

/* BASE */
@import "css/base/reset.css";
@import "css/base/typography.css";

/* COMPONENTS */
@import "css/components/navbar.css";
@import "css/components/header.css";
@import "css/components/text-block.css";
@import "css/components/gallery.css";
@import "css/components/viewer.css";
@import "css/components/contact.css";

/* =========================
   CSS STYLING
========================= */

body {
    position: relative;
    background-color: var(--color-background);
    display: flex;
    flex-direction: column;
    justify-content: top;
    align-items: center;
}

main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-7);
    padding: var(--space-7);
    width: 100%;
    background-color: var(--color-background);
}

@media (max-width: 640px) {
    main {
        padding: var(--space-7) 0;
    }
}