/* Import all CSS modules */
@import 'modules/base.css';
@import 'modules/navigation.css';
@import 'modules/footer.css';
@import 'modules/hero.css';
@import 'modules/gallery.css';
@import 'modules/components.css';
@import 'modules/project.css';
@import 'modules/pages.css';
@import 'modules/categories.css';

/* Global Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: var(--color-white);
}

h1 {
    font-weight: 500;
}

:root {
    --color-black: #000;
    --color-white: #fff;
    --color-darkgray:#161617;
    --color-lightgray:#c9c9c9;
    --color-accent:#f2404f;
    --color-accent-hover:#95262d;
}

body {
    background-color: var(--color-black);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color:var(--color-white);
}

main {
    min-height: 95vh;
}

/* Call to Action Button */
.calltoaction {
    background-color: var(--color-accent);
    color: var(--color-white);
    border-radius: 30px;
    padding: 10px 20px;
    padding-bottom: 14px;
    font-size: 1.2rem;
    font-weight: 400;
    transition: all 0.3s ease;
}

.calltoaction:hover {
    background-color: var(--color-accent-hover);
}

/* Override margins for .calltoaction in contact page */
.contact_content-wrapper .calltoaction {
    margin-top: 10px;
    margin-bottom: 15px;
    width: 100%;
}