App.css

/* * * * * * * */
/* * COLOURS * */
/* * * * * * * */
:root {
  /* our colours*/ 
  --text-primary: #850F78 ; 
  --mediumpurple: #bc15aa; 
  --lightpurple: #B85BD1; 
  --very-light-purple: #ce9fc9; 
  /*--purple: #B85BD1; */
  --accen-secondary: #F57D22; 
  --dark-secondary: #ac5818 ; 
  --light-secondary: #f7974e ; 
  --very-light-secondary: #fabb8c; 
  --accent-gradient-one-of-three: #F59121; 
  --accent-gradient-two-of-three: #F5A520; 
  --accent-gradient-three-of-three: #F5B91F; 
  --yellow-dark: #BB9909; 
  --accent-primary: #F4CC1E; 
  --lightyellow: #fae99e; 
  --lightblue: #A0A7F3 ; 
  --lightblue-zwei: #abb1f4; 
  --lightblue-drei: #c6caf8; 
  --verylightblue: #ebecfd; 
  --offblack: #32232C ; 
  --cebitecgray: #8295A4; 
  /*--offwhite: #e9dff1; */
  --ourbeige: #FFF6F2; 
  --darkerbeige: #e2dad7; 
  --background: #FFF6F2; 
  /*igem colours*/
  --igemdarkgreen: #006530; 
  --igemmediumgreen: #019968; 
  --igemlightgreen: #99cb9a; 


    --vp-ct: var(--text-primary); 
    --info-border-color: var(--accent-primary); 
    --info-bg-color: var(--lightyellow); 
    --info-title-color: var(--offblack); 
    --info-code-bg-color: var(--lightyellow); 

    --note-border-color: var(--text-primary); 
    --note-bg-color: var(--very-light-purple); 
    --note-title-color: var(--offblack);
    --note-code-bg-color: var(--very-light-purple);

    --tip-border-color: var(--offblack); 
    --tip-bg-color: var(--darkerbeige);  
    --tip-title-color: var(--offblack);
    --tip-code-bg-color: var(--offblack);

    --warning-border-color: var(--accen-secondary); 
    --warning-bg-color: var(--very-light-secondary);  
    --warning-title-color: var(--offblack);

    --danger-code-bg-color: var(--verylightblue); 
    --danger-border-color: var(--lightblue); 
    --danger-bg-color: var(--verylightblue);  
    --danger-title-color: var(--offblack);

    --markmap-a-color: var(--text-primary) !important; 

    --node-size: 60px; 
}
html{
  scroll-behavior: smooth;
}

.max400{
  max-height: 400px !important;
}
.none{
  display: none;
}

.small-row{
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-.5 * var(--bs-gutter-x));
  margin-left: calc(-.5 * var(--bs-gutter-x));
}

.col-max{
  flex: 0 0 0%;
  width: max-content !important; 
  min-width: 77% !important; 
  max-width: 90% !important;
}

.col-2{
  width:16.66666667% !important;
}


.col-1{
  width: 8.33333333% !important;
}
.col2punkt5{
  width: 20% !important;
}
.col-max-10{
  flex: 0 0 auto;
  max-width: 83.33333333% !important;
}

.col{
  max-width: 100% !important;
}
.no-pad{
  padding: 0 !important;
}
.no-marg{
  margin: 0 !important;
}
hr{
  color: var(--text-primary) !important;
  margin: 0 !important;
  opacity: 1 !important;
  height: 5px;
  border-width: 3px !important;
  margin-bottom: 10px !important;
}

/* * * * * * * */
/* * * BODY* * */
/* * * * * * * */
body {
  /* padding-top: 56px; */
  background-color: var(--ourbeige);
  color: #493843;
}
body.dark-mode {
  background-color: var(--offblack);
  color: white;
}
p {
  text-align: justify;
}
a {
  color: var(--accent-gradient-one-of-three) !important;
  text-decoration: none !important;
}
h3{
  margin-bottom: 2vw !important;
}
code{
  color:black !important;
}

.doi{
  color: var(--text-primary) !important;
}
.codesnippet{
  padding-left: 30px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 10px;
  margin-top: 10px;
  margin-bottom: 15px !important;
  color: var(--text-primary) !important;
  background-color: rgb(217, 217, 217);
}
/* * * * * * * */
/* *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;
}
.sideitem{
  min-height: 40px;
  display: inline-block;
}

.active-sideitem summary{
  color: white;
}

.sidesubtab ul{
  list-style-type: none;
}
.sidebar>div{
overflow: hidden;
text-align: left;
margin-left: 10px;