/* Define the color palette as CSS variables for easy use */
:root {
    --prussian-blue: #012a4aff;
    --indigo-dye: #013a63ff;
    --indigo-dye-2: #01497cff;
    --indigo-dye-3: #014f86ff;
    --ucla-blue: #2a6f97ff;
    --cerulean: #2c7da0ff;
    --air-force-blue: #468fafff;
    --air-superiority-blue: #61a5c2ff;
    --sky-blue: #89c2d9ff;
    --light-blue: #a9d6e5ff;
}

body,
html {
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: var(--light-blue);
    color: var(--prussian-blue);

    /* Make the body a flex container */
    display: flex;
    flex-direction: column;
}

/* header for the top logo */
.header {
    width: 100%;
    padding: 20px 0;
    text-align: center;
    /* A sly blue for the header background */
    background-color: var(--light-blue);
    flex-shrink: 0;
}

.header img {
    max-height: 150px;
    width: auto;
}

/* Footer for the logo */
.footer {
    width: 100%;
    padding: 20px 0;
    text-align: center;
    /* A mid-dark blue for the footer background */
    background-color: var(--light-blue);
    flex-shrink: 0;
}

.footer img {
    max-height: 150px;
    width: auto;
}


/* Main content container */
.main-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    text-align: center;
    flex-grow: 1;
    /* Add padding to prevent content from hiding behind the footer */
    padding: 20px 20px 120px 20px;
    box-sizing: border-box;
}


/* Media query for mobile devices */
@media (max-width: 768px) {
    .main-content {
        flex-direction: column;
    }
}

.main-content h1 {
    /* Using a darker blue for the heading for emphasis */
    color: var(--indigo-dye);
    font-size: 1.5rem;
    /* Larger font for the heading */
}

.construction-image {
    max-width: 100%;
    height: auto;
    margin-top: 20px;
    border-radius: 8px;
    object-fit: contain;
    /* This is an optional addition */
    /* Add slightly rounded corners to the image */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    /* Add a subtle shadow */
}