/* TYPOGRAPHY */



header {
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.50)), url('./Images/HomeHeroImage.jpg');
    /* 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;
}

.intro {
    /* make it so text doesn't go all the way to edges */
    margin-left: 20vw;
    margin-right: 20vw;

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