/* font */
@font-face { 
  font-family: 'Centrale Sans Regular', sans-serif; 
  src: url('https://fonts.cdnfonts.com/css/centrale-sans-regular');
  }
body { 
  padding-top: 0px; 
  font-family: 'Centrale Sans Regular', sans-serif;
  }
.left-aligned { 
  margin-left: auto; 
  }
p { 
  text-align: justify; 
  }
hr {
  background-color: #e6d7a5; 
  opacity: 1;
  }
table { 
  width: max-content;
  border-collapse: collapse; 
  border: .5px solid rgb(0, 0, 0);
  margin-top: .5rem;
  margin-bottom: .5rem;
}
table th {   
  border-collapse: collapse; 
  border: .5px solid black;
  padding: .5rem;
}
table td {   
  border-collapse: collapse; 
  border: .5px solid black;
  padding-left: .5rem;
  padding-right: .5rem;
}
.quote { 
  font-size: 1.5rem;
  font-style: italic;
  color: #ed9b00;
  text-align: center;
}

.quote-HP { 
  font-size: 1rem;
  font-style: italic;
  color: #ed9b00;
  text-align: center;
}

.img-border {
  display: block;
  margin-right: 7rem;
  margin-left: 3rem;
  margin-bottom: 1rem;
  border-left: #94d2bd;
  border-left-width: 1rem;
  border-left-style: solid;
}
.bottom-page {
  border-left: #94d2bd;
  border-left-width: 1rem;
  border-left-style: solid;
  margin-bottom: 4rem;
  margin-left: 3rem;
  padding-left: 1rem;
  margin-top: 2rem;
}
.bottom-page a {
  text-decoration: none;
  color: #ed9b00;
}
.bottom-page a:hover {
  text-decoration: underline;
}

/* header */
.bg-hero { 
  background-color: rgb(11, 30, 40); 
  opacity: 0.95;
  padding-left: 5rem; 
  padding-right: 5rem;
  }
.headertitle { 
  background-color: #e6d7a5; 
  color: rgb(11, 30, 40); 
  font-size: 2rem; 
  font-weight: bolder; 
  padding-left: 7rem;
  }
.headerabstract { 
  background-color: rgb(11, 30, 40); 
  opacity: 0.95;
  color: white; 
  margin: 2rem; 
  border-radius: 1rem; 
  padding: 10rem; 
  text-align: justify; 
  margin-left: 7rem; 
  margin-right: 7rem;
  }
.headerline { 
  background-color: #e6d7a5; 
  margin-top: 2rem;
  position: sticky !important;
  position: -webkit-sticky !important;
  top: 3rem !important;
  z-index: 99;
  }
.home-header {
  font-size: 8rem;
  text-align: center;
  }

/* navbar */
.navbar { 
  position: fixed !important
  }
.nav-link { 
  color: rgb(245, 245, 245) !important; 
  font-family: 'Centrale Sans Regular', sans-serif !important; 
  font-size: 1rem !important; 
  margin-right: 0.5rem !important 
  }
.navbar-unscrolled { 
  transition: all 0.75s 
  }
.navbar-scrolled { 
  background-color: rgb(11, 30, 40);
  }
.dropdown-menu { 
  border-radius:1rem !important;
  border: none !important;
  box-shadow: inset 0 -0.3rem 0 #ed9b00, 0.05rem 0 0.1rem rgb(230, 230, 230);
  }
.dropdown-menu a { 
  text-decoration: none;
  }
.dropdown-menu a:hover { 
  font-weight: bold;
  background-color: transparent !important; 
  }
.dropdown { 
  transition: all 0.5s !important 
  }
.dropdown:hover .dropdown-menu { 
  display: list-item !important;
  }

/* footer */
footer { 
  background-color: rgb(11, 30, 40) !important; 
  opacity: 0.95;
  margin-top: 2rem;
  }
footer a { 
  color: white; 
  text-decoration: none; 
  }
footer a:hover { 
  color: white; 
  text-decoration: underline; 
  }
footer hr { 
  height: 2px !important; 
  }
.slogan { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  }
.footer-slogan { 
  color: #94d2bd; 
  font-size: 1.5rem; 
  margin-right: 1.5rem; 
  }
.footer-license { 
  text-align: center; 
  font-size: .75rem; 
  } 
.sponsors { 
  display: flex; 
  align-items: center; 
  justify-content: center;
  }
.sponsors img { 
  padding-left: 2rem; 
  padding-right: 2rem;
  }
#social_media_links { 
  display: flex; 
  margin-left: 1.5rem;
  }
#social_media_links a { 
  display: inline; 
  outline: none; 
  position: relative; 
  margin: min(2%, 15px); 
  width: 3rem; 
  padding: .1rem; 
}
#social_media_links a svg { 
  width: inherit; 
  }
#social_media_links a svg path { 
  fill: #e6d7a5; 
  transition: 0.2s; 
  }
#social_media_links a:hover svg path { 
  fill: #94d2bd; 
  }

/* read more button java */
.read-more-btn { 
  background-color: rgb(11, 30, 40); 
  opacity: 0.95;
  padding-left: 4rem; 
  padding-top: 1rem; 
  padding-bottom: 1rem; 
  border-radius: 1rem; 
  width: 100%; 
  color: white; 
  cursor: pointer; 
  outline: none; 
  border: none; 
  text-align: left; 
  box-shadow: inset 3rem 0 0 #e6d7a5;
  margin-bottom: .2rem;
  }
.read-more-btn:hover, .read-more-btn-clicked { 
  box-shadow: inset 3rem 0 0 #94d2bd;
  }
.more-text { 
  display: none; 
  }
.more-text-clicked { 
  display: inline; 
  padding-top: 1.25rem; 
  padding-left: 1rem; 
  padding-right: 1rem;
  }
  .more-text-clicked hr {
    background-color: #ed9b00;
    height: .2rem;
  }

.main-protocols {  
  margin-top: 2rem 
  }
.protocols { 
  margin-bottom: 1.5rem;
  }

/* side bar */
.main { 
  padding-left: 1rem; 
  width: 75%; 
  margin-right: 7rem; 
  margin-left: 1.25rem; 
  margin-top: 2rem
  }
.section-under-main { 
  scroll-margin-top: 5rem 
  }
.wrapper { 
  display:flex; 
  justify-content: space-between; 
  }
.sidenav { 
  width: 20%; 
  padding: 1.25rem; 
  position: sticky; 
  position: -webkit-sticky; 
  border-radius: 1rem; 
  background-color: rgb(11, 30, 40); 
  opacity: 0.95;
  top: 7rem; 
  margin-left: 7rem; 
  height: fit-content; 
  margin-top: 2rem
  }
.sidenav a { 
  padding: .25rem; 
  text-decoration: none; 
  font-size: 1rem; 
  display:block; 
  color: white; 
  font-size: 1rem;
  margin-bottom: .5rem;
  }
.sidenav a:hover { 
  border-left-color: #ed9b00;
  border-left-width: .1rem;
  border-left-style: solid;
  }
.section-under-main h3 { 
  scroll-margin-top: 6rem;
  }

.section-under-main p a {
  color: #ed9b00;
  text-decoration: none;
}

.section-under-main p a:hover {
  text-decoration: underline;
}

.jellyfish {
  width: 15%; 
  margin-left: 7rem; 
}
.protocol-section {
  width: 70%; 
  margin-right: 7rem;
  margin-left: 1.5rem
}

/* Add a media query to hide the sidebar below a certain screen width */
@media (max-width: 768px) {
    .wrapper { flex-direction: column; /* Stack items vertically */ }
    .sidenav { display: none; /* Hide the sidebar */ }
  }

/* tabs menu design */
/* Component Needs */
@-webkit-keyframes fadeInRight {
    0% {
     opacity:0;
     -webkit-transform:translateX(20px)
    }
    100% {
     opacity:1;
     -webkit-transform:translateX(0)
    }
   }
   @-moz-keyframes fadeInRight {
    0% {
     opacity:0;
     -moz-transform:translateX(20px)
    }
    100% {
     opacity:1;
     -moz-transform:translateX(0)
    }
   }
   @-o-keyframes fadeInRight {
    0% {
     opacity:0;
     -o-transform:translateX(20px)
    }
    100% {
        opacity:1;
        -o-transform:translateX(0)
       }
      }
      @keyframes fadeInRight {
       0% {
        opacity:0;
        transform:translateX(20px)
       }
       100% {
        opacity:1;
        transform:translateX(0)
       }
      }
      .pc-tab > input,
      .pc-tab section > div {
        display: none;
      }
      
      #tab1:checked ~ section .tab1,
      #tab2:checked ~ section .tab2,
      #tab3:checked ~ section .tab3,
      #tab4:checked ~ section .tab4,
      #tab5:checked ~ section .tab5 {
        display: block;
      }

      #tab1:checked ~ section > div .col-lg-8,
      #tab2:checked ~ section > div .col-lg-8,
      #tab3:checked ~ section > div .col-lg-8,
      #tab4:checked ~ section > div .col-lg-8,
      #tab5:checked ~ section > div .col-lg-8{
        animation-duration: 0.5s;
        animation-name: fadeInRight;
      }

/* Visual Styles */

.pc-tab nav { 
  background-color: #e6d7a5; 
  width: 100%; 
  margin: 0; 
  padding-top: .2rem; 
  padding-bottom: .3rem;
  }
.pc-tab-layout { 
  list-style: none; 
  display: flex; 
  justify-content: right; 
  margin-right: 7rem; 
  margin-bottom: 1rem; 
  margin-top:.5rem 
  }
.pc-tab-layout li label {
    padding: 1rem 4rem;
    border-radius: 1rem;
    background: rgb(11, 30, 40);
    opacity: 0.95;
    color: white;
    text-align: center;
    cursor: pointer;
    margin-left: 2rem;
  }
.pc-tab-layout li label:hover { 
  box-shadow: inset 1rem 0 0 #ed9b00;
  }
.pc-tab-layout li label:active { 
  box-shadow: inset 1rem 0 0 #ed9b00;
  }
.pc-tab-layout li:not(:last-child) label { 
  border-right-width: 0; 
  }
.pc-tab section { 
  clear: both; 
  }
.pc-tab section .tab-content { 
  display: none; 
  }
.pc-tab input[type="radio"]:checked + nav li label { 
  background: rgb(11, 30, 40); 
  position: relative; 
  }
.pc-tab input[type="radio"]:checked + nav li label:hover { 
  position: relative; 
  box-shadow: inset 1rem 0 0 #ed9b00;
  }
.pc-tab input[type="radio"]:checked + section .tab-content { 
  display: block; 
  }
  /* Add styles for the tab content */
  #tab1:checked ~ section #content1,
  #tab2:checked ~ section #content2,
  #tab3:checked ~ section #content3,
  #tab4:checked ~ section #content4 {
    display: block;
    }

/* Clickme button for switching images */
#clickme {
  width: 15rem;
  background-color: white;
  cursor: pointer; 
  outline: none; 
  border: none; 
  margin-bottom: 2rem;
  padding-left: 1rem;
  padding-top: .5rem;
  padding-bottom: .5rem;
  margin-left: 3rem;
  text-align: left;
  border-left: #94d2bd;
  border-left-style: solid;
  border-left-width: 1rem;
}
#clickme:hover {
  border-left: #ed9b00;
  border-left-style: solid;
  border-left-width: 1rem;
}

/* engineering page */
.engineering-intro {
  margin-top: 2rem;
  margin-right: 7rem;
  width: 60%;
}
.beaker {
  margin-top: 2rem;
  margin-left: 7rem;
  width: 40%;
}
.beaker-header3 {
  text-align: right;
  color: rgb(11, 30, 40);
  font-size: 2rem;
  font-style: italic;
  margin-right: 10rem;
  font-weight: bold;
}
.beaker-header2 {
  width: 60%;
  color: #ed9b00;
  font-size: 2rem;
  font-style: italic;
  margin-right: 7rem;
}
.beaker-header{
  text-align: right;
  color: #ed9b00;
  font-size: 2rem;
  font-style: italic;
  margin-right: 10rem;
}
.box {
  display: flex;
  align-items:center;
}
.design1 {
  margin-left: 7rem;
  margin-right: 7rem;
  border-style: solid;
  border-width: .5rem;
  border-color: #94d2bd;
  padding-top: 1rem;
  padding-bottom: 2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  border-radius: 2rem;
  background-color: #f2f7f5;
  margin-bottom: 1rem;
  margin-top: 2rem;
  padding-top: 2rem;
}
.hyperlink {
  border-left: #ed9b00;
  border-left-style: solid;
  border-left-width: 1rem;
  margin-left: 1rem;
  padding-left: 1rem
}
.hyperlink a {
  text-decoration: none;
  color: #ed9b00;
}
.hyperlink a:hover {
  text-decoration: underline;
}
.build1 {
  margin-left: 7rem;
  margin-right: 1rem;
  border-style: solid;
  border-width: .5rem;
  border-color: #ed9b00;
  border-radius: 2rem;
  padding-top: 2rem;
  padding-bottom: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
  width: 50%;
}
.build2 {
  margin-right: 7rem;
  padding-top: 2rem;
  padding-bottom: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
  width: 50%;
}
.test1 {
  margin-right: 7rem;
  border-style: solid;
  border-width: .5rem;
  border-color: rgb(11, 30, 40);
  border-radius: 2rem;
  padding-top: 2rem;
  padding-bottom: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
  width: 50%;
}
.test2 {
  border-style: solid;
  border-width: .5rem;
  border-color: rgb(11, 30, 40);
  border-radius: 2rem;
  padding-top: 2rem;
  padding-bottom: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
  margin-right: 7rem;
  margin-left: 7rem;
  margin-top: 1rem;
}
.learn1 {
  border-style: solid;
  border-width: .5rem;
  border-color: #e6d7a5;
  border-radius: 2rem;
  padding-top: 2rem;
  padding-bottom: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
  margin-right: 7rem;
  margin-left: 7rem;
  margin-top: 1rem;
  margin-bottom: 5rem;
  background-color: #f9f7f0;
}
.protein {
  margin-left: 20rem;
  margin-right: 20rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* parts */
.parts {
  margin-bottom: 2rem;
}
.parts table {
  margin-left: auto;
  margin-right: auto;
  border: 2px solid white;
  width: 100%;
  height: 100%;
}
.parts table tr td a {
  color: #ed9b00;
}

/* model */
.gif {
  margin-left: 2rem;
  margin-right: 2rem;
}

/*notebook*/
.notebooks {
  margin-left: 7rem;
  margin-right: 7rem;
  margin-top: 2rem;
  margin-bottom: 4rem;
}
.logs1 {
  background-color: rgb(11, 30, 40);
  opacity: 0.95;
  border-radius: 2rem;
  padding: 2rem;
  width: 30%;
  color: white;
}
.logs2 {
  background-color: rgb(11, 30, 40);
  opacity: 0.95;
  border-radius: 2rem;
  padding: 2rem;
  width: 30%;
  color: white;
}
.logs3 {
  background-color: rgb(11, 30, 40);
  opacity: 0.95;
  border-radius: 2rem;
  padding: 2rem;
  width: 30%;
  color: white;
}
.logs1 a {
  text-decoration: none;
  color: #ed9b00;
}
.logs1 a:hover {
  text-decoration: underline;
}
.logs2 a {
  text-decoration: none;
  color: #ed9b00;
}
.logs2 a:hover {
  text-decoration: underline;
}
.logs3 a {
  text-decoration: none;
  color: #ed9b00;
}
.logs3 a:hover {
  text-decoration: underline;
}
.ocean {
  margin-left: 7rem;
  margin-right: 7rem;
}


.attribution {
  margin-left: 7rem;
  margin-right: 7rem;
}
.assay {
  margin-left: 5rem;
  margin-right: 5rem;
}
.lumi {
  margin-left: 7rem;
  margin-right: 7rem;
  margin-top: 2rem; 
  margin-bottom: 4rem;
}

/* home */
.home-page {
  margin-left: 10rem;
  margin-right: 10rem;
  margin-top: 5rem;
  margin-bottom: 5rem;
}
.home-page hr {
  height: .5rem;
  background-color: #e6d7a5
}
.sub-head {
  width: 50%;
  font-size: 1.7rem;
  font-style: italic;
  color: #ed9b00;
  text-align: center;
  padding-right: 2rem;
  padding-bottom: 1rem;
  padding-top: 1rem;
  margin-bottom: 4rem;
}
.sub-head2 {
  width: 50%;
  font-size: 1.9rem;
  font-style: italic;
  color: #ed9b00;
  text-align: center;
  padding-left: 2rem;
  padding-bottom: 1rem;
  margin-bottom: 4rem;
}
.note {
  width: 50%;
  margin-bottom: 4rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.note2 {
  width: 30%;
  margin-bottom: 4rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 1.9rem;
  font-style: italic;
  color: #ed9b00;
  text-align: center;
}
.head-img {
  width: 70%;
  margin-bottom: 4rem;
}
.vid {
  text-align: center;
  margin-top: 2rem;
}

@media screen and (max-width: 600px){
  .card-grid {
     padding: 20%;
     }
}

.card{
  list-style: none;
  position: relative;
  z-index: 0;
  border: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  max-width: 250px;
  border-radius: 24px;
  background-color: transparent;
}

.card:before{
  content: '';
  display: block;
  padding-bottom: 150%;
  width: 100%;
}

.card__background{
  background-size:cover;
  background-position: center;
  border-radius: 24px;
  bottom: 0;
  filter: brightness(0.95) saturate(1.2) contrast(0.9);
  left: 0;
  position: absolute;
  z-index: 1;
  right: 0;
  top: 0;
  transform-origin: center;
  transform: scale(1) translateZ(0);
  transition: 
    filter 200ms linear,
    transform 200ms linear;
}

.card:hover .card__background{
  transform: scale(1.05) translateZ(0);
  filter: brightness(0.7) saturate(1.2) contrast(0.85);
}

.card-grid:hover > .card:not(:hover) .card__background{
  filter: brightness(0.4) saturate(1.2) contrast(.7) blur(7px);
  border-radius: 24px;
}

.card__content{
  left: 0;
  padding: 20px;
  position: absolute;
  top: 58%;
  z-index: 3;
}

.card:hover .card__content{
  top: 3%;
  z-index: 1;
  transition: .4s;
}

.card__category{
  color: rgba(255,255,255,0.7);
  font-size: 1.3rem;
  margin-bottom: 3px;
  text-transform: uppercase;
  text-justify: none;
}

.card__category2{
  color: white;
  font-size: 1rem;
  margin-bottom: 3px;
  text-transform: uppercase;
  text-justify: none;
}

.card__heading{
  color: rgba(255,255,255,0.9);
  font-size: 1.5rem;
  text-shadow: 2px 2px 20px rgba(0,0,0,0.2);
  line-height: 0.8;
  word-spacing: 1vw;
  padding-bottom: 1rem;
  text-justify: none;
}

.card__caption{
  color: transparent;
  font-size: 0.9rem;
  font-weight: lighter !important;
  line-height: 1;
  padding-top: 4px;
  hyphens: auto !important;
  text-justify: none;
}

.card:hover .card__caption{
  color: white;
  text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.40);
  transition: 1.3s;
}

.card__caption__header{
  color: transparent;
  font-size: 0.9rem;
  font-weight: bold !important;
  line-height: 1;
  padding-top: 4px;
  hyphens: auto !important;
}

.card:hover .card__caption__header{
  color: rgba(255,255,255,0.9);
  text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.40);
  transition: 1.3s;
}
/*style CARDS end*/

.team-photos{
  margin-top: 4rem;
  margin-bottom: 4rem;
  margin-left: 7rem;
  margin-right: 7rem;
}

.full-vw-image {
  width: 100vw; 
  height: auto; 
  display: block; 
}

.HP-question {
  padding-right: 1rem;
  padding-left: 1rem;
  margin-left: 4rem;
  margin-bottom: 2rem;
  margin-top: 2rem;
  border-left-color: #94d2bd;
  border-left-width: 1rem;
  border-left-style: solid;
}

.card-grid,
.card-grid-HP-S1,
.card-grid-HP-S2-S3,
.card-grid-HP-S4 {
  width: 100%;
  gap: 30px;
}

.card-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  display: grid;
}

.card-grid-HP-S1 {
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* Display 5 cards per row */
  display: grid;
  gap: 30px;
}

.card-grid-HP-S2-S3 {
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* Display 5 cards per row */
  display: grid;
  gap: 30px;
}

.card-grid-HP-S4 {
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* Display 5 cards per row */
  display: grid;
  gap: 30px;
}

/*colouring book buttons*/
.CBB {
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.CBB1,
.CBB2,
.CBB3,
.CBB4,
.CBB5,
.CBB6 {
  background-color: rgb(11, 30, 40);
  opacity: 0.95;
  border-radius: 2rem;
  padding: 1rem; /* Reduced padding */
  width: 15%;
  color: white;
  text-align: center; /* Center the text horizontally */
}

.CBB1 a,
.CBB2 a,
.CBB3 a,
.CBB4 a,
.CBB5 a,
.CBB6 a {
  color: white;
  text-decoration: none;
}

.section-under-main hr {
  background-color: #ed9b00;
  height: 2px;
}

.bottom-team {
  margin-bottom: -2rem;
}