:root {
  --yellow: #FFEBB3;
  --pink: #FFB5B3;
  --blue: #A0CFD3;
  --white: #F2F3F7;
  --teal: #007A74;
  /*--raisin: #272635; */
  --raisin:#191516;
}

/*Abigail's code*/
/*header {
  background: url(https://static.igem.wiki/teams/4694/wiki/wiki-images/background-logo2-100-x-42-px.svg);
  height:65vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}*/


header {
  /*background: url(https://static.igem.wiki/teams/4694/wiki/logos/background-logo2-100-x-42-px-2.svg);*/
  min-height: 0px;
  max-height: 0px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color:var(--raisin);
}



/**/
.page-title {
padding-top:5em;
}

.page-title-content h1 {
color: /*#007A74;*/ #A0CFD3;
font-size: 4em;
font-weight: normal;
text-align: center;
}

/*.grid-normal {
  display: -ms-grid;
  display: grid;
  background-color:#272635;
  -ms-grid-columns: minmax(10px, 1fr) minmax(50px, 300px) minmax(10px, 1fr);
  grid-template-columns: minmax(10px, 1fr) repeat(5, minmax(50px, 300px)) minmax(10px, 1fr);
}*/

.grid-normal{
  background-color:#272635;
  }


  introduction {
    width: 100%;
    background-color: #212832;
    -ms-grid-column: 1;
    -ms-grid-column-span: 7;
    grid-column: 1 / 8;
    border-bottom: 10px solid #FE9901;
   
  }
  
  .introduction-content {
    color: #272635;
    -ms-grid-column: 3;
    -ms-grid-column-span: 3;
    grid-column: 3/6;
    padding: 2em 1em;
    text-align: justify;}

body { padding-top: 0px;
  background-color: #F2F3F7; /*this changes the background colour*/
  } 

.left-aligned { margin-left: auto; }
.bg-dark { background-color: #272635 !important; /*raisin */} /* This is the menu colour*/
.bg-blue {background-color: #272635 !important;}
.bg-hero { /* This is the banner colour */
  background: linear-gradient(-45deg, #F2F3F7, #A0CFD3, #007A74, #272635  );
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  height: 50vh;}

  @keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }100% {
        background-position: 0% 50%;
    }
} 

/* 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:.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 a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }

/*banner */


/*HOME*/
.banner-text {
  color:#272635;
}

/* Team */

/*Lab-notebook css*/
.wrapper {
  display: flex;
  justify-content:space-between;
}

.main,
.sidebar {
  padding: 1%;
  /*background-color: #fff;*/
}

.main {
  width: 77%;
  height: /*500vh*/auto;
}

.main2{
  width: 77%;
  height: 100%;
}
.sidebar {
  width: 21%;
  height: 25vh;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding:4% 0%;
  /*margin-top:10%;*/
  
  
}

.body {
  font-family: "Poppins", sans-serif;
  background: var(--blue);
}

/* .hidden {
  font-size: 5%;
}*/

.padding2 {
  padding:3% 5%;
  margin:0%;
  border:0%;
}

.padding {
  padding:3% 9%;
  margin:0%;
  border:0%;
}
.blue-glow{
  /*box-shadow: #A0CFD3 0px 10px 36px 0px, #A0CFD3 0px 0px 0px 1px;*/
  box-shadow:  #A0CFD3 0px 2px 8px 0px;
  padding: 5%;
  margin:6%;
  background:#F2F3F7;
}

.teal-glow p {
  font-size: 16px;
  }
.teal-glow h1 {
  font-size: 24px;
  font-weight: 700;
  border: var(--teal), 2px;
  color: black;
  background-color: #A0CFD3;
}
.teal-glow h2 {
  font-size: 20px;
  font-weight: bold;
}

.blue-glow p {
  font-size: 16px;
  }
.blue-glow h1 {
  font-size: 24px;
  font-weight: 700;
  border: var(--teal), 2px;
  color: black;
  background-color: #A0CFD3;
}
.blue-glow h2 {
  font-size: 20px;
  font-weight: bold;
}

.pink-glow h1 {
  font-size: 24px;
  font-weight: 700;
  border: var(--teal), 2px;
  color: black;
  background-color: #A0CFD3;
}

.raisin-glow h1 {
  font-size: 24px;
  font-weight: 700;
  border: var(--teal), 2px;
  color: black;
  background-color: #A0CFD3;
}

.white-glow{
  /*box-shadow: #F2F3F7 0px 10px 36px 0px, #F2F3F7 0px 0px 0px 1px;*/
  box-shadow: #F2F3F7 0px 2px 8px 0px;
  padding: 5%;
  margin:2%;
  background:#F2F3F7;
}

.yellow-glow{
  /*box-shadow: #FFEBB3 0px 10px 36px 0px,  #FFEBB3 0px 0px 0px 1px;*/
  box-shadow:  #FFEBB3 0px 2px 8px 0px;
  padding:5%;
  margin:2%;
  background:#F2F3F7;
}

.teal-glow{
  /*box-shadow: #007A74 0px 10px 36px 0px,  #007A74 0px 0px 0px 1px;*/
  box-shadow:  #007A74 0px 2px 8px 0px;
  padding:5%;
  margin:2%;
  background:#F2F3F7;
}
.columns {
  display: flex; /* Use flexbox to create a flexible container for columns */
}



/*Emily code*/

.flip-card {
  /*width: 300px; /*omit for responsiveness???*/
  height: 400px;
  /*width: 100%;
  max-width: 300px;
  height: 100%;
  max-height: 400px;*/
  /*for some reason the above code breaks the card*/
  perspective: 1000px; /* Set the depth of the 3D space */
  margin: 0 auto; /* Center the card horizontally */
  border-radius: 10px; /* Rounded corners */
  /*overflow: hidden; /* Hide overflowing content - this command keeps it all within rectangle even when it flips*/
  /*background: url('path_to_your_image.jpg') no-repeat center center/cover; /* sets background as an image*/ 
}

.flip-card-inner {
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  position: relative;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  border-radius: 10px; /* Rounded corners */
}

.flip-card-front {
  /*background-color: linear-gradient(to bottom right, #194c87, #a7a2f8); /*Gradient background - doesnt work*/
  /*background-color: #A0CFD3;*/
  background-image: linear-gradient(to bottom right, #FFEBB3, #FFB5B3);
  color:rgb(255, 255, 255);
}

.flip-card-back {
  background-color: #A0CFD3;
  color: black;
  transform: rotateY(180deg);
}

.flip-card-image {
  /*padding: 5%; 
  this now has constant sizing */
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%; /* Crop image into a circle */
  border: 4px solid var(--white); /* Border around the image */
}
/* Media queries for responsiveness */
@media (max-width: 600px) {
 .flip-card {
   max-width: 400px;
   max-height: 350px;
   height:400px;
   width:300px;
  }
}
  /* changing the text selection colour when you highlight it */
::selection {
  /*background-color:#00C49A;*/
  background-color:#272635;
  /*background-color:lightseagreen;*/
  color:whitesmoke;
}

/*Becky code*/
.row {
  display:flex;
  justify-content:center;
  margin:auto;
  flex-wrap: wrap;
  padding: 0 4px;
}

@media (max-width: 600px) {
  .row{display:block;}
  .column9{width:100%;}
  .column10{width:100%;}
  }

.rowhomeinfo {
  display:flex;
  justify-content:center;
  margin:auto;
  flex-wrap: wrap;
  padding: 0 0px;
  /*background-color: var(--blue);*/
}
  
.team-image { 
  padding: 1%;
  width:50%;
  height:50%;
}
         
.column1,
.column2,
.column3,
.column4,
.column5,
.column6,
.column7,
.column8 {
  width:33%;
  min-width: 200px;
  min-height: 200px;
  padding: 20px;
  text-align:center;
}
/*
.column7,
.column8 {
  width:33%;      
  min-width: 200px;
  min-height: 200px;
  padding: 20px 20px;
  text-align:center;
} */

.column12comb {
  width:66%;
  min-width: 200px;
  min-height: 200px;
  padding: 20px;
  text-align:center;
}
.column12combhome {
  width:66%;
  min-width: 200px;
  min-height: 200px;
  padding: 20px;
  text-align:center;
}

.column9,
.column10 {
  width:50%;
  min-width: 200px;
  min-height: 200px;
  padding: 20px;
  text-align:center;
}


.column1home {
  width:33%;
  min-width: 200px;
  min-height: 200px;
  padding: 20px;
  text-align:center;
  /*background-color:var(--blue);*/
}

.color1 {
  background-color: #3CB371;
}

.color1dark{
  background-color:#272635
}

.color2 {
  background-color: #B1E5F2;
}

.color3 {
  background-color:#4E8098;
}

.background1 {
  background-color:#B1E5F2;
  background-size: cover;
}

.background2 {
  background-color:palegoldenrod;
  padding:1% 1%;
  border: 1%;
  margin: 1%;
}

.clearer
{
  height: 1px; /*0px might work too*/
  clear: both;
}




/*
.container{
  border:0 !important;
  margin:0 !important;
}
*/


/*colours for home page*/
.position {
  display: block; /*background displays as block colour*/
  left: 0%; /*makes the background start more left than normal*/
  width:100%; /*this extends the colour bar from the original section to (almost) the width of the page*/
  height:100%;
  /*overflow: hidden*/; /*means that any overflowing background doesnt make the screen wider than the footer*/
  position: relative;
}

.padding {
  padding:3% 9%;
  margin:0%;
  border:0%;
}


/********************************************************************************************************************************/
/*test colors*/

.test{
  background-color: #fbc5ca; /*tea rose*/
  /*these are some test colours I was using to form the background blocks of colour
  no Theo N they are NOT the final colours dont worry*/
}

.test2 {
  background-color: #E0F5E9; /*honeydew*/
}

.test3 {
  background-color:  #fce9c5; /*dutch white*/
}

.test4 {
  background-color: #e8e9f3; /*ghost white*/
}

.test5 {
  background-color: #CBEDF6; /*non-photo blue*/
}

.test6 {
  background-color: #c3e9e9; /*mint-green*/
}

.test7 {
  background-color: #D1DAEF; /*periwinkle*/
}

.test8 {
  background-color: #d1d0dd; /*french gray*/
}


/* new colors */

.yellow-color {
  background-color:rgb(255, 247, 222);
  color:black;
}

.yellow-color-dark {
  background-color: #272635;
  color: var(--white) ;
}

.pale-blue-color {
  background-color: #A0CFD3;
  color:var(--white);
}

.pale-blue-color-text {
  color: #A0CFD3;
}

.pale-blue-color-dark {
  background-color:#272635;
  color:var(--white);
}

.pink-color {
  background-color:#FFB5B3;
  color:#272635;
}

.pink-color-dark {
  background-color:#272635;
  color:#FFB5B3;
}

.teal-color {
  background-color:#007A74;
  color:#272635;
}

.teal-color-dark{
  background-color:#272635;
  color:#007A74;
}

.white-color {
  background-color: #F2F3F7;
  color:black;
}

.white-color-dark {
  background-color: #272635;
  color:#F2F3F7;
}

.body-dark{
  background-color:#272635;
  color:#F2F3F7;
}

.a-dark{
  color: #f2f2f2;
}
/****************************************************************************************************************************/

/* progress bar */

#progress-bar {
  width: 100%;
  height: 5px;
  background-color: #f2f2f2;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

#progress-bar .bar {
   height: 100%;
   background-color: #4CAF50;
   width: 0;
   transition: width 0.2s;
 }


/************************************************************************************************************************/

 /* CSS that will create an underline animation hopefully*/
.w3rcontainer{
  border: 1px solid #cccfdb;
  border-radius: 2px;
  } 

.hover-underline-animation {
  display: inline-block;
  position: relative;
  color:var(--blue) ;
  }

.hover-underline-animation:after {
   content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--blue);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
  }

.hover-underline-animation:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
  font-weight: bold;
  }

.hover-underline-animation:hover {
  color:var(--blue);
  font-weight:bold;
    }

.hover-underline-animation {
  display: inline-block;
  position: relative;
  color:var(--teal) ;
  }

.hover-underline-animation:after {
   content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--blue);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
  }

.hover-underline-animation:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
  font-weight: bold;
  }

.hover-underline-animation:hover {
  color:var(--blue);
    }


.hover-hilight:hover {
  background-color:var(--teal);
  color:var(--white);
}

.hover-hilight{
  background-color:var(--blue);
  color:var(--raisin);
}


/*yes i know these two are counterintuitive; just go with it ok?*/
.hover-hilight-blue:hover {
  background-color:#FFB5B3;
  color:var(--raisin);
}

.hover-hilight-blue{
  background-color:var(--yellow);
  color:var(--raisin);
}

.hover-hilight-pink:hover{
    background-color:var(--blue);
    color:var(--raisin);
}
.hover-hilight-pink{
    background-color:var(--pink);
    color:var(--raisin);
}

.hilight-blue{
  background-color:var(--blue);
  color:var(--raisin);
}

.hilight-yellow{
  background-color:var(--yellow);
  color:var(--raisin);
}

.hilight-pink{
  background-color:var(--pink);
  color:var(--raisin);
}

/*description page*/
.boldcol{
  /*color:mediumseagreen*/
  color: #007A74;
}

.boldcol-blue{
  /*color:mediumseagreen*/
  color:#A0CFD3 ;
}

.boldcoldark{
  color:#c3e9e9;
}





/* FONTS *******************************************************************************************************************/
@font-face {
  font-family:ComicNeue;
  src: url(https://static.igem.wiki/teams/4694/wiki/fonts/comicneue-regular.ttf);
}
@font-face {
  font-family:ComicNeue;
  src: url(https://static.igem.wiki/teams/4694/wiki/fonts/comicneue-bold.ttf);
  font-weight: bold;
}

@font-face {
  font-family:ComicNeue;
  src: url(https://static.igem.wiki/teams/4694/wiki/fonts/comicneue-italic.ttf);
  font-style: italic;
}

@font-face {
  font-family:ComicNeue;
  src: url(https://static.igem.wiki/teams/4694/wiki/fonts/comicneue-bolditalic.ttf);
  font-style: italic;
  font-weight: bold;
}


@font-face {
  font-family:DyslexiaFont;
  src: url(https://static.igem.wiki/teams/4694/wiki/fonts/opendyslexic-regular.otf);
}
@font-face {
  font-family:DyslexiaFont;
  src: url(https://static.igem.wiki/teams/4694/wiki/fonts/opendyslexic-bold.otf);
  font-weight: bold;
}

@font-face {
  font-family:DyslexiaFont;
  src: url(https://static.igem.wiki/teams/4694/wiki/fonts/opendyslexic-italic.otf);
  font-style: italic;
}

@font-face {
  font-family:DyslexiaFont;
  src: url(https://static.igem.wiki/teams/4694/wiki/fonts/opendyslexic-bolditalic.otf);
  font-style: italic;
  font-weight: bold;
}


#font-toggler {
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  text-align: center;
}

.font-togglers {
  display: flex;
  justify-content: space-around;
  text-align: center;
  width: 100%;
}

#decrease-font-size,
#increase-font-size {
  /*font-size: 4vw;*/
  line-height: 3vw;
}

#accessibility-dropdown {
  position: absolute;
  right: calc(100% - 170px);
}

.dark-mode-links {
  color:#007A74;
}

a {
  text-decoration:none;
  color:black;
  }




  .background-stripes {
    width: 100%;
    height: 100%;
    background-image: linear-gradient( #FFEBB3 50%, #A0CFD3 50%);
    background-size: 100%;
  }

  option {
    /* wrap text in compatible browsers */
    -moz-white-space: pre-wrap;
    -o-white-space: pre-wrap;
    white-space: pre-wrap;
    /* hide text that can't wrap with an ellipsis */
    overflow: hidden;
    text-overflow: ellipsis;
    /* add border after every option */
    border-bottom: 1px solid #DDD;
  }



  /*.dropdown-menu2{position:absolute;
    top:100%;
    z-index:1000;
    display:none;
    min-width:10rem;
    padding:.5rem 0;
    margin:0;
    font-size:1rem;
    color:#212529;
    text-align:left;
    list-style:none;
    background-color:#da1010;
    background-clip:padding-box;
    border:1px solid rgba(0,0,0,.15);
    border-radius:.25rem}*/