/* Import Modular CSS */
@import url("/css/colors.css");
@import url("/css/errors.css");
@import url("/css/header.css");
@import url("/css/align.css");
@import url("/css/main-nav.css");
@import url("/css/log-nav.css");
@import url("/css/divs.css");
@import url("/css/sections.css");
@import url("/css/forms.css");
@import url("/css/chat.css");
@import url("/css/footer.css");

/* Import responsive rules at the end */
@import url("/css/responsive.css");

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

/* Smooth, friendly system font stack applied globally */
body,
input,
textarea,
button,
select {
    font-family:
        -apple-system,
        /* macOS/iOS San Francisco */
        "Segoe UI",
        /* Windows */
        "Ubuntu",
        /* Linux Ubuntu */
        "Cantarell",
        /* Linux GNOME */
        "Noto Sans",
        /* Android / fallback */
        "Helvetica Neue",
        /* macOS fallback */
        Arial,
        /* generic fallback */
        sans-serif;
    /* final fallback */
    font-weight: 400;
    /* normal weight */
    line-height: 1.6;
    /* smooth reading */
    letter-spacing: 0.5px;
    /* subtle openness for clarity */
    color: #222;
    /* dark but soft text color */
}

/* Body layout */
body {
    background-color: #f9f9f9;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Container */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Images with .half class */
img.half {
    max-width: 30%;
    height: auto;
}

/* Optional: subtle rounded inputs/buttons for consistent styling */
input,
textarea,
button,
select {
    border-radius: 6px;
    /* gentle rounding */
    padding: 0.5rem 0.75rem;
    /* internal spacing */
    font-family: inherit;
    /* inherit global font */
}