body {
    font-family: 'Courier New', Courier, monospace;
    background-color: #ffffff;
    color: #0000ff;
    margin: 0;
    padding: 0;
    text-align: center;

    background-image: url('resources/background.jpg'); /* Path to your image */
    background-size: cover; /* Ensure the image covers the whole background */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    background-position: center center; /* Center the image */
}

header {
    background-color: #ffcc00;
    color: #0000ff;
    padding: 1em 0;
    text-align: center;
    border-bottom: 3px solid #ff00ff;
}

header h1 {
    margin: 0;
    font-size: 3em;
    text-shadow: 2px 2px #ff00ff;
}

nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 1em 0;
}

nav ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

nav ul li {
    margin: 0.5em;
}

nav ul li a {
    color: #0000ff;
    text-decoration: none;
    font-weight: bold;
    background-color: #ffff00;
    padding: 0.2em 0.5em;
    border: 2px solid #ff00ff;
    display: block;
}

main {
    padding: 2em;
    max-width: 1000px;  /* Increased max-width for wider content */
    margin: 0 auto;
}

section {
    margin-bottom: 2em;
    background-color: #ffcc00;
    padding: 1em;
    border: 3px dotted #ff00ff;
}

section h2 {
    padding-bottom: 0.5em;
    color: #ff00ff;
    text-shadow: 1px 1px #0000ff;
}

footer {
    background-color: #ffcc00;
    color: #0000ff;
    text-align: center;
    padding: 0.5em 0;  /* Reduced padding for height adjustment */
    border-top: 3px solid #ff00ff;
    position: fixed;
    width: 100%;
    bottom: 0;
}

/* Two-column layout for the About section */
.about-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1em;
}

.about-content .column {
    flex: 1;
    text-align: left;
}

.left-aligned {
    text-align: left;  /* Ensure the text is aligned to the left */
    padding-left: 20px;  /* Optional: Add some padding to indent the list */
    list-style-position: inside;  /* Optional: Ensure the bullets are inside the padding */
}

.center-aligned {
    text-align: center;  /* Ensure the text is aligned to the left */
    padding-left: 20px;  /* Optional: Add some padding to indent the list */
    list-style-position: inside;  /* Optional: Ensure the bullets are inside the padding */
}

/* Center the figure in the column */
.centered-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Media Queries for Responsive Design */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
    }

    nav ul li {
        margin: 0.2em 0;
    }

    header h1 {
        font-size: 2em;
    }

    main {
        padding: 1em;
    }

    footer {
        padding: 0.5em 0;  /* Ensure reduced padding for smaller screens */
    }

    .about-content {
        flex-direction: column;
        text-align: center;
    }

    .about-content .column {
        margin-bottom: 1em;
    }
}