body, html {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
}

.header-logo {
    height: 100px; /* Adjust as needed */
}
header {
    background-color: #000;
}

#introduction, #challenge, #approach, #impact, #reflection {
    padding: 20px;
    color: white;
}

.black-background { background-color: black; }
.red-background { background-color: #d54f4e; }

.subheader {
    font-weight: 700;
}

h1, h2 {
    font-weight: 700;
}

.content-with-image {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.content-with-image p {
    width: 70%; /* Adjust as needed */
}

.float-image-right {
    /*width: 30%; /* Adjust as needed */
    margin-left: 3px;
}

.section-image-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 20px;
    color: #fff; /* Ensures text is white for readability on darker backgrounds */
}

.section-image-left img {
    margin-right: 20px; /* Adds space between the image and the text */
    max-width: 50%; /* Limits image width to 50% of the container */
    height: auto; /* Maintains the aspect ratio */
}

.section-text-right {
    width: 50%; /* Sets the text area to occupy the remaining 50% of the container */
    /* Add any additional text styling here */
}

/* Ensure the .content-with-image doesn't conflict with .section-image-left */
.content-with-image img,
.section-image-left img {
    margin-right: 3px;
    /*width: auto; /* You might want to set a max-width here */
    /*height: auto; */
}
.gif-img {
    border: 3px solid #000000; /* solid black border */
    /*box-shadow: 10px 10px 5px #888888; /* gray shadow */
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px;
    
}
#footer {
    flex-shrink: 0;
    background-color: #000; 
}

/* Add your media queries and animations as needed */