html.reduce-fouce {
    opacity: 0;
}

body {
    margin: 0;
    background-color: #F7F7F7;
    font-family: "Public Sans", sans-serif;
    font-weight: 300;
    font-size: 16px;
}

/*
img {
    height: 100px;
}
*/

img#logo {
    height: 6vw;
    min-height: 40px;
    max-height: 60px;
    padding: 8px;
}

/* these sometimes appear in html from markdown */
hr {
    display: none;
}

/* temp style */

#body-container {
    margin-top: 100px;
    margin-bottom: 30px;
    min-height: calc(100vh - 80px); /* push footer down. 80px = header+footer */
    overflow: hidden; /* prevents child elements' margins from pushing this around  */
    line-height: var(--sl-line-height-normal);
}

div#content {
    width: 70%;
    margin-inline: auto;
}

nav#menu {
    min-height: 40px;
    width: 90%;
    overflow: visible; /* if the floating menu wraps around, extend this nav */
    z-index: 1;     /* always on top */
    position: fixed;  /* attached to the top */
    top: 0;
    font-size: 18px;
    font-weight: normal;
    background-color: var(--sl-color-gray-800);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
}

nav#menu a {
    color: lightgray;
    text-decoration: none;
}

nav#menu a:hover {
    color: white;
}

nav#menu .icon {
    display: none;
}

.topnav {
	float: right;
	margin: 0;
	list-style-type: none;
    display: flex;
    align-items: center;
}

.topnav li {
	display: inline;
	margin: 0 1em 0 0;
    text-transform: capitalize;
}

.front-grid > a {
    text-decoration: none;
    color: black;
}

article > h1 {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 0.2em;
}

#front > h1,
#front > h2 {
    text-align: center;
}

#front > hr {
    display: block;
    width: 30%;
    color: lightslategray;
}


h1 {
    font-weight: normal;
}

h2 {
    font-weight: normal;
}


/* footer */
footer {
    background-color: var(--sl-color-gray-200);
    color: rgb(46, 46, 46);
    font-size: 12px;
    font-weight: normal;
    padding: 5px 5%;
    text-align: left;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    border-top: 2px darkgray solid;
}


/* 
    INDEX
*/

article > p {
    padding-bottom: 20px;
    margin-top: 0;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 340px);
    grid-auto-rows: auto;
    column-gap: 20px;
    row-gap: 20px;
    justify-content: space-evenly;
}

.card-grid sl-card[id] {
    scroll-margin-top: 100px;
}

.front-grid sl-card {
    margin-bottom: 15px;
}

.preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 300px);
    grid-auto-rows: auto;
    column-gap: 20px;
    row-gap: 10px;
}

.preview h3 {
    font-size: inherit;
    font-weight: inherit;
}

sl-menu-item::part(label) {
    text-transform: capitalize;
}

.card-filter {
    margin-bottom: 20px;
}

/* finer grid for people */
#people .card-grid {
    grid-template-columns: repeat(auto-fit, 280px);
    column-gap: 25px;
}

/* fix non-conforming headshots */
#people .card-grid img {
    object-fit: contain;
    height: 200px;
}

/*
    FRONT PAGE
*/

a.see-all {
    white-space: nowrap;
    padding: 5px;
    border-radius: 3px;
    color:teal;
    border: 1px solid teal;
    margin: 2px;
    text-decoration: none;
    background-color: white;
}

#resources ul, #contact ul, #funders ul {
    list-style-type: none;
    text-align: justify;
}

#resources li, #contact li, #funders li {
    display: inline-block;
    text-align: center;
    padding: 10px;
    font-size: 12px;
    color: rgb(49, 49, 49);
}

#resources img, #contact img, #funders img {
    height: 40px;
    display: block;
    margin: auto;
}

#funders img {
    height: 55px;
}

#resources a, #contact a {
    color: black;
    text-decoration: none;
}


/*  
    SECTION
*/


/* local links */
sl-card a[href^="/"] {
    padding: 5px;
    border-radius: 3px;
    border: 1px solid teal;
    margin: 2px;
    text-decoration: none;
    color: teal;
}

img[slot="image"] {
    padding: 5%;
    max-width: 90%;
}


/*
    SPIN-OFFS PAGE
*/

/* eeg100 link same as local links */
sl-card a[href^="https://eeg100"] {
    padding: 5px;
    border-radius: 3px;
    border: 1px solid teal;
    margin: 2px;
    text-decoration: none;
    color: teal;
}

#related_projects img {
	height: 270px;
}

#related_projects sl-card::part(header) {
    flex-grow: 0;
    font-size: large;
    font-weight: 600;
}

#related_projects sl-card::part(body) {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

#related_projects sl-card p:first-of-type {
	flex-grow: 1;
    margin-top: 0;
}


/*  
    REPLICATION PAGE
*/


#replications .card-grid {
    padding-top: 20px;
}

#replications a[href^="https://forms"],
#replications a[href^="https://docs"] {
    padding: 5px;
    border-radius: 3px;
    border: 1px solid teal;
    margin: 2px;
    text-decoration: none;
    color: teal;
}

#replications #authors{
    padding-top: 20px;
    font-size: 14px;
}

#replications sl-card::part(body) {
    display: flex;
    flex-grow: 1;
}

.card-body {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
}

p.stage {
    flex-grow: 1;
}

.card-body p {
    margin-block-start: 0;
}

sl-card::part(footer) {
    border-top: none;
}

/*  
    PEOPLE SECTION
*/

article#people h2 {
    width: 350px;
}

article#people sl-card::part(body) {
    padding: var(--sl-spacing-small) var(--padding);
    height: 48px;
}

article#people sl-card::part(footer) {
    padding: var(--sl-spacing-small) var(--padding);
    height: 56px;
}

#people a[href^="http"] {
    padding: 5px;
    border-radius: 3px;
    border: 1px solid teal;
    margin: 2px;
    text-decoration: none;
    color: teal;
}

#publications sl-tag::part(base) {
    border-radius: 3px;
    color:white;
    font-weight: bold;
}

#people sl-button::part(base) {
    background-color: forestgreen;
    border-color: white;
}

#people sl-button.coordinator::part(base) {
    background-color: teal;
}

#people sl-button.study_lead::part(base) {
    background-color: deepskyblue;
}

#people sl-button.co-investigator::part(base) {
    background-color: rgb(163, 106, 0);
}

#people sl-button.advisor::part(base) {
    background-color: rgb(128, 0, 122);
}

#people sl-button.spin-off::part(base) {
    background-color: darkgray;
}

#people sl-button.founder::part(base) {
    background-color: goldenrod;
}

/*
    PUBLICATIONS PAGE
*/


a.proj-link {
    padding: 5px;
    border-radius: 3px;
    border: 1px solid teal;
    margin: 2px;
    text-decoration: none;
    color: teal;
}


/* CSS for equal sized but reactive cards */

sl-card {
    display:grid;
}

div#card-header {
    display: flex;
    flex-direction: column;
}

div#title {
    flex-grow: 1;
}

sl-select {
    margin-bottom: 10px;
}

article#front {

    section > p {
        padding-bottom: 1.5em;
    }
    
    sl-card::part(header) {
        display: none;
    }
}

/* About section */

#about p {
    padding: 0
}

#about h2 {
    margin-bottom: 0.3em;
}

/* Publications section  */

#publications .card-grid {
    display: block;
}

#publications h2 {
    padding-top: 10px;
}

#publications p:first-of-type {
    padding-bottom: 0;
}

#publications sl-card {
    margin-bottom: 15px;
}

#publications sl-card::part(base) {
    border-width: 2px;
}

#publications sl-card::part(header) {
    display: none;
}

#publications sl-card::part(body) {
    padding: calc(var(--padding)/2) var(--padding);
    background-color: white;
}

#publications sl-button::part(label) {
    font-weight: bold;
}

#publications #title{
    font-size: 18px;
    font-weight: bold;
}

#publications #authors{
    padding-top: 10px;
    font-size: 16px;
}

#publications #journal{
    padding-top: 10px;
    font-size: 14px;
}

#publications #buttons{
    padding-top: 10px;
}

.tag {
    cursor: auto;
}

#publications .preprint::part(base) {
    background-color: rgb(69, 183, 209);
    border-color: rgb(69, 183, 209);
}

#publications .stage1::part(base) {
    background-color: rgb(210, 199, 72);
    border-color: rgb(210, 199, 72);
}

#publications .stage2::part(base) {
    background-color: rgb(5, 147, 27);
    border-color: rgb(5, 147, 27);
}

#publications .published::part(base) {
    background-color: rgb(81, 187, 160);
    border-color: rgb(81, 187, 160);
}

#publications .doi::part(base) {
    border-color: blue;
}

#publications .paper::part(base) {
    border-color: green;
}

#publications .osf::part(base) {
    border-color: orange;
}

#publications .data::part(base) {
    border-color:coral
}

#front sl-card::part(base) {
    padding: var(--padding);
    flex-direction: row;
}

#front sl-card::part(body) {
    padding: 0;
    padding-left: var(--padding);
    flex: 80%;
}

#front sl-card::part(image) {
    flex: 20%;
    align-items: center;
}

#front sl-card > p {
    margin: 0
}

#front sl-card > h1 {
    margin-top: 0
}

#front img[slot="image"] {
    padding: 0;
    max-width: 100%;
}

article#front > p:first-of-type {
    display: flex;
    justify-content: center;
    padding-top: 0;
}

article#front > p > img {
    width: 70%
}

#front a > sl-card::part(base):hover {
    border: solid 1px var(--sl-color-gray-500);
}

.get_involved {
    display: grid;
    grid-template-columns: repeat(auto-fit, 300px);
    column-gap: 30px;
}

#front .get_involved sl-card::part(body) {
    padding: 0;
}

.get_involved h1 {
    font-size: medium;
}

#replications div#title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bolder;
    font-size: larger;
}

#replications sl-card::part(header) {
    display: block;
}

#people #name {
    font-weight: bold;
}

#people #affil {
    font-size: smaller;
}

#people sl-card::part(header){
    display: flex;
    flex-grow: 1;
}

@media screen and (max-width: 768px) {
    nav#menu {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        padding: 0;
    }

    nav#menu a.icon {
        position: absolute;
        right: 0;
        top: 0;
        display: block;
        padding: 1em 1em 0 0;
    }

    nav#menu a sl-icon {
        height: 25px;
        width: auto;
    }

    .topnav {
        display: none;
        flex-direction: column;
        width: 100%;
        padding: 0;
        margin-bottom: 10px;
    }

    .topnav.responsive {
        display: flex;
    }

    .topnav li {
        margin: 0;
        width: 100%;
        text-align: center;
        padding: 8px;
    }

    div#content {
        width: 90%;
    }

    div#body-container {
        margin-top: 70px;
    }

    #front sl-card::part(base) {
        flex-direction: column;
    }

    #front sl-card::part(body) {
        padding-left: 0;
    }

    #front sl-card::part(image) {
        flex: none;
    }

    #front img[slot="image"] {
        padding-bottom: var(--padding);
    }

    #publications #buttons {
        display: flex;
        flex-direction: column;
    }

    #publications sl-button {
        padding-top: 10px;
    }
}