* {
    text-decoration: none; /* remove underline from anchor links */
}

/* TYPOGRAPHY */

header {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.75)), url('./Images/PeopleHeroImage.png');
    /* Let the header size itself to its content while ensuring a reasonable
       minimum height. Using padding + flexbox keeps the image centered
       while avoiding large unused space below the content. */
    min-height: 50vh;
    padding: 3rem 0;
    padding-top: 150px;

    /* Position and center the background image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center; /* vertical centering for the content */
    justify-content: center; /* horizontal centering */
    position: relative;
}

/* Place hero content in the middle of the page */
.hero-contents {
    /* Use normal flow inside the header (no absolute positioning). With
       header as a flex container the content will be vertically centered
       and the header height will shrink to fit, removing large bottom gaps. */
    text-align: center;
    position: relative;
    color: white;
    max-width: 600px;
    padding: 0 1rem; /* horizontal padding for small screens */
}

/* Space things out nicely within hero image */
.hero-contents p, .hero-contents img {
    margin-top: 25px;
    margin-bottom: 25px;
}

.hero-contents h1 {
    font-size: 100px;
}

.intro {
    text-align: center;

    /* Space the top of the intro a little from the
    bottom of the hero image */
    margin-top: 50px;
}



/* -----PROJECT BUTTONS----- */
.container {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping of child elements */
    justify-content: center; /* Center elements horizontally */
    padding-top: 25px;
    text-align: center;
    width: 50vw; /* Used to set white space on either side of grid */
    align-items: center;
    margin: 0 auto; /* Center horizontally */
}


#aeroscape {
    background-color: black;
    width: 50vw;
    height: 300px;

    display: flex; /* Use flexbox for alignment */
    flex-direction: column; /* Stack heading and paragraph vertically */
    justify-content: center; /* Align content to the bottom */
    text-align: center; /* Ensure text is centered within the div */

    color: white; /* Text color */
    flex: 1 1 100%; /* Take full width */
}

.small-project {
    background-color: black;
    width: 20vw;
    height: 300px;

    display: flex; /* Use flexbox for alignment */
    flex-direction: column; /* Stack heading and paragraph vertically */
    justify-content: center; /* Align content to the bottom */
    text-align: center; /* Ensure text is centered within the div */

    color: white; /* Text color */
    flex: 1 1 calc(50% - 10px); /* Take half the width with some spacing */
    margin: 5px; /* Add spacing between the small projects */
}

#aeroscape p {
padding-left: 10%;
padding-right: 10%;
}

.small-project p {
    padding-left: 50px;
    padding-right: 50px;
}

.special {
    color: #ef5152;
}