/* This is used to style the contents of the NatSci embedded directory profile page */

#ProfileApp {
    line-height: 1.5;
}

#ProfileApp h1 {
	font-size:2rem;
}

#ProfileApp a:focus-visible,
#ProfileApp button:focus-visible {
    outline: 3px dashed #18453B;
}

#ProfileApp *, #ProfileApp ::before, #ProfileApp ::after {
    box-sizing: border-box;
}

.wrapperContainer {
    display: grid;
    grid-template-columns: repeat(12,1fr);
    max-width: 1170px;
    gap: 1.6rem;
}

.well-inset {
    box-shadow: 1px 1px 1px #CCC inset;
}

.well {
    background: #EEE;
    border: 1px solid #DDD;
    border-radius: .5rem;
    padding: 1rem;
}

.directoryContent__personExpertise {
    margin-top: 1rem;
}

    .directoryContent__personExpertise ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .directoryContent__personExpertise li {
        display: inline-block;
    }

    .directoryContent__personExpertise ul li a {
        background: #18453B;
        border-radius: .5rem;
        display: inline-block;
        color: #FFF;
        font-size: 1rem;
        margin: .5rem;
        padding: .5rem;
        text-decoration: none;
    }


.profileName {
    grid-column: 1/-1;
}

.profileContact {
    grid-column: 1/-1;
}

.profilePhoto {    
    border: 1px solid #CCC;
    border-radius: 0 0 .5rem .5rem;
    grid-column: 1/5;
    margin: 0 auto;
    padding: .5rem;
    transition: .3s all;
}

    .profilePhoto:hover {
        box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2);
        transform: scale(1.01);
    }

    .profilePhoto figure {
        margin: 0;
    }

    .profilePhoto img {
        max-width: 100%;
        display: block;
    }

    .profilePhoto figcaption {
        font-size: .85rem;
        text-align: center;
		padding:0;
    }

.profileContact a,
.profileBio a,
.profileCourses a,
.profilePublications a,
.profileResearchInterets a,
.profileOfficeHours a,
.profileResearchInterests a {
    color: #18453B;
}

.profileBio,
.profileCourses,
.profilePublications,
.profileResearchInterets,
.profileOfficeHours,
.profileHonors,
.profileResearchInterests {
    grid-column: 1/-1;
}


/*
    Media Queries
*/
@media only screen and (max-width:990px) {
    .mobileOnly {
        display: block;
    }

    .profileContact {
        grid-column: 1/-1;
        grid-row: 3/4;
        text-align: center;
    }

    .profilePhoto {
        display: grid;
        grid-column: 1/-1;
        grid-row: 2/3;
    }

        .profilePhoto .well {
            justify-self: center;
            width: fit-content;
        }

}