/* Modular header background, text under image */
.headerbackground {
  position: absolute center;

  z-index: -2;
  
  width: 100%;
  height: 300px;

  /* For gradient */
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
} 

/* sätt skalan på bilden */
   /* height: 200px;
    transform: scale(1.5);
    
    /* Position och centrering av bilden for att passa alla skärmar*/
   /* background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;*/

/* Loader 
.loader-wrapper {
  width:100vw;
  height:100vh;
  position: fixed;
  z-index: 1000;
  top:0;
  left:0;
  background-color: black; /* #f0add5 change color when loader works properly
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader {
  width: 45px;
  aspect-ratio: 1;
  --c: no-repeat linear-gradient(#e1a1c8 calc(50% - 10px),transparent 0 calc(50% + 10px),#e1a1c8 0);
  background: 
    var(--c) 0%   100%,
    var(--c) 50%  100%,
    var(--c) 100% 100%;
  background-size: 20% calc(200% + 20px);
  animation:b4 1.6s infinite linear
}
@keyframes b4 {
    33%  {background-position: 0% 50%,50% 100%,100% 100%}
    50%  {background-position: 0%  0%,50%  50%,100% 100%}
    66%  {background-position: 0%  0%,50%   0%,100%  50%}
    100% {background-position: 0%  0%,50%   0%,100%   0%}
}
/* Loader end */   
/* För ny loader func */

/* slut ny loader func */

body { padding-top: 5px; 
color:#ffffff;
background-color: #000000;}
.left-aligned { margin-left: auto; }
.dark { background-color: #000000 ; } /*343a40 og colour og white is #e9ecef;for callout */
.bg-hero { background-color: #ffffff; }

/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #1b2b46; 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 }
.bd-background { background-image: url("https://static.igem.wiki/teams/4367/wiki/bilder/bakgrund-v2.png");
  background-position: fixed;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative; }


/* Modify brand and text color */

.mod3logo{
  width: 110px;
  aspect-ratio: auto 228 / 112; 
  height: 100px;
  position: relative;
  
}

.navbar-logo{
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  text-decoration: none;
  white-space: nowrap;
}
.navbar-brand {
  text-decoration: none; 

  color: #5e5e5e;
  font-weight: bold;
}
.nav-link {
  text-decoration: none;

  color: #5e5e5e ;
}


.active, .nav-link:hover {

  -moz-box-shadow: 1px 2px 3px #385998;
-webkit-box-shadow: 1px 2px 3px #385998;
box-shadow: 1px 2px 3px #385998;/**/
  background: #1b2b46;
  Border: radius 5px;


}
.nav-item ul 
{

  background:#1b2b46;
  
}
/*.nav-item.active

{
  background: #1b2b46;
  border-radius: 3px;
}*/

/* FÄRG FÖR HOVER I MENU BAR DROPDOWN*/
.active, .nav-item ul li a:hover

{
  color: #ffffff;
  background: #111b2d;
  border-radius: 3px;
}
.active, .nav-item ul li a {
  color: #ffffff;
}

p:link {
  color: #385b98;
  background-color: transparent;
  text-decoration: underline;
}
/*färg på hover link text */
a:hover {
  color: #ffffff
  ;
  text-decoration: underline;
}

/* för kolumner med bilder */
.column6 {
  float: left;
  width: 16.66%;
  padding: 5px;
}
.column2{
  float: left;
  width: 50%;
  padding: 5px;
}
.column3{
  float: left;
  width: 33.33%;
  padding: 5px;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}
/* slut - för kolumner med bilder */

/* Färger på text */
.col {
  text-decoration: none;

  color: #ffffff ;
}

/* sections list */
.wrapper{
  display: flex;
  justify-content: space-between;
}

.sections-list{
  position: -webkit-sticky;
  position: sticky;
  top: 100px;

  /* border: 3px solid black; */
  padding: 15px;
  padding-left: .3rem;
  padding-right: .3rem;

  width: 20%;
  height: fit-content;
  float: left;

  border-right: 5px solid #ffffff;
}

.main {
  padding-left: .2rem;
  border: 3px solid #000;
  width: 70%;
}



/*Text fading för body*/
.fade {
  font-family: Arial;
  font-size: 60px;
  color: #ffffff;
  animation: fadeIn 5s;
  -webkit-animation: fadeIn 5s;
  -moz-animation: fadeIn 5s;
  -o-animation: fadeIn 5s;
  -ms-animation: fadeIn 5s;
}
  @keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  @-moz-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  @-webkit-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  @-o-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  @-ms-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }





/* Buttons */
.sections-list .text-btn {
  text-decoration: none; /* Remove automatic hyperlink text style*/

  font-weight: bold;
  font-size: 16px;
  color: #253249;
  background:
    linear-gradient(
      to right,
      rgba(100, 200, 200, 1),
      rgba(100, 200, 200, 1)
    ),
    linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 100, 200, 1)
  );
  background-size: 100% 3px, 0 3px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
}
.sections-list .text-btn:hover {
    background-size: 0 3px, 100% 3px;
}

/* footer */
.footer { background-color:#000000 !important}
footer a { color: #5e5e5e; font-weight: bold; text-decoration: none; }
footer a:hover { color: #5e5e5e text-decoration underline; }
.social-icons {
    align-items: left;
    text-align: left;}

/* logga i header */
.headersettings{
  height: 95vh;
  min-height: 200px;
  max-height: 300px;
  background-attachment: unset;
  background-position: right 50% bottom 65%;
  background-repeat: no-repeat;
  background-size: cover;
  } 


/* fixa färgen i header */
.bg-hero{
  background-color: #000000;
  padding-top: 0px;
  margin: 0px;
  color: yellow;
  font-size: 20px;
  text-align: center;
}



/* header backgrounds */

/* fade in */
section {
  height: 100vh;
}

.tag {
  opacity: 0;
  transform: translate(0, 10vh);
  transition: all 1s;
}

.tag.visible {
  opacity: 1;
  transform: translate(0, 0);
}

.yellow {
  background-color: rgb(85, 127, 2);
}
.red {
  background-color: rgb(183, 4, 4);
}
.blue {
  background-color: rgb(247, 7, 7);
}
.green {
  background-color: rgb(15, 3, 103);
}
script{ src: "/static/Javascript.js"}