:root {
    --color-green: #1BE6A1; /* ci grün */ 
    --color-blue: rgb(0,150,200); /* ci blau */ 

    --bs-nav-link-color:var(--color-blue);
    --bs-navbar-padding-y:1rem;
    --bs-nav-link-color:var(--color-blue); 

    --bs-link-color-rgb:var(--color-blue);
  }

body { padding-top: 56px; }
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #343a40 !important; }

/* 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: 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 }

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

body{
    color:var(--color-blue);
}
.text-green{
    color:var(--color-green);
}
/* navigation */
.navbar{
    padding:1rem 0;
    box-shadow:0px 0px 10px rgba(0,0,0,0.2);
}
.navbar-nav{
    --bs-navbar-nav-link-padding-x:1rem;
}
.navbar .nav-link{
    color:var(--color-blue);
    border-radius:4px;
    padding:0.5rem 1rem;
}
.navbar .nav-link.show{
    background:var(--color-blue);
    color:white;
}
.dropdown-menu{
    border:3px solid var(--color-green);
    padding:3px;
}
.dropdown-item{
    color:var(--color-blue);
}
.dropdown-item:hover{
    background:var(--color-blue);
    color:white;
}
.navbar-brand {
    font-size:2rem;
    line-height: 2rem;
    color:var(--color-blue);
    display: flex;
    align-items:center;
}
.navbar-brand img{
    width:40px;
    margin-right:12px;
}
/* breadcrumb */
.breadcrumb-item.active, .breadcrumb-item + .breadcrumb-item::before {
    color: var(--color-blue);
  }
/* toc */
#toc{
    padding-top:200px;
}
#toc .inner{
    position: sticky;
    top:100px;
}
#toc ul{
    padding-left:0;
    list-style: none;
}
#toc li a:hover, #toc li a.active{
    color:black;
}

.bg-hero{
    background-size: cover;
    min-height: 400px;
    background: var(--color-green);
}

/* typo */
h1{
    font-size:3rem;
    font-weight:600;
}
h2{
    border-top:3px solid var(--color-green);
    font-size:2rem;
    font-weight:600;
    margin-top:4rem;
    padding-top:2rem;
    margin-bottom:2rem;
}
h3{
    font-size:1.5rem;
    font-weight:600;
    margin-top:2rem;
    margin-bottom:1rem;
}
.lead{
    font-size:2rem;
    margin-top:1rem;
    margin-bottom:4rem;
}

#scrolltop{
    position: fixed;
    display: block;
    right:50px;
    bottom:50px;
    width:80px;
    height:80px;
    border:3px solid var(--color-green);
    border-radius:100%;
    z-index: 1000;
    background:url(https://static.igem.wiki/teams/5701/icons/arrow-up.svg) no-repeat center;
    background-size:80px;
}
#progressbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background-color: var(--color-green);
    z-index: 9999;
  }