App.css

.navbar .scroll-progress img {
  position: absolute;
  top: -20px;
  height: 25px;
  width: 30px;
  z-index: 11;
  transition: transform .5s ease-in-out;
}

.navbar-brand .col {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: auto;
  margin-bottom: auto;
}

.boxy-1{
  border-radius: 10px;
}

.nav-item, .nav-dropdown, .dropdown-toggle{
  border-radius: 10px !important;
}


.sponsor-text-left h4{
  text-align: right;
}

#hphead{
  background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,200,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/hp.webp");
}

#conhead{
  background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,200,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/contribution.webp");
}

#deschead{
  background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,200,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/project-description.webp");
}
  
#enghead{
  background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,200,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/engineering.webp");
}
#safehead{
  background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,200,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/biosafety2.webp");
}
/* #atthead{
  background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,200,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/engineering.webp");
} */
#dochead{
  background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,200,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/documentation.webp");
}
#exhead{
  background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,200,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/experiments.webp");
}
#ibhead{
  background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,200,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/igem-bielefeld.webp");
}
#jughead{
  background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,200,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/judging.webp");
}
#mmhead{
  background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,200,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/materials-methods.webp");
}
#nothead{
  background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,200,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/notebook.webp");
}
#parhead{
  background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,200,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/parts.webp");
}
#reshead{
  background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,200,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/results.webp");
}
#teamhead{
  background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,200,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/rooster.webp");
}
#sphead{
  background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,200,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/sponsors-partners.webp");
}
#suphead{
  background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,200,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/supplement.webp");
}

#hphead, #conhead, #deschead, #enghead, #safehead, #atthead, #dochead, 
#exhead, #ibhead, #jughead, #mmhead, #nothead, #parhead, #reshead, #teamhead
, #sphead, #suphead
{
  background-size: 1650px auto;
  background-repeat: no-repeat;
}

.header-title{
  min-height: 900px;
}

.download-butt span {
  display: inline-block;
  padding: 10px;
  min-height: 50px !important;
}

.download-butt{
  display: inline-block;
  height: 50px !important;
}

/* Philip's area (sorry Lili) */

.casettecontainer {
  display: flex;
  justify-content: center; /* Align boxes in the center horizontally */
  align-items: flex-start; /* Align items at the top (start) vertically */
  flex-wrap: wrap; /* Ensure the boxes wrap on smaller screens */
  gap: 20px; /* Add space between the boxes */
}

.casettebox {
  display: flex;
  flex-direction: column; /* Stack image and any content vertically */
  justify-content: flex-start; /* Align images at the top */
  align-items: center; /* Center images horizontally */
  width: auto; /* Set a width for the boxes */
  height: auto; /* Allow height to adapt based on content */
  padding: 10px;
}

.casettebox img {
  width: 100%; /* Image takes up full width of its container */
  height: auto; /* Maintain aspect ratio of the image */
  max-height: 150px; /* Set a maximum height to ensure consistency */
  object-fit: cover; /* Ensure the image covers the available space */
}