App.css

/* * * * * * * */
/* * COLOURS * */
/* * * * * * * */
:root {
  /* our colours*/
  --text-primary: #850F78; 
  --mediumpurple: #bc15aa; 
  /*--purple: #B85BD1; */
  --accen-secondary: #F57D22; 
  --accent-primary: #F4CC1E; 
  --lightyellow: #fae99e; 
  --lightblue: #A0A7F3 ; 
  --verylightblue: #ebecfd; 
  --offblack: #32232C ; 
  --cebitecgray: #8295A4; 
  /*--offwhite: #e9dff1; */
  --ourbeige: #FFF6F2; 
  --darkerbeige: #e2dad7; 
  --background: white; 
  /*igem colours*/
  --igemdarkgreen: #006530; 
  --igemmediumgreen: #019968; 
  --igemlightgreen: #99cb9a; 

  --info-border-color: var(--mediumpurple); 
    --vp-ct: var(--text-primary); 
    --info-border-color: var(--accent-primary); 
    --info-bg-color: var(--lightyellow); 
    --info-title-color: var(--text-primary); 
    --info-code-bg-color: var(--lightyellow); 
    --note-border-color: var(--text-primary); 
    --note-bg-color: var(--darkoffwhite); 
    --note-title-color: var(--text-primary);
    --note-code-bg-color: var(--darkoffwhite);
    --tip-border-color: var(--text-primary); 
    --tip-bg-color: var(--darkoffwhite);  
    --tip-title-color: var(--text-primary);
    --tip-code-bg-color: var(--darkoffwhite);
    --warning-border-color: var(--accen-secondary); 
    --warning-bg-color: var(--lightorange);  
    --warning-title-color: var(--text-primary);
    --warning-code-bg-color: var(--lightorange); 

}
/* * * * * * * */
/* * * BODY* * */
/* * * * * * * */
body {
  padding-top: 56px;
  background-color: var(--background);
  color: #493843;
}
body.dark-mode {
  background-color: var(--offblack);
  color: white;
}
p {
  text-align: justify;
}
a {
  color: var(--lightblue) !important;
  text-decoration: none !important;
}



/* * * * * * * */
/* *SIDEBAR* * */
/* * * * * * * */

.sidebar{
  border-left: 6px solid;
  border-left-color: var(--text-primary);
  border-color: var(--accent-primary);
  color: var(--text-primary);
  list-style-type: none;
  line-height: 280%;
  margin: 0px 0px;
  padding: 0px 0px;
}
.sidebar>div>a>span:hover{
  text-shadow: 5px 5px 15px black;
  transition: all 0.1s linear;
}
.sidebar>div{
overflow: hidden;
text-align: center;
cursor: pointer;
}
.sidebar>div>a>span{
padding: 1rem;
color: var(--text-primary);
}
.active-scroll-spy{
  background-color: yellowgreen !important;
}

/* * * * * * * */
/* * GENERAL * */
/* * * * * * * */
.relative{position: relative;}
.absolute{position: absolute;}
.left-aligned {margin-left: auto;}
.align-items-center{align-items:center!important}
.zweirem{padding: 2rem;}
.left{float: left;}
.right{float: right;}
.sticky-top {
  position: -webkit-sticky;
  position: sticky !important; 
  top: 0;
  z-index: 1020;
  top: 80px !important; 
  overflow-wrap: break-word;
}
.fullsize{
  max-height: 100% !important;
  max-width: 100% !important; 
}
.header-container{
  padding-top: 380px;
  background-color: var(--lightblue);
}
.null{
  padding: 0% !important;
   margin: 0% !important;
}
.v-align-m{
  vertical-align: middle !important; 
}
.fit-cont{
  max-width: fit-content;
}
.center{
  display: flex !important;
  align-items: center !important;
  text-align: center;
}
.shadow{
  box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
}
/* * * * * * * */
/* *  NAVBAR * */
/* * * * * * * */
.nav-link{
  color: var(--text-primary) !important; 
}
.nav-link:hover {
  color: white !important;
  background-color: var(--text-primary) !important;
  border-radius: 7px;
}
.navbar{
  backdrop-filter: blur(5px);
  transition: visibility 0s, 0.6s, opacity 0.6s linear, transform 1s;
}
  nav.navbar {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.dropdown-item{
  color: var(--text-primary) !important;
}
.dropdown-item:hover{
  color: white !important;
  background-color: var(--text-primary) !important;
}
.nav-item.dropdown:hover .dropdown-menu {
  display: block;
  background-color: white;
  border-color: var(--text-primary);
  border-radius: 7px;
}
.navbar-brand{
  color: var(--text-primary) !important;
}
.dropdown-menu{
  margin-top: 0 !important;
}
/* TABLES */
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid black;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #ededed;
}
tr:nth-child(odd) {
  background-color: #f3f3f3;
}
tr:nth-child(1) {
  background-color: var(--lightblue) !important;