/* Global Styling */
html {
    height: 100%;
}
header {
    height: 10vh;
    /* margin-bottom: 1.5%; */
}
body {
    height: 100%;
    margin: 0;
    background-color: #ffffff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* font-family: 'lato'; */
    overflow: auto;
}
footer {
    bottom: 0;
    width: 100%;
    height: auto;
    padding: 1vh 3vw;
    background-color: #030303;
    font-size: clamp(0.5rem, 0.8rem, 2rem);
}

/* HEADER STYLING */
header {
    border-bottom: 0.5vh solid transparent;
    /* border-image: linear-gradient(0.25turn, #006EB3, #00AA8B); */
    border-image-slice: 1;
    height: auto;
    /* padding-bottom: 1rem;
    padding-top: 1rem; */
}

#top_header {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0vh 1vh; 
}

.title_row {
    width: 100%;
    padding: 0vh 1vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .title_link, #menu_icon {
        z-index: 100;
    }
}
/* Action tag containing the svg element */
.title_link {
    display: inline-block;
    line-height: 0;
    padding: 0;
    width: 20vw;
}

.title_link svg {
    display: block;
    /* width: 100%; */
    /* height: 50%; */
    object-fit: contain;
}

.burger {
    width: 3.5vw;
    height: 3vh;
    position: relative;
    display: inline-block;
    border: none;
    background: none;
    z-index: 100;
    cursor: pointer;
    margin: 3vh 0vh;
    span {
        position: absolute;
        width: 100%;
        height: 0.25vw;
        background-color: black;
        left: 0;
        transition: all 0.3s ease;
    }
}
.burger span:nth-child(1) { top: 0; }
/* Span 2 and 3 are slightly off centered to account for line widths */
.burger span:nth-child(2) { top: 40%; }
.burger span:nth-child(3) { bottom: 8%; }

.burger:hover span {
    background-color: rgb(192, 225, 255) !important;
}

.burger.active {
    span:nth-child(1) {
        transform: rotate(45deg);
        top: 50%; /* Move to the Middle */
    }
    span:nth-child(2) {
        opacity: 0; /* Hide bar */
    }
    span:nth-child(3) {
        transform: rotate(-45deg);
        top: 50%;
    }
}

#menu.hidden {
/* No styling for hidden elements */
}

#menu {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    position: fixed;
    z-index: 5;
    top: 0;
    transform: translateX(100%);
    transition: all 0.5s ease;
}
#menu:not(.hidden) {
    transform: translateX(0);
}

#flexbox {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
}
#split_menu_div {
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(22deg, #84dbf5bf, #95e594);
}
#page_links {
    background: white;
    width: 50%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 15vh 1.5vw 25vh 0vh;
}

#page_links a {
    position: relative;
    text-decoration: none;
    color: #9f9f9f;
    /* font-size: calc(0.5rem + 4vh); */
    font-size: clamp(0.8rem, 5vw, 7vw);
    margin-right: 0;
    margin-left: auto;
}

#page_links a:hover {
    color: #282c2e;
}

#page_links a::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #000;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

#page_links a:hover::before {
transform: scaleX(1);
}

/* ***************************** */
/* HOME PAGE PUBLICATION STYLING */
/* ***************************** */
#home_pg_pub_header {
    font-size: clamp(3vw, 5vw, 10vw);
    font-style: italic;
}
#home_pg_pub_a_div {
    text-decoration: none;
}
#home_pg_pub_div p, #home_pg_pub_div span,
#home_pg_pub_div hr {
    color: #493f3f;
}

#home_pg_pub_a_div:hover #home_pg_pub_div p,
#home_pg_pub_a_div:hover #home_pg_pub_div span {
    color: rgb(0, 92, 128);
}

#home_pg_pub_title {
    font-size: clamp(0.8rem, 2vw, 3vw);
}

#pub_authors_and_date {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
#home_pg_pub_date {
    text-align: right;
}

/* ************** */
/* FOOTER STYLING */
/* ************** */
.footer_links {
    padding-top: 1%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sub_footer_div {
    width: auto;
    padding: 0 1vw;
    flex: 1 0 0; /* Sub divs share space evenly*/
    text-align: center;
}

.sub_footer_div span,
.sub_footer_div a, #charlie_email {
    text-decoration: none;
    color: #fff;
}

.sub_footer_div a:hover, #charlie_email:hover {
    text-decoration: underline;
}

.extra_footer_text {
    padding-top: 3%;
    text-align: center;
    align-items: center;
    align-content: center;
    padding-bottom: 1%;
}
.extra_footer_text p, .extra_footer_text p a {
    color: #777777;
}

/* GLOBAL PAGE CONTAINER DIV */
.whole_page_div {
    margin-left: 5%;
    margin-right: 5%;
}

.form-inline {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    width: 100%;
    justify-content: space-between;
}

/* ************ */
/* MEMBERS PAGE */
/* ************ */
img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}
/* Andrew's Section */
#andrew_div {
    display: inline-flex;
    margin-top: 1vh;
    margin-bottom: 2%;
}
.picture_box.andrew {
    display: flex;
    height: 30vw;
    width: 30vw;
    float: left;
    margin-right: 0;
}
.andrew_info {
    width: 70%;
    margin-left: 3rem;
    float: right;
}
.andrew_name {
    font-size: clamp(0.8rem, 5vw, 8rem);
    font-weight: bold; 
    vertical-align: text-top;
}
.andrew_title {
    font-style: italic;
    font-size: clamp(0.8rem, 2.75vw, 4rem);
    color: #493f3f;
    margin-bottom: 0;
}
.andrew_description {
    font-size: clamp(0.5rem, 2vw, 2rem);
    color: #493f3f;
    margin-bottom: 1vh;
}
.andrew_links {
    margin-bottom: 1vh;
}
.andrew_links a {
    color: black;
    font-size: clamp(0.5rem, 1vw, 2rem);
    margin-bottom: 1vh;
}

#member_pic_row {
    justify-content: space-around;
}
#profile_pic_div {
    aspect-ratio: 1 / 1; /* Always square */
    width: 100%;  
    /* overflow: hidden; */
    position: relative; 
}
#profile_pic {
    filter: drop-shadow(0.7vw 0.7vw rgba(0, 110, 179, 0.5)); /* Adds a second backing shadow to the image */
}
#member_info, #alumni_info {
    display: flex;
    flex-direction: column;
}
#alumni_info span {
    transition: all 0.3s ease;
}
#alumni_info:hover span {
    color: #51d4a0ce;
}
#member_name, #alumni_name {
    font-size: clamp(0.8rem, 2vw, 3rem);
    font-weight: bold;
    text-align: left;
    color: #493f3f;
}
#member_position, #alumni_position {
    font-size: clamp(0.75rem, 1vw, 2.5rem);
    font-style: italic;
    text-align: left;
    color: #493f3f;    
}

/* Members Tab Buttons */
#tab-buttons {
    margin: 2vh 0 4vh 0;
}
#tab_btn_li {
    padding-left: 2vw;
}

.nav-pills .nav-link {
    display: block;
    font-size: clamp(0.5rem, 1.5vw, 3rem);
    font-weight: bold;
    color: black;
    border: 2px solid;
    border-radius: 10px;
    transition: all 0.5s ease-out;
}

.nav-pills .nav-link.members {  
    border-color: #00aa8b80;  
    background: linear-gradient(to right, #00aa8b80 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all 0.5s ease-out;
}
.nav-pills .nav-link.alumni {  
    border-color: #006eb380;
    background: linear-gradient(to right, #006eb380 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all 0.5s ease-out;
}  
  
.nav-pills .nav-link.members.active {
    background-color: #00aa8b80;
    box-shadow: 0 0 2px 2px #00aa8b50;
}  

.nav-pills .nav-link.alumni.active {
    background-color: #006eb380;
    box-shadow: 0 0 2px 2px #006eb350;
}
 
.nav-pills .nav-link:hover {
    background-position: left bottom;
    color: #FAF9F6;
}

/* ***************** */
/* Publications Page */
/* ***************** */
.pub_page_header {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 1%;
}
.header_text {
    font-size: clamp(3vw, 5vw, 10vw);
    font-style: italic;
}
.pub_buttons {
    width: 65vw;
}
.pub_nav_li {
    padding-left: 2vw;
}

/* ********************** */
/* For Pagination Buttons */
/* ********************** */
.pagination {
    margin-top: 1%;
    margin-bottom: 1%;
    margin-left: auto;
    margin-right: 0px;
    max-width: 100%;
}
  
.pagination a {
    color: rgb(12, 18, 49);
    float: left;
    padding: 1% 3%;
    text-decoration: none;
    border-radius: 5px;
}

.pagination a.active {
    background-color: #00BC72;
    color: white;
    border-radius: 5px;
}

.pagination a:hover:not(.active) {
    background-color: #ddd;
    border-radius: 5px;
}

.step-links {
    width: 100%;
    display: flex;
    justify-content: center;
}

#emdb_page_btns {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: xx-small;
    text-align: center;
}

/* ******************* */
/* Abstract Images CSS */
/* ******************* */
.abstract_img {
    width: 50%;
    height: 50%;
    border: 0.5vw solid #FAF9F6;
    box-shadow: 0 0 0.5vw black;
}

/* ***************** */
/* EMDB CARD STYLING */
/* ***************** */
.card-front {
    transform: rotateX(0deg);
}

.card-front, .card-back {
    backface-visibility: hidden;
}

.col-4:hover .card.emdb{
    transform: rotateY(-180deg);
}

#emdb-card-header {
    border: none;
    background-color: transparent;
    padding: 0;
}
#emdb-card-title {
    font-size: clamp(1rem, 1.5vw, 5rem);
    text-overflow: clip; 
    white-space: nowrap;
}

.card-footer {
    border: none;
    background-color: transparent;
}
#emdb_card_footer {
    display: flex;
    justify-content: right;
    width: 100%;
    font-size: clamp(0.7rem, 1vw, 3rem);
    text-overflow: clip;
    white-space: nowrap;
}

.card-back {
    position: absolute;
    top: 1%;
    bottom: 1%;
    left: 1%;
    right: 1%;
    transform: rotateY(-180deg);
}

/* ************ */
/* Lab Tour CSS */
/* ************ */
.tour_nav {
    width: 75%;
    display: flex;
    justify-content: space-between;
}

.tour_nav a {
    position: relative;
    text-decoration: none;
    color: #595959;
    font-size: calc(0.5rem + 0.75vw);
}

.tour_nav a:hover {
    /* color: #282c2e; */
    color: #fffefe;
    text-shadow: 4px 4px 7px #606873;
}

.tour_nav a::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #FAF9F6;
    transform: scaleX(0);
    transition: transform 0.3s ease;
  }

  .tour_nav a:hover::before {
    transform: scaleX(1);
  }

.tour_nav a::first-letter {
    font-size: 1.35em;
    line-height: 1;
}

.tour_subgroup {
    margin-bottom: 3%;
}

.tour_subheader {
    position: relative;
    left: 5%;
    font-size: calc(0.5rem + 1.5vw);
    text-decoration: underline;
    text-decoration-thickness: 0.5px;
}

#carousel_descriptor {
    visibility: hidden;
}

#subgroup_carousel_item:hover #subgroup_img {
    -webkit-filter: brightness(50%);
}

#subgroup_carousel_item:hover #carousel_descriptor {
    visibility: visible;
}