body { padding-top: 56px; 
  font-family:"Proxima Nova";
}
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #982F44 !important; }

embed{
  margin-bottom:2em;
}

/*dashed hr*/
.dash{
  border-top:dashed;
}
/*hp h3 headers*/
#hp h3{
  font-size:2.25rem;
}
#hp h2{
  padding-top:2.5%;
  font-size:xxx-large;
}
#thickerhr{
  height: 5px;
  background-color: black;
  border: none;
}

#underline{
  text-decoration: underline;
}

.card-w-info{
  background: grey; /* light gray */
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  width: 50%;
  margin-bottom: 30px;
  align-items: center;
  justify-items: center;
  margin: 0 auto;
}

.card-w-info p{
  text-align: center;
  color:#E1E2E5;
}


.hidden-text {
opacity: 0; /* Initially hidden */
transform: translateY(20px); /* Slightly moved down for a subtle animation */
transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Smooth transition */
}

.hidden-text.show {
opacity: 1; /* Fully visible */
transform: translateY(0); /* Return to original position */
}

.rounded-square {
width: 100%; /* Set the desired width */
height: 450px; /* Set the desired height */
background-color: #E1E2E5; /* Choose a background color */
border-radius: 20px; /* Adjust this value for more or less rounding */
display: flex; /* Use flexbox for easy text centering */
padding: 10px; /* Add some padding around the text */
box-sizing: border-box; /* Include padding in the element's total width and height */
}

.rounded-square p{
text-align: left;
}


.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  justify-items: center;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
}

/* Octagon card */
.octo{
  width: 600px;
  height: 500px;
  background: #d3d3d3;
  clip-path: polygon(
    30% 0%, 70% 0%, 100% 30%, 100% 70%,
    70% 100%, 30% 100%, 0% 70%, 0% 30%
  );
  box-shadow: 6px 6px 5px rgba(0, 0, 0, 0.25);
  z-index: 1;
  
}
.octo h1 {

  display: flex;              /* Center text inside */
  justify-content: center;
  align-items: center;

  font-size: 1.5rem;
  font-weight: bold;
  z-index: 2;
}
figcaption{
  text-align:center;
}
#results figcaption{
  padding-left:25%;
  padding-right:25%;
}
#results img{
  max-width: 50%; height: auto; display: block; margin-left: auto; margin-right: auto; margin-bottom: 15px;
}

#hp h4{
  padding-top:2.5%;
}

/*citation hanging indent*/
#references p{
  text-indent:-36px;
  padding-left:36px;
}

.card {
background: #e5e6e9; /* light gray */
border-radius: 12px;
padding: 2rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
width: 100%;
margin-bottom: 30px;
}

.card h1 {
font-size: 115px;
font-weight: 800;
margin: 0;
text-align: left;
}

.card h1 span {
font-size: 115px;
display: block;
margin-top: 0.5rem;
font-weight: 700;
}

.card p {
font-size: 25px;
color: #333;
text-align: left;
margin-bottom:0px;
}

.card p + p {
margin:0px;
}



/* Proxima nova font */
@font-face { 
  font-family: "Proxima Nova";
  font-style: normal;
  font-weight: 400;
  src: 
    url(https://static.igem.wiki/teams/5761/other/proximanova-regular.ttf) format("truetype");
}

.fullwidth {
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
width: 100vw;   /* spans full viewport width */
margin-top: 0;
padding-top: 0;
}
.fullwidth img {
width: 100%;
display: block;
}

.homebanner {
position: relative;
text-align: center;
color: white;
}


.text-pos {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 50px;
}
.image-pos {
position: absolute;
top: 50%;
left: 50%;
transform: translate(25%, 25%);
}




.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 }

/* wcag 1.4.10 reflow (break up links vertically) */
a {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens:auto;
}


/*collapsibles (bootstrap */
.card-body p{
  font-size:medium;
}

.btn{
  background-color:#982F44;
  border-color: #000;
}
.btn:hover {
  background-color: #AF737C;
  border-color:#000
}

/*ihp people images*/
.card-body img{
  margin-bottom:2.5%;
  height:auto;
  max-width:300px;
}
/* Team members page */

/* Team Member Squares */
.team-member-section {
  margin: 40px 0;
  text-align: center;
}

.team-member-square {
  position: relative;
  width: 300px;
  height: 350px;
  margin: 10px;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.team-member-square img {
  width: 100%;
  height: auto;
  display: block;
}

.name-title-overlay {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
  text-align: center;
  border-radius: 10px;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  text-align: center;
  transition: opacity 0.3s ease;
  border-radius: 20px;
}

.team-member-square:hover .overlay {
  opacity: 1;
}

.team-member-square:hover {
  transform: scale(1.05);
}
/*End members

/*Autoscroll*/
.autoscroll {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  width: 80vw;
  margin: 20px;
  border-radius: 20px;
  cursor: pointer;
}

.autoscroll::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 150px;
  background: linear-gradient(to right, #ffffff 0%, transparent 10%, transparent 90%, #ffffff 100%);
  pointer-events: none;
  z-index: 2;
}

.scroll-container {
  display: inline-flex;
  align-items: center;
  gap: 50px;
  width: max-content;
  /* Animation removed - handled by JS */
}

.scroll-container img {
  height: 150px;
  background-color: white;
  border-radius: 20px;
  padding: 10px;
  flex-shrink: 0; /* Prevent images from shrinking */
}
/*End autoscroll*/

/*Scrollspy*/
#myScrollspy {
  pointer-events:auto;
}
.scrollspy-offset {
  top: 70px !important; /* adjust to your header height */
} 

/* Force default color for all nav links inside #myScrollspy */
#myScrollspy .nav-link {
  color: rgb(0, 0, 0) !important;
  background-color: transparent !important; /* Ensure background is transparent */
}

/* Make sure active state for all nav links inside #myScrollspy is correct */
#myScrollspy .nav-link.active {
  color: rgb(255, 255, 255) !important;
  background-color: #982F44 !important; /* Custom active background */
}

#bumper h1::before,
#bumper h2::before {
  content: "";
  display: block;
  height: 70px;
  margin-top: -70px;
  visibility: hidden;
  pointer-events: none;
}

/*End scrollspy*/

/*Carousel*/
.carousel-item img {
max-width: 100%;
height: auto;
margin: 0 auto;
border-radius:25px;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
background-color: rgba(0, 0, 0, 0.6);
border-radius: 50%;
padding: 10px;
}
/*end carousel*/

/*Video*/
.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
margin: 0 auto;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-height: 180px;
}
/*End video*/

/*block quote*/
blockquote {
  background: #f9f9f9;
  border-left: 10px solid #AF737C;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
}
blockquote:before {
  color: #ccc;
  font-size: 4em; /*todo probably want to make smaller | tried adjusting - didn't work for some reason?*/
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}

/*pdf embeds*/
.slides-pdf{
  width:100%;
  aspect-ratio: 16/9;
}
.full-pdf{
  width:100%;
  aspect-ratio:8.5/11;
}

.nav-pills{
  padding-bottom:5%;
}

/* footer */
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }
/*end footer*/

/*headers*/
.page-header {
  width: 100%;
  aspect-ratio: 1680/415;
  background-size: cover;
  background-repeat: no-repeat;
  background-position-y: center;
  justify-content: center;
  display:flex;
  padding-bottom:5%;
}
.page-header h1{
  font-size: 10vw;
  padding-top:2.5%;
  color:white;
}
/*homepage only*/
.homepage-header{
  width: 100%;
  aspect-ratio: 16/4; /*todo update aspect ratio*/
  background-size: cover;
  background-repeat: no-repeat;
  background-position-y: center;
  justify-content: center;
  display:flex;
  padding-bottom:5%;
}
.homepage-header h1{
  font-size: 10vw;
  padding-top:2.5%;
  color:white;
}
#home-header{
  background-image: url("https://static.igem.wiki/teams/5761/home/concrete.webp");
}
#attributions-header{
  background-image: url("https://static.igem.wiki/teams/5761/other/headers/attributions.webp");
}

#appreciation-header{
  background-image: url("https://static.igem.wiki/teams/5761/other/headers/appreciation.webp");
}

#description-header{
  background-image: url("https://static.igem.wiki/teams/5761/other/headers/project-description-crop.webp");
}

#team-header{
  background-image: url("https://static.igem.wiki/teams/5761/other/headers/teamwork-crop.webp");
}

#engineering-header{
  background-image: url("https://static.igem.wiki/teams/5761/other/headers/engineering.webp");
}

#results-header{
  background-image: url("https://static.igem.wiki/teams/5761/other/headers/results.webp");
}

#contribution-header{
  background-image: url("https://static.igem.wiki/teams/5761/other/headers/contributions.webp");
}

#experiments-header{
  background-image: url("https://static.igem.wiki/teams/5761/other/headers/experiments.webp");
}

#education-header{
  background-image: url("https://static.igem.wiki/teams/5761/other/headers/education.webp");
}

#hp-header{
  background-image: url("https://static.igem.wiki/teams/5761/other/headers/human-practices-crop.webp");
}

#inclusivity-header{
  background-image: url("https://static.igem.wiki/teams/5761/other/headers/inclusivity.webp");
}

#notebook-header{
  background-image: url("https://static.igem.wiki/teams/5761/other/headers/notebook.webp");
}

#parts-header{
  background-image: url("https://static.igem.wiki/teams/5761/other/headers/parts.webp");
}

#safety-header{
  background-image: url("https://static.igem.wiki/teams/5761/other/headers/safetyandsecurity.webp");
}

#model-header{
  background-image: url("https://static.igem.wiki/teams/5761/other/headers/model.webp");
}
/*todo add header ids urls*/

/*home page stuff*/
#excavator {
  background-image: url(https://static.igem.wiki/teams/5761/home/excavator-crop.webp);
}

.full-bg {
  width: 100%;
  aspect-ratio: 5185/2610; /* Ensures the background image maintains its aspect ratio */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top left; /* Ensure the image starts from the top-left corner */
  display: flex;
  justify-content: flex-start; /* Align content at the start */
  align-items: flex-start; /* Align items to the top-left of the container */
  position: relative; /* This makes the text-block align correctly */
  padding-bottom: 5%;
}

.container .text-block {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255,0.85);
  color: rgb(0, 0, 0);
  height: 100%;
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow:auto;
}
.text-block p{
  display: flex;
  text-align:center;
  justify-content: center;
  align-items: center;
  font-size:2em;
  padding-left:2.5%;
  padding-right:2.5%;
}
.push-center-horz{
  padding-left:15%;
  padding-right:15%;
}

#home-btn .btn{
  color:white;
  width:10em;
}
#home-btn .row{
  justify-content: center;
  margin-top:2%;
}

#awards-text{
  font-style:bold;
  font-size:xx-large;
}