html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Adjust the selector to your primary wrapper container */
#g-page-surround {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Adjust this selector to target your main content area */
#g-container-main {
    flex: 1;
}


/* Contact page */
.contact #g-container-main .g-content {
    /* the main div container from grav */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    /* Adjust spacing between elements */
}

.contact #g-container-main .g-content .notices {
    width: 100%;
    order: -1;
    padding: 10px;
}

/* Header */
#g-header {
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#g-header .g-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

#g-header #header-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

#g-header #header-logo .g-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    /* Set logo width */
    height: auto;
    /* Adjust as needed */
}

/* Footer */
#g-footer {
    margin-top: auto;
    /* Push footer to the bottom */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    width: 100%;
}

/* Fix overlapping issue when screen gets narrow */
@media (max-width: 768px) {
    #g-footer {
        flex-direction: column;
        /* Stack items */
        text-align: center;
    }

    #g-footer>* {
        width: 100%;
        /* Ensure full width */
        margin-bottom: 0px;
        /* Add spacing */
    }
}