@charset "UTF-8";
/* CSS Document */

/* Basic Styles */
body {
    margin: 0;
    font-family: sans-serif;
}

.page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Base Styles for all sections */
.page-container > * {
    color: white;
    /* padding: 2rem; */
    text-align: center;
}

/* Section Colors */
.section-red {
    background-color: #141022;
}
.section-blue {
    background-color: #1d1730;
    text-align: center;
}
.section-purple {
    background-color: #1d1730;
}
.section-green {
    background-color: #1d1730; /* #2ecc71 */
    text-align: center;
}
.section-grey {
    background-color: #141022;
    margin-top: auto; /* Pushes the footer to the bottom */
}

/* Mobile Layout: Stacking sections vertically */
.content-container {
    display: flex;
    flex-direction: column;
    flex: 1; /* Allows the main content to grow and push the footer down */
}
.content-container > section {
    width: 100%;
}


/* Tablet and Desktop Layout: Displaying sections horizontally */
@media (min-width: 768px) {
    .content-container {
        flex-direction: row;
    }
    .section-blue {
        flex: 0 0 25%; /* Left section 25% width */
    }
    .section-purple {
        flex: 0 0 50%; /* Middle section 50% width */
    }
    .section-green {
        flex: 0 0 25%; /* Right section 25% width */
    }
}