@font-face {
  font-family: 'prata';
  src: url('https://static.igem.wiki/teams/5980/fonts/prata-regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
.content-blue-header{
    font-family: 'prata';
    font-weight: 700;
    color: #165e7e;
    margin-bottom: 1.5vw; }
.content-light-header{
    font-family: 'prata';
    font-weight: 600;
    margin-top: 1.5vw;
    color: #00a6c8; /*#f15523*/  /*#00a6c8*/
    font-size: 1.7rem; }

.content-light-header-2{
    font-family: 'prata';
    font-weight: 600;
    margin-top: 1.5vw;
    color: #00a6c8; /*#f15523*/  /*#00a6c8*/
    font-size: 1.0rem; }


body { 
    padding-top: 56px;
    /*background-color: #f2fbff;
    color: #013042;*/
    overflow-x: hidden;}
.default-body {
    background-color: #f2fbff;
    color: #013042;
}
.gradient-body {
    background-image: linear-gradient(to bottom, #f2fbff 5%, #d4f3ff 20%, #fab1b1 55%, #f2fbff 100%);
}
html {
    scroll-padding-top: 5vw;
}
.left-aligned { 
    margin-left: auto; }


/* MENU */
.bg-dark { 
    background-color: #f2fbff !important; } /*#343a40*/
.menu-text {
    color: #005879;
    font-size: 1.2rem;
    font-weight: bold;
    margin-right: 3vw; } /*2vw*/
.menu-text:hover {
    color: #00A6C8; }
.menu-text[aria-expanded="true"] {
    color: #00A6C8 !important; }
.dropdown-text {
    color: #005879;
    font-size: 1.2rem;
    font-weight: bold; }
.dropdown-text:hover {
    background-color: #ADD8E6; }
.dropdown-box {
    background-color: #549BB6;}
.brand-text {
    color: #005879;
    font-weight: bold;
    margin-left: 5vw } /*4vw*/
.navbar {transition: top 2.5s ease-in-out; }
.navbar-toggler-icon {background-color: #013042; }
.navbar .container {position: relative; }
.navbar-toggler {transition: none !important; }
.navbar-toggler {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
    transition: none !important; }


/*MENU STYLE*/
.virus-image {
    width: 20vw;
    height: auto;
    margin-bottom: -5vw; /*5 rem*/
    z-index: 700;
    top: -5vw;
    left: -7vw;
    position: absolute;}
.navbar {
    position: fixed;
    z-index: 500; }
.rotated-rectangles {
    position: relative;
    height: 12rem;
    margin-bottom: -12rem;
    z-index: 600; 
    pointer-events: none;}
.rectangle {
    position: absolute;
    width: 100vw;
    height: 3rem;
    background-color: #549BB6;
    opacity: 0.2; }
.rect-one {
    top: -6rem;
    left: 0;
    transform: rotate(-2deg); }
.rect-two {
    top: -6rem;
    right: 0;
    background-color: #549BB6;
    opacity: 0.2;
    transform: rotate(2deg); }


/* HEADER */
.bg-hero { 
    background-color: #f2fbff; } /*#45b06cff*/ /*#C5E8F7*/
/*header {
    display: flex;
    justify-content: center;
    align-items: center; }*/
.header-with-logo {
    display: flex;
    align-items: center; 
    justify-content: center;}
.header-title {
    width: 40vw;
    margin-top: 8vw;
    margin-right: 25vw; }

#meet-the-team {width: 45vw; }
#hardware {width: 35vw; }
#software {width: 35vw; }
#project-description {width: 45vw; }
#entrepreneurship {width: 45vw; }
#human-practices {width: 45vw; }
#safety {width: 35vw; }

#attributions {
    width: 45vw;
    margin-left: 15%; }
#results {
    width: 35vw;
    margin-left: 17%; }
#parts {
    width: 28vw;
    margin-left: 19%;}
#model {
    width: 23vw; 
    margin-left: 21%}
#media-impact {
    width: 40vw;
    margin-left: 20%
}

.team-logo {
    position: absolute;
    width: 22vw;
    height: auto;
    right: 0;
    top: 2rem; }


.header-with-logo-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 24vw;
}
.team-logo-1 {
    width: 24vw;
    height: auto;
}
.header-title-1 {
    width: 60%;
    margin-left: 10%
}




 /* INTRODUCTION PAGE */
.intro-centered {
    display: block;
    margin: auto;
    margin-top: 6vw;
    margin-bottom: 6vw; }
.intro-text {
    text-align: center;
    color: #113d4d;
    font-size: 3.5vw; }
.intro-row {
    display: flex;
    justify-content: center;
    align-items: center; }
.intro-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center}

.image-overlay {
    position: relative;
    width: 100%; }
.image-overlay img {
    width: 100%;
    display: block; }
.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #113d4d;
    transform: translate(-50%, -50%);
    font-size: 2.5vw;
    text-align: center;
    width: 65%;
    font-weight: 600; }
.intro-links:hover {
    transform: scale(1.2);
    transition: transform 0.3s ease-in-out; }
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.rotate-continuous {animation: spin 100s linear infinite; }
.pop-image {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.5s ease, transform 0.5s ease; }

.pop-image.visible {
    animation: popIn 0.8s ease-out;
    opacity: 1;
    transform: scale(1); }
@keyframes popIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    60% {
        transform: scale(1.35);
        opacity: 1;
    }
    100% {
        transform: scale(1);
    }
}


/* MEMBERS PAGE */
.members-row {
    padding: 1rem;
    display: flex;
    gap: 5vw;
    justify-content: center; }
.headshot-col {text-align: center; }
.member-name {font-weight: 790; }
.team-role {font-weight: 500; }
.headshots {width: 17vw; }
.sub-heading-div {
    margin-top: 7vw;
    justify-content: center;
    display: flex; }
.pi-heading {width: 45vw; }
.ta-heading {width: 35vw; }
.support-heading {width: 15vw; }
.support-div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    align-items: stretch; }
.support {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;  
    padding: 1rem;
    width: 40vw;
    height: auto; }
.vertical-line {
  width: 3px;
  background-color: grey; }
h3 {font-size: clamp(1rem, 2vw, 2rem); }
h4 {font-size: clamp(0.8rem, 1.5vw, 1.2rem); }


/* MAIN CONTENT*/
.content-layout {
    margin-top: 5vw;
    display: flex; }
.sidebar-nav {
    width: 20vw;
    height: 25vw;
    position: fixed;
    left: 0;
    top: 0;
    margin-top: 13vw; 
    margin-right: 2vw;
    display: flex;
    flex-direction: column;
    justify-content: center; 
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
    z-index: 1000; }
.sidebar-nav.visible {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto; }
.main-content {
    width: 100%;
    height: auto;
    color: #013042;
    background-color: aliceBlue; /*#BBDEF0*/
    padding: 2vw;
    border-radius: 1vw;
    margin-left: 13vw; }
.horizontal-line {
    width: 100%;
    height: 1px;
    background-color: #013042;
    margin-bottom: 1vw; }
.sidebar-row {
    display: flex;
    align-items: center;
    margin-bottom: 1rem; }
.virus-bullet {
    margin-right: 1px;
    width: 3vw; }
.sidebar-text {
    font-size: 1.2vw;
    color: #013042;
    text-decoration: none; }
.sidebar-text:hover {
    color: #005879;
    font-weight: bold; }


/* CONTRIBUTIONS */
.contribution-headers {width: 60%; }
#contribution-parts {width: 20%; }
#contribution-pamphlets {width: 70%; }
p {font-size: 1.2rem; }
.more-details {width: 50%; }
.contribution-buttons {
    background-color: #005879;
    color: #f2fbff;
    font-weight: bold;
    width: 50%;
    padding: 1.5rem;
    text-align: center;
    font-size: 1.7rem;
    border-radius: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    text-decoration: none; }

.contribution-buttons:hover {
    background-color: #006b94;
    color: #BBDEF0; }


/* COLLABORATIONS */
.collaborations-headers {width: 60%; }
.collaborations-mini-headers {width: 50%; }
.collaborations-centered {
    display: block;
    margin: 0 auto; }
li {font-size: 1.2rem; }
.pdf {
    background-color: lightGray;
    color: black;
    font-weight: bold;
    width: 50%;
    padding: 1.5rem;
    text-align: center;
    font-size: 1.7rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    margin-bottom: 2vw;
    text-decoration: none; }
.pdf:hover {background-color: gainsboro; }


/* SUSTAINABILITY */
.sus-headers {width: 70%; }
.sustainability-headshot {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center; }
  table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 8px;
    font-weight: 500; }


/* HUMAN PRACTICES */
.hp-row {
    margin-top: 3vw;
    display: flex;
    align-items: center; 
    justify-content: center;
    gap: 2vw; }
.hp-headshot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; }
.hp-info {
    background-color: #005879;
    color: #f2fbff;
    border-radius: 2rem;
    padding: 1rem;
    max-width: 70%
}
.hp-centered {
    display: block;
    margin: 0 auto; }
.hp-small-font {
    font-size: 15px;
}

/* HARDWARE */
.hardware-right {
    float: right;
}

/* EDUCATION */
.array {
    display: flex;
    justify-content: center;
    gap: 1rem;
  }
  
  .c {
    flex: 0 0 33.333%;
    text-align: center;
    box-sizing: border-box;
  }
  
  .c img {
    width: 100%;
    height: auto;
    display: block;
  }

/* PARTS */
.parts-centered {
    display: block;
    margin: 0 auto; 
    border-radius: 1vw;
    border-style: solid;
    border-color: #005879; }
.parts-links {color: #005879; }
.parts-links:hover {color: #00a6c8; }

/* ENGINEERING */
.eng-centered {
    display: block;
    margin: 0 auto;
    border-style: solid;
    border-color: #005879; }

/* PROTOCOLS */
.protocols-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3vw;
    margin-bottom: 5vw; }

/* SOFTWARE */
.software-button {
    background-color: #005879;
    color:#f2fbff;
    width: 40%;
    border-radius: 1rem;
    display: flex;
    margin: 0 auto;
    padding: 1vw;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold; }
.software-button:hover {background-color:#006b94; }


/* ENTREPRENUERSHIP */
.ent-circles {
    background-color: #ffca05;
    color: #f15523;
    border-radius: 100rem;
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    font-size: 1.3rem;
    margin: 0 auto;
    margin-bottom: 1vw
}


/* CALLOUT */
.bd-callout { 
    padding:1.25rem; 
    margin-top:1.25rem; 
    margin-bottom:1.25rem; 
    border:1px solid #e9ecef; 
    border-left-width:.25rem; 
    border-radius:.25rem }
.bd-callout h4 { 
    margin-bottom: 1.25rem }
.bd-callout p:last-child { 
    margin-bottom:0 }
.bd-callout code { 
    border-radius:.25rem }
.bd-callout+.bd-callout { 
    margin-top:-.25rem }
.bd-callout-info { 
    border-left-color:#5bc0de }
.bd-callout-warning { 
    border-left-color:#f0ad4e }
.bd-callout-danger { 
    border-left-color:#d9534f }

/* footer */
footer .container-fluid{
    background-color: white !important; /*#d4f3ff*/
    color: #005879;
    padding: 1vw;
    width: 100%;
    margin-top: 5vw;
    overflow-x: hidden;}
footer a { 
    color: #005879;
    font-weight: bold; 
    text-decoration: none; }
.footer-header {
    font-weight: 700; }
.footer-a:hover {
    color: #013042; 
    text-decoration: underline; }
.footer-info {
    display: flex;
    text-align: center; }
.footer-nav {
    display: flex;
    justify-content: center;
    min-width: 75%;
    gap: 2vw; }
.footer-sponsors {width: 100%; }
.footer-column {text-align: left; }
.footer-rows {
    display: flex;
    margin-bottom: 1vw;
    justify-content: center;
    gap: 1px;
    align-items: center; }


@media (max-width: 768px) {
    .footer-info, .footer-nav, .footer-rows {
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%; }

    .footer-links, .footer-nav, .footer-sponsors, .footer-column {
        width: 100%;
        margin-bottom: 1rem;
        text-align: center; }

    .footer-rows {
        flex-wrap: wrap;
        padding: 0 1rem; }
}