:root {
    --darkRed: #780000;
    --red: #C1121F;
    --bone: #FEF8EC;
    --light: #FFF8Fc;
    --darkBlue: #003049;
    --blue: #669BBC;
}

.centerAll {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/*Pictures of team members------------------------------------------------------------------------*/

div.team_member {
    padding: 0.5vh;
    margin: 1rem;
    border-radius: 4px;
    border: 1px solid black;
    text-align: center;
    word-wrap: break-word;
    background-color: var(--darkBlue);
    color: white;
}

h1.team_member {
    font-family: 'orbitron';
    font-weight: bold;
    font-size: 1.5rem;
}

.teamPic {
    width: 100%;
    position: relative;
    border-radius: inherit;
}

img.team_member {
    display: block;
    border-radius: inherit;
    width: 100%;
}

p.team_member {
    margin-top: 0;
    font-size: 1.2rem;
}

.img_overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    color: white;
    font-family: sans-serif;
    /* transition: background-color 0.15s ease-in-out; */
    overflow: scroll;
    border-radius: inherit;
    transition: background-image 0.15s ease-in-out;
}

.img_overlay img {
    opacity: 0;
    transition: bottom, opacity;
    transition-duration: 0.35s;
    transition-delay: 0.15s;
    font-size: 2vh;
    padding: 1rem;

    position: absolute;
    bottom: -30%;
}

/*Div with gradient background is needed to fade in/out, due to transition property not working on gradient backgrounds*/
div.gradient {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 1));
    opacity: 0;
    position: absolute;
    transition: opacity 0.2s ease-in-out;
}

.img_overlay:hover img {
    opacity: 1;
    bottom: 0;
}

div.gradient:hover {
    opacity: 1;
}

/*------------------------------------------------------------------------*/