.gitignore

@@ -3,12 +3,20 @@ venv
 .vscode
 __pycache__
 .venv
+code/biblib-master
 node_modules
 versions
-code
 .vite
 app.py
 unused.py
 unused-css-master
-
-other
\ No newline at end of file
+my-chart-test
+other
+dist
+src/components/resources
+code/test.bib
+.DS_Store
+code/test file gitignore.txt
+src/.DS_Store
+vite.config.js.timestamp-1732367750130-6d00136194c2.mjs
+vite.config.js.timestamp-1733161862061-488217339257e.mjs

README.md

@@ -102,3 +102,16 @@ npm install -g yarn
 
 evtl: 
 yarn install
+
+
+
+
+
+kathleen
+malte
+Anna
+Vera:)
+isabell
+felicitas
+Christian
+Kai
\ No newline at end of file

code/cit.py

+# Voraussetzungen
+#- Python 3.x
+#- bibtexparser (Installieren Sie es mit `pip install bibtexparser`)
+# use like:  python3 cit.py -i bibtex.bib -s 1
+import re
+problemlist = []
+
+def main(): 
+
+    print("Starting program...")
+    try:
+        import bibtexparser
+    except ImportError:
+        print("The package 'bibtexparser' is not installed. Install with: pip install bibtexparser")
+        exit(1)
+    try:
+        import argparse
+    except ImportError:
+        print("The package  'argparse' is not installed.")
+        exit(1)
+    try:
+        import re
+    except ImportError:
+        print("The package  're' is not installed.")
+        exit(1)
+
+
+    try:
+        #reading command line input and parsing it 
+        parser = argparse.ArgumentParser(
+                            prog='HTML Citations',
+                            description='create acessible HTML Citations from bib files')
+        parser.add_argument('-i','--input', required=True, help="path to source bib")
+        parser.add_argument('-s','--startnumber', required=True, help="number from which to start numbering") 
+        
+        args = parser.parse_args()
+        print("Source: " + args.input)
+    except argparse.ArgumentError as e:
+            print(f"Argument parsing error: {e}")
+    except Exception as e:
+        print(f"An unexpected error occurred: {e}")
+    print("Reading file...")
+    #reading and parsing the file
+
+    try:
+        with open(args.input, 'r') as file:
+            file_content = file.read()
+        print("Parsing file...")
+        try:
+            library = bibtexparser.loads(file_content)
+            #opening output file 
+            try:
+                with open('output.txt', 'w') as out:
+                    length = len(library.entries)
+                    print("found " + str(length) + " entries")
+                    ran = range(length)
+                    startnum = int(args.startnumber); 
+                    count = 0; 
+                    #processing every entry and writing the dictionary for it 
+                    for x in ran:
+
+                        print("\n Initializing empty dictionary for entry "+ str(startnum+count) + "...")
+                        dictio = {}
+                        en_x = library.entries[x]
+                        print("Filling dictionary for entry "+ str(startnum+count) + "")
+                        
+                        
+                        for key, value in en_x.items(): 
+                            key_low = key.lower()
+                            dictio[key_low] = value
+                        
+                        print("Checking Entry type of "+ str(startnum+count) + "")
+                        if en_x['ENTRYTYPE'] == "article":
+                            articleHTML(dictio, (startnum+count), out)
+                        elif en_x['ENTRYTYPE'] == "misc":
+                            miscHTML(dictio, (startnum+count), out)
+                        elif en_x['ENTRYTYPE'] == "book":
+                            bookHTML(dictio, (startnum+count), out)
+                        elif en_x['ENTRYTYPE'] == "inbook":
+                            bookHTML(dictio, (startnum+count), out)
+
+                        count += 1; 
+
+            except Exception as e:
+                print(f"An unexpected error occurred: {e} in line 85")
+        except Exception as e:
+            print(f"An unexpected error occurred: {e} in line 87")
+    except FileNotFoundError:
+            print(f"Error: The file '{args.input}' was not found. line 89")
+    if len(problemlist)>0:
+        print("- - - - - - - - - - - - - - - - - ")
+        print("REMAINING ERRORS:")
+        
+        for p in problemlist:
+            print(p)
+    else: 
+        print("DONE")
+
+def makeauthors(authors, out):
+    print("Starting on authors...")
+    authors = authors.replace("\n", " ").replace(" and ", "|").strip()  # "and" durch "|" ersetzen und Whitespace entfernen
+    autlist = authors.split("|")
+
+    # Maximale Anzahl der anzuzeigenden Autoren
+    max_authors = 7
+    
+    out.write("\t<span property=\"schema:author\" typeof=\"schema:Person\">\n")  # Tag für Autoren öffnen
+    #print(autlist)
+    for i, a in enumerate(autlist):
+        try:
+            a = a.strip()  # Whitespace entfernen
+            
+            # Nachnamen und Vornamen aufteilen
+            if ',' in a:
+                s = a.split(", ")
+                last = s[0].strip()  # Nachname
+                first_names = s[1].strip() if len(s) > 1 else ''
+                
+                # Initialen für Vornamen erstellen
+                initials = '. '.join([n[0] for n in first_names.split()]) + '.' if first_names else ''
+                name = f"{last}, {initials}" if initials else f"{last}, "
+            else:
+                s = a.split()
+                last = s[-1].strip()  # Nachname
+                first = '. '.join([n[0] for n in s[:-1]]) + '.'  # Initialen der Vornamen
+                name = f"{last}, {first}"
+            
+            # Schreibe den Namen in die Ausgabedatei
+            if i < max_authors:
+                out.write(f"\t\t<span property=\"schema:Name\"> {name}</span>\n")
+            # Wenn wir den 6. Autor erreicht haben, schreibe "et al." nach dem 6. Autor
+            if i == max_authors:
+                out.write("\t\t<span property=\"schema:Name\"> et al.</span>\n")
+                break  # Stoppe die Schleife, nachdem "et al." hinzugefügt wurde
+            
+        except Exception as e:
+            print(f"An unexpected error occurred: {e} see " + a)
+
+    out.write("\t</span>\n")  # Tag für Autoren schließen
+
+
+
+def articleHTML(dictio, x, out):
+    print("Writing html code for article "+ str(x) + "...")
+    out.write("{/*<!-- Citation num " + str(x) + "--> */}" + "\n")
+    out.write("<li typeof=\"schema:ScolarlyArticle\" role=\"doc-biblioentry\" property=\"schema:citation\" id=\"desc-" + str(x) + "\">"+ "\n")
+    print("Just a sec, separating authors...")
+    authors = dictio['author']
+    print("giving authors...")
+    makeauthors(authors, out)
+#    out.write("\t" +"</span>"+ "\n")
+    title = dictio['title'].replace('{', '').replace('}', '')
+    out.write("\t" + "<span property=\"schema:name\">&nbsp;"+ title + "</span>. "+ "\n")
+    out.write("\t" +"<i property=\"schema:publisher\" typeof=\"schema:Organization\"> "+ dictio['journal'] +"</i>"+ "\n")
+    out.write("\t" +"<b property=\"issueNumber\" typeof=\"PublicationIssue\"> "+dictio['volume']+"</b>"+ "\n")
+    print("Getting pages...")
+    try:
+        pages = dictio['pages']
+        if pages is not None and len(pages) > 0:
+            # Überprüfen, ob die Seitenangabe nur aus Zahlen und Bindestrichen besteht
+                if '-' in pages or '–' in pages or '--' in pages or '–' in pages:
+                    pag = re.split('--|-|–|–', pages)
+                    begin = pag[0].strip()
+                    end = pag[1].strip()
+                    print("- in pages")
+                    out.write("\t" + ",&nbsp;<span property=\"schema:pageBegin\"> "+ begin +"</span>-<span property=\"schema:pageEnd\">"+ end + "</span>&nbsp;"+ "\n")
+                else:
+                    if re.match(r'^\d+(-\d+)?$', pages):  # Check for typical numeric page ranges
+                        out.write("\t" + "<span property=\"schema:pageBegin\">"+ pages +"</span>&nbsp;"+ "\n")
+                    else:
+                        # Seitenangabe ist nicht numerisch, als fehlend behandeln
+                        print(f"Non-numeric page information detected ('{pages}'). Treating as missing.")
+                        problemlist.append(f"Non-numeric page info at entry {x}")
+        else:
+            print("Sorry, no page information")
+            problemlist.append("Check for missing page info at " + str(x))
+    except KeyError:
+        print("Sorry, no page information")
+        problemlist.append("Check for missing page info at " + str(x))
+
+
+    year = dictio['year']
+    out.write("\t" +"(<time property=\"schema:datePublished\" datatype=\"xsd:gYear\" dateTime=\" " + year + "\">"+year+"</time>)."+ "\n")
+    
+    try:
+        doi = dictio['doi']
+        out.write("\t" +"<a className=\"doi\" href=\"https://doi.org/"+doi+"\"> doi: "+doi+"</a>"+ "\n")
+    except KeyError as e:
+        print("Sorry, no doi information")
+        problemlist.append("Check for missing doi info at " + str (x))
+
+    out.write("</li>" + "\n"+ "\n")
+
+
+
+
+
+def miscHTML(dictio, x, out):
+    print("Writing html code for entry "+ str(x) + "...")
+    out.write("{/*<!-- Citation num " + str(x) + "--> */}" + "\n")
+    out.write("<li typeof=\"schema:WebPage\" role=\"doc-biblioentry\" property=\"schema:citation\" id=\"desc-" + str(x) + "\">"+ "\n")
+    out.write("\t" + "<span property=\"schema:author\" typeof=\"schema:Organisation\">"+ "\n")
+    aut = dictio['author']
+    out.write("\t" + "\t" +"<span property=\"schema:Name\"> " + aut + "</span>."+ "\n")
+    out.write("\t" +"</span>"+ "\n")
+    out.write("\t" + "<span property=\"schema:name\">"+dictio['title']+ ".</span>"+ "\n")
+    out.write("\t" +"<i property=\"schema:publisher\" typeof=\"schema:Organization\">"+ dictio['howpublished'] +"</i>"+ "\n")
+    year = dictio['year']
+    out.write("\t" +"&nbsp;(<time property=\"schema:datePublished\" datatype=\"xsd:gYear\" dateTime=\"" + year + "\">"+year+"</time>)."+ "\n")
+    out.write("</li>" + "\n"+ "\n")
+
+def bookHTML(dictio, x, out):
+    print("Writing html code for entry "+ str(x) + "...")
+    out.write("{/*<!-- Citation num " + str(x) + "--> */}" + "\n")
+    out.write("<li typeof=\"schema:Book\" role=\"doc-biblioentry\" property=\"schema:citation\" id=\"desc-" + str(x) + "\">"+ "\n")
+   # out.write("\t" + "<span property=\"schema:author\" typeof=\"schema:Organisation\">"+ "\n")
+    print("Just a sec, separating authors...")
+    if 'author' in dictio:
+        authors = dictio['author']
+    elif 'editor' in dictio:
+        authors = dictio['editor']
+    makeauthors(authors, out)
+   # out.write("\t" + "\t" +"<span property=\"schema:Name\"> " + aut + "</span>."+ "\n")
+   # out.write("\t" +"</span>"+ "\n")
+    if 'title' in dictio:
+        out.write("\t" + "<span property=\"schema:name\">&nbsp;"+dictio['title']+ ".</span>"+ "\n")
+    elif 'booktitle' in dictio:
+        out.write("\t" + "<span property=\"schema:name\">&nbsp;"+dictio['booktitle']+ ".</span>"+ "\n")
+    else:
+        print(f"No title or booktitle found for entry {x}")
+        problemlist.append(f"Check for missing title or booktitle at entry {x}")
+
+    out.write("\t" +"<i property=\"schema:publisher\" typeof=\"schema:Organization\">&nbsp;"+ dictio['publisher'] +"</i>"+ "\n")
+    year = dictio['year']
+    out.write("\t" + "&nbsp;(<time property=\"schema:datePublished\" datatype=\"xsd:gYear\" dateTime=\"" + year + "\">"+year+"</time>)."+ "\n")
+    out.write("</li>" + "\n"+ "\n")
+
+
+main()
+

code/citations.py

+import biblib.bib
+import biblib.messages
+import biblib.algo
+from biblib import FileBibDB
+import argparse
+import sys
+import re
+
+fileDb = biblib.FileBibDB('test.bib', mode='r')

index.html

-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link
-      rel="shortcut icon"
-      href="https://static.igem.wiki/teams/5247/logos-team/precyse-no-slogan.png"
-      type="image/x-icon"
+    rel="icon" type="image/png" sizes="32x32"
+      href="https://static.igem.wiki/teams/5247/logos-team/precyse-no-slogan.ico"
     />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <!-- <script type="text/javascript" defer src="./assets/js/mapscript.js" charset="utf-8">
-        </script> -->
-      <!-- <script type="module" src="https://2024.igem.wiki/bielefeld-cebitec/mapscript.js"></script> -->
+
     <title>Bielefeld-CeBiTec - iGEM 2024</title>
   </head>
   <body>

package.json

@@ -13,37 +13,46 @@
   "dependencies": {
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
+    "@gsap/react": "^2.1.1",
     "@mui/icons-material": "^5.16.5",
     "@mui/lab": "^5.0.0-alpha.171",
     "@mui/material": "^5.16.5",
     "@mui/x-charts": "^7.11.0",
     "@popperjs/core": "^2.11.8",
-    "@refinedev/core": "^4.53.0",
+    "@types/three": "^0.168.0",
+    "aos": "^2.3.4",
     "beautiful-react-diagrams": "^0.5.1",
+    "bibtex-parser-js": "^0.0.2",
     "bootstrap": "^5.3.3",
+    "chart.js": "^4.4.4",
     "dangerously-set-html-content": "^1.1.0",
     "dompurify": "^3.1.5",
     "framer-motion": "^11.2.13",
+    "gsap": "^3.12.5",
+    "jarn": "^0.0.1",
     "markmap": "^0.6.1",
     "markmap-common": "^0.17.0",
-    "markmap-lib": "^0.17.0",
+    "markmap-lib": "^0.16.1",
     "markmap-toolbar": "^0.17.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.2",
+    "react-chartjs-2": "^5.2.0",
     "react-collapsed": "^4.1.2",
     "react-dom": "^18.2.0",
-    "react-js-diagrams": "^3.1.3",
-    "react-pdf": "^9.0.0",
+    "react-js-diagrams": "^2.3.2",
     "react-photo-album": "^2.4.1",
-    "react-router-dom": "^6.23.0",
+    "react-router-dom": "^6.26.0",
     "react-select": "^5.8.0",
     "react-slick": "^0.30.2",
     "sass": "^1.77.6",
+    "three": "^0.168.0",
     "victory": "^37.0.2",
     "yarn": "^1.22.22"
   },
   "devDependencies": {
+    "@types/aos": "^3.0.7",
     "@types/dompurify": "^3.0.5",
+    "@types/faker": "^6.6.9",
     "@types/jquery": "^3.5.30",
     "@types/node": "^20.12.10",
     "@types/react": "^18.2.66",
@@ -52,7 +61,7 @@
     "@types/react-slick": "^0.23.13",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react": "^4.3.1",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",

src/App/App.css

@@ -3,17 +3,28 @@
 /* * * * * * * */
 :root {
   /* our colours*/ 
-  --text-primary: #850F78; 
+  --ourgradient: linear-gradient(90deg, rgba(147,94,184,1) 0%, rgba(160,167,243,1) 100%);
+  --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; 
@@ -22,46 +33,155 @@
   --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-title-color: var(--offblack); 
     --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);
+    --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(--lightorange);  
-    --warning-title-color: var(--text-primary);
-    --warning-code-bg-color: var(--lightorange); 
+    --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; 
+    --big-margin: 30px; 
+    --simple-margin: 20px; 
+    --small-margin: 10px; 
+    --big-padding: 30px; 
+    --simple-padding: 20px; 
+    --small-padding: 10px; 
+    --button-padding: 5px; 
+    --border-radius: 10px; 
+    --thin-border: 1px; 
+    --thick-border: 5px; 
+}
+html{
+  scroll-behavior: smooth;
+}
+.container-fluid{
+  max-width: 1600px !important;
+}
+.max-1240{
+  max-width: 1240px !important;
 }
 
+.max400{
+  max-height: 400px !important;
+}
 .none{
   display: none;
 }
 
+nav .scrolllink span{
+  color: var(--ourbeige)!important;
+}
+
+.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;
+}
+
+sup  a{
+  font-weight: bolder !important;
+  font-size: small !important;
+}
+
+.col-1{
+  width: 8.33333333% !important;
+}
+.col2punkt5{
+  width: 20% !important;
+}
+.col-max-10{
+  flex: 0 0 auto;
+  max-width: 83.33333333% !important;
+}
+.col {
+  padding-left: var(--simple-padding) !important;
+  padding-right: var(--simple-padding) !important;
+}
+
+/* h6 {
+  padding-left: var(--small-padding) !important;
+  padding-right: var(--small-padding) !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: var(--simple-margin) !important;
+}
 
 /* * * * * * * */
 /* * * BODY* * */
 /* * * * * * * */
+
+@font-face { font-family: "AcuminPro"; src: url('https://static.igem.wiki/teams/5247/design/fonts/acumium-pro-book.ttf') format("truetype"); } 
+
+.progress-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 5;
+  height: 4.5rem;
+  background: var(--darkerbeige) !important;
+  transform-origin: 0%;
+}
 body {
-  /* padding-top: 56px; */
   background-color: var(--ourbeige);
-  color: #493843;
+  color: var(--offblack); 
+  font-family: AcuminPro !important;
+  max-width: 100% !important;
 }
 body.dark-mode {
   background-color: var(--offblack);
-  color: white;
+  color: var(--ourbeige);
 }
 p {
   text-align: justify;
@@ -70,18 +190,30 @@ a {
   color: var(--lightblue) !important;
   text-decoration: none !important;
 }
+.our-h3{
+  margin-top: var(--simple-margin) !important;
+  margin-bottom: var(--simple-margin) !important;
+}
+.short-hr{
+  height: 1px !important;
+  border-width: 2px !important;
+}
+
 
 code{
-  color:black !important;
+  color:var(--offblack) !important;
 }
 
+.doi{
+  color: var(--lightblue) !important;
+}
 .codesnippet{
   padding-left: 30px;
   padding-top: 5px;
   padding-bottom: 5px;
   border-radius: 10px;
-  margin-top: 10px;
-  margin-bottom: 15px !important;
+  margin-top: var(--simple-margin);
+  margin-bottom: var(--simple-margin) !important;
   color: var(--text-primary) !important;
   background-color: rgb(217, 217, 217);
 }
@@ -92,7 +224,7 @@ code{
 .sidebar{
   border-left: 6px solid;
   border-left-color: var(--text-primary);
-  border-color: var(--accent-primary);
+  border-color: var(--lightblue);
   color: var(--text-primary);
   list-style-type: none;
   line-height: 280%;
@@ -100,47 +232,68 @@ code{
   padding: 0px 0px;
 }
 .sidebar>div>a>span:hover{
-  text-shadow: 5px 5px 15px black;
+  text-shadow: 5px 5px 15px var(--offblack) var(--offblack);
   transition: all 0.1s linear;
 }
+.sideitem{
+  min-height: 40px;
+  display: inline-block;
+}
+
+.active-sideitem summary{
+  color: var(--ourbeige);
+}
+
+.sidesubtab ul{
+  list-style-type: none;
+}
 .sidebar>div{
 overflow: hidden;
-text-align: center;
+text-align: left;
+margin-left: var(--simple-margin);
 cursor: pointer;
 }
+
+
 .sidebar>div>a>span{
-padding: 1rem;
+padding: 0.5rem;
 color: var(--text-primary);
 }
-.active-scroll-spy{
-  background-color: yellowgreen !important;
-}
+
 
 /* * * * * * * */
 /* * GENERAL * */
 /* * * * * * * */
+
+section{
+  margin-bottom: var(--big-margin) !important;
+  margin-top: var(--big-margin) !important;
+  padding-top: var(--big-padding) !important;
+}
+
 .relative{position: relative;}
 .absolute{position: absolute;}
-.left-aligned {margin-left: auto;}
 .align-items-center{align-items:center!important}
-.zweirem{padding: 2rem;}
+.zweirem{padding-top: 2rem; padding-bottom: 3rem;}
 .left{float: left;}
 .right{float: right;}
 .sticky-top {
   position: -webkit-sticky;
   position: sticky !important; 
-  top: 0;
   z-index: 1020;
-  top: 80px !important; 
+  top: 100px !important; 
   overflow-wrap: break-word;
 }
+.small-only{
+  display: none;
+}
 .fullsize{
   max-height: 100% !important;
   max-width: 100% !important; 
 }
 .header-container{
-  padding-top: 380px;
-  padding-bottom: 60px;
+  padding-top: 0;
+  padding-bottom: 10px;
   background-color: var(--ourbeige);
 }
 .null{
@@ -166,15 +319,16 @@ color: var(--text-primary);
 /* *  NAVBAR * */
 /* * * * * * * */
 .nav-link{
-  color: var(--text-primary) !important; 
+  color: var(--offblack) !important; 
 }
 .nav-link:hover {
-  color: white !important;
+  color: var(--ourbeige) !important;
   background-color: var(--text-primary) !important;
   border-radius: 7px;
 }
 .navbar{
   backdrop-filter: blur(5px);
+  background-color: rgb(255,246,242, 0.8);
   transition: visibility 0s, 0.6s, opacity 0.6s linear, transform 1s;
 }
   nav.navbar {
@@ -185,17 +339,17 @@ color: var(--text-primary);
   color: var(--text-primary) !important;
 }
 .dropdown-item:hover{
-  color: white !important;
+  color: var(--ourbeige) !important;
   background-color: var(--text-primary) !important;
 }
 .nav-item.dropdown:hover .dropdown-menu {
   display: block;
-  background-color: white;
+  background-color: var(--ourbeige);
   border-color: var(--text-primary);
   border-radius: 7px;
 }
 .navbar-brand{
-  color: var(--text-primary) !important;
+  color: var(--offblack) !important;
 }
 .dropdown-menu{
   margin-top: 0 !important;
@@ -208,20 +362,41 @@ table {
 }
 
 td, th {
-  border: 1px solid black;
+  border: 1px solid var(--offblack);
   text-align: left;
   padding: 8px;
 }
 
-tr:nth-child(even) {
+.min-w-full{
+  min-width: 100% !important;
+}
+
+.parttable thead tr td:nth-child(4){ /* length */
+  max-width: 40px !important;
+}
+.parttable thead tr td:nth-child(5){ /* type */
+  max-width: 40px !important;
+}
+.parttable thead tr td:nth-child(2){ /* code */
+  max-width: 60px !important;
+}
+.parttable thead tr td:nth-child(1){ /* name */
+  max-width: 60px !important;
+}
+
+thead tr {
+  background-color: var(--text-primary) !important;
+  color: var(--background);
+}
+
+tbody tr:nth-child(even) {
   background-color: #ededed;
 }
-tr:nth-child(odd) {
+tbody tr:nth-child(odd) {
   background-color: #f3f3f3;
 }
-tr:nth-child(1) {
-  background-color: var(--lightblue) !important;
-}
+
+
 
 /* * * * * * * */
 /* BACKGROUND  */
@@ -229,12 +404,37 @@ tr:nth-child(1) {
 .bg-video-container{
 margin-bottom: 10vw !important;
 }
+.b-lg{
+  border-color: var(--igemlightgreen) !important;
+}
+.b-lo{
+  border-color: var(--light-secondary) !important;
+}
+.bg-lg{
+  background-color: var(--igemlightgreen) !important;
+}
+.bg-lp{
+  background-color: var(--lightpurple) !important;
+}
+.bg-lo{
+  background-color: var(--light-secondary) !important;
+}
+.bg-db{
+  background-color: var(--darkerbeige) !important;
+}
+.bg-lb{
+  background-color: var(--lightblue) !important;
+}
+.bg-w{
+  background-color: white !important;
+}
 .bg-d{
   background-color: var(--text-primary) !important;
+  color: var(--ourbeige);
 }
 .bg-l{
   background-color: var(--text-primary) !important;
-  color: white;
+  color: var(--ourbeige);
 }
 .bg-transp{
   background:transparent;
@@ -247,61 +447,58 @@ margin-bottom: 10vw !important;
 
 .base {
   width: 100%;
-  background-color: var(--accent-primary);
+  background-color: var(--lightblue);
   padding: 120px 30px;
 }
 
 .header-title{
-  color: var(--text-primary);
-  text-align: left;
-  align-self: flex-start;
+  text-align: center;
+  align-items: center;
+  margin: auto !important;
   padding: 0 30px;
   font-size: 130px;
   font-weight: 900;
   line-height: 130px;
 }
 
-/* p:first-child::first-letter{
-  color:var(--text-primary);
-  font-weight: bold;
-  font-size: x-large; 
-} */
 .popart{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  font-size: 5vw;
+  font-size: 5rem;
 	letter-spacing:0.1em;
   -webkit-text-fill-color: transparent;
   -webkit-text-stroke-width: 0.3vw;
   -webkit-text-stroke-color: var(--accent-primary);
   text-shadow: 
-						0.4vw 0.4vw var(--mediumpurple),
-						0.8vw 0.8vw var(--offblack);
+						0.4vw 0.4vw var(--text-primary ),
+						1vw 1vw var(--offblack);
 }
-h2{
-  font-size: 3rem !important;
-  -webkit-background-clip: text !important;
-  -webkit-text-stroke-width: 2px !important;
-  -webkit-text-stroke-color: var(--text-primary) !important;
-  background-clip: text !important;
-  color: transparent !important;
-  padding-top: 15px !important;
-  background-image: repeating-linear-gradient(-45deg, var(--text-primary) 0, var(--text-primary) 2px, white 2px, white 4px) !important;
+.popart-wrapper{
+  min-height: 5vw;
+  margin-bottom: 20px !important;
 }
 
+
+ h1, h2, h3, h4, h5{
+  margin-top: var(--simple-margin) !important;
+  margin-bottom: var(--simple-margin) !important;
+  color: var(--text-primary) !important;
+  font-weight: bolder !important;
+ }
+
 .underline--magical {
   background-image: linear-gradient(120deg, var(--lightblue) 0%, var(--mediumpurple) 100%);
   background-repeat: no-repeat;
-  color: black;
+  color: var(--offblack);
   background-size: 100% 0.2em;
   background-position: 0 105%;
   transition: background-size 0.25s ease-in;
 }
 .underline--magical:hover {
   background-size: 100% 100%;
-  color: black !important;
+  color: var(--offblack) !important;
   text-decoration: none !important;
 } 
 
@@ -321,7 +518,7 @@ h2{
   background-image: linear-gradient(#a0aec0, #a0aec0);
 }
 .v3:hover p {
-  color: #000;
+  color: var(--offblack);
   background-size: 0% 100%;
 }
 
@@ -367,7 +564,7 @@ h2{
 }
 
 .bd-callout-danger {
-  border-left-color: #d9534f;
+  border-left-color: var(--lightblue);
 }
 
 /* * * * * * * */
@@ -377,115 +574,127 @@ footer{
   background-color: var(--background);
 }
 footer a {
-  color: white;
+  color: var(--ourbeige) !important;
   font-weight: bold;
   text-decoration: none;
 }
 footer a:hover {
-  color: white;
+  color: var(--lightblue) !important;
   text-decoration: underline;
 }
 
 
-/* * * * * * * * */
-/* * *BUTTONS* * */
-/* * * * * * * * */
-.hp-more-button{
-  padding: 5px;
-  border-radius: 10px;
-  padding-left: 10px;
-  padding-right: 10px;
-  margin-left: 5px;
-  margin-right: 5px;
-}
-.hp-more-button:hover, .bfh-more-button:hover{
-  filter: brightness(0.5);
-}
-  
-.bfh-more-button{
-  margin-top: 10px;
-  padding: 5px;
-  border-radius: 10px;
-  padding-left: 10px;
-  padding-right: 10px;
-  margin-left: 5px;
-  margin-right: 5px;
-}
 
-/* * * * * * * * */
-/*VILLAGE BUTTONS*/
-/* * * * * * * * */
-.bottom-buttons{
-  margin-top: 50px !important; 
-  margin-bottom: 20px;
-  padding-left: 30px;
-}
-.normal-buttons{
-  margin-top: 10px !important; 
-  margin-bottom: 20px;
-  padding-left: 30px;
-}
-.village-style-button{
-  box-shadow: 5px 5px 15px gray !important;
-  border-radius: 2rem !important;
-  padding: 0 !important;
-  max-width: 12% !important;
-  aspect-ratio: 2 / 3 !important; 
-  margin-left: 1vw;
-}
-.village-style-button:hover{
-  box-shadow: 5px 5px 15px black !important;
-}
-.village-style-button h3{
-  text-align: center !important;
-  font-size: 10px;
-  font-weight: bold;
-  color: #000;
-}
-.village-style-button img{
-  max-width: 70% !important;
-  max-height: 70% !important;
-  padding-top: 20px !important;
-}
+
 
 /* * * * * * * * * */
 /* * *  IMAGES * * */
 /* * * * * * * * * */
+.teamcolzwei{
+  margin-top: 3rem !important;
+}
+
+
 img,
 picture,
 svg {
   max-width: 100%;
   display: block;
 }
+.winner-img{ /* @media  */
+  margin-left: 20px;
+  width: 5vw !important;
+  max-height: 100px;
+  margin-top: 10px !important;
+}
+.s-svg{
+  max-width: 80%;
+}
 img .middle{
   vertical-align:middle;
 }
 
+.sechpro{
+  margin-top: 25% !important;
+  margin-bottom: 20% !important;
+}
+
 /* .sponsor-portrait{
   border: 5px solid var(--accent-primary);
 } */
+.pronouns{
+  font-size: 1rem !important;
+  font-style: italic !important;
+}
+.team-name{
+  font-size: 1.6rem !important;
+  font-weight: bold;
+  text-align: left !important;
+  width: fit-content !important;
+}
+.team-img{
+  border-radius: 50% !important;
+}
 .socials{
-  height: 1.5rem;
+  height: 2rem;
   width: auto;
   margin: 0.5rem;
 }
+.team-socials{
+  height: 1rem;
+  width: auto;
+  margin-left: 0.2rem;
+}
+.steckbrief{
+  margin-top:  2rem !important;
+}
+.steckbrief-box{
+  height: fit-content; 
+  padding: 10px;
+  border-radius: 30px;
+  box-shadow: 3px 3px 5px gray !important;
+}
+.steckbody{
+  height: 190px !important;
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+.brieffacts{
+  overflow-y: scroll;
+  overflow-x: hidden;
+  height: 270px !important;
+}
+.frontbutton, .backbutton{
+  background-color: var(--mediumpurple) !important;
+  color: var(--background) !important;
+  padding: 5px;
+  border-radius: 10px;
+  margin: auto;
+ 
+}
+.parent-button{
+  display: flex;
+  align-items: center !important;
+}
+
 .spin {
   transition: transform 1s ease-in-out;
 }
 .spin:hover{
     transform: rotate(360deg);
 }
+
+.side-margins-auto {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
 .img-sponsor{
   max-width: 70%;
   max-height: 150px;
-  margin-left: auto;
-  margin-right: auto;
 }
 .img-sponsor-partner-page{
   max-width: 70%;
   max-height: 100px;
-  margin-left: auto;
-  margin-right: auto;
   padding-bottom: 10px;
   padding-top: 10px;
 }
@@ -504,9 +713,29 @@ img .middle{
 .img-half{
   max-width: 50% !important;
 }
+.interview-img{
+  max-height: 70% !important;
+}
+
 
 .img-round{
   border-radius: 50%;
+  width: 120px;
+  height: 120px;
+  max-height: 13vh; 
+  max-width: 13vh; 
+  object-fit: cover !important;
+}
+
+.img-round-panel{
+  border-radius: 50%;
+  width: 100px;
+  height: 100px;
+  max-height: 10vh;
+  max-width: 10vh; 
+  object-fit: cover !important;
+}
+.img-cube{
   max-width: 80%;
 }
 .updown{
@@ -517,12 +746,13 @@ img .middle{
   clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
 }
 .sponsor-portrait{
+  border-radius: 10px !important;
   border: 5px solid var(--accent-primary);
-  background-color: white;
+  background-color: var(--ourbeige);
 }
 
 .sponsor-text-right{
-  margin-left: 20px;
+  margin-left: var(--simple-margin);
 }
 .sponsor-text-left{
   margin-right: 20px;
@@ -542,9 +772,10 @@ img .middle{
   display: flex;
   vertical-align: middle;
 }
+
 #idt-portrait{
   height: 350px !important; 
-  background-image: url(https://static.igem.wiki/teams/5247/photos/lab/in-inhaler-flipped.jpg);
+  background-image: url(https://static.igem.wiki/teams/5247/sponsors/idt-foto.png);
   background-size: auto 100%;
   background-repeat: no-repeat;
 }
@@ -557,7 +788,7 @@ img .middle{
   background-image: url(https://static.igem.wiki/teams/5247/sponsors/integra-foto.jpg);
   background-size: auto 100%;
   background-repeat: no-repeat;
-  background-color: white;
+  background-color: var(--ourbeige);
 }
 #integra-portrait-logo{
   padding-top: 10px;
@@ -583,68 +814,6 @@ svg{
 }
 
 
-
-
-/* * * * * * * */
-/* MEDIA RULES */
-/* * * * * * * */
-/*For tablet or bigger*/
-@media screen and (min-width: 992px) {
-  /* navbar opens on hover*/ 
-  .dropdown:hover .dropdown-menu {
-      display: block;
-  }
-}
-/*For Tablet and smaller*/
-@media screen and (max-width: 992px){
-
-}
-/*For Smartphones*/
-@media screen and (max-width: 768px){
-  svg text{
-    font-size: 9vw;
-    stroke-width:1px;
-  }
-  .village-style-button h3{
-    display: none !important;
-  }
-  .village-style-button{
-    box-shadow: 1px 1px 1px gray;
-    border-radius: 10px;
-    border-color: black;
-  }
-  .village-style-button:hover{
-    box-shadow: none;
-  }
-  .village-style-button img{
-    max-width: 90%;
-    max-height: 90%;
-    padding-top: 10px;
-    padding-bottom: 5px;
-  }
-  .img-half{
-    max-width: 100% !important;
-  }
-}
-/*Bigger than smartphones*/
-@media only screen and (min-width: 768px) {
-  .col-1 {width: 8.33%;}
-  .col-2 {width: 16.66%;}
-  .col-3 {width: 25%;}
-  .col-4 {width: 33.33%;}
-  .col-5 {width: 41.66%;}
-  .col-6 {width: 50%;}
-  .col-7 {width: 58.33%;}
-  .col-8 {width: 66.66%;}
-  .col-9 {width: 75%;}
-  .col-10 {width: 83.33%;}
-  .col-11 {width: 91.66%;}
-  .col-12 {width: 100%;}
-
-  
-}
-
-
 /* * * * * * * */
 /* * EFFECTS * */
 /* * * * * * * */
@@ -680,7 +849,7 @@ svg{
 }
 .spacer {
   height: 50vh;
-  background-color: #000;
+  background-color: var(--offblack);
 }
 
 .hello:hover {
@@ -693,14 +862,14 @@ svg{
   animation-iteration-count: infinite;
   animation-timing-function: ease-in-out;
   -webkit-text-stroke-width: 3px;
-  -webkit-text-stroke-color: black;
+  -webkit-text-stroke-color: var(--offblack);
 }
 .terminal-box{
   margin-top: 10px;
   margin-bottom: 10px;
-  background-color: black;
+  background-color: var(--offblack);
   border-radius: 10px;
-  color: white;
+  color: var(--ourbeige);
   padding-left: 30px;
   padding-right: 20px;
   padding-top: 10px;
@@ -725,163 +894,19 @@ svg{
   display: inline-flex;
   margin-top: 10px;
   margin-bottom: 10px;
-  background-color: black;
+  background-color: var(--offblack);
   border-radius: 10px;
-  color: white;
+  color: var(--ourbeige);
   padding-left: 30px;
   padding-right: 20px;
   padding-top: 10px;
   padding-bottom: 10px;
 }
-/* TIMELINE EINS */
 
-.timeline-container {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  margin: 40px 0;
-}
-
-.timeline-container::after {
-  background-color: var(--text-primary);
-  position: absolute;
-  left: calc(50% - 2px);
-  content: "";
-  width: 4px;
-  height: 100%;
-  z-index: 0;
-}
-.timeline-item {
-  min-width: 100px;
- /*  display: flex; */
-  justify-content: flex-end;
-  padding-right: 30px;
-  position: relative;
-  margin: 10px 0;
-  width: 50%;
-}
-
-.timeline-item:nth-child(odd) {
-  align-self: flex-end;
-  justify-content: flex-start;
-  padding-left: 30px;
-  padding-right: 0;
-}
-.timeline-item-content {
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-  border-radius: 5px;
-  background-color: #fff;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  padding: 15px;
-  position: relative;
-  text-align: right;
-}
-.timeline-end{
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-  border-radius: 5px;
-  background-color: #fff; 
-  padding: 15px;
-  position: relative;
-  text-align: center;
-  z-index: 1;
-  margin-top: 8vw;
-}
-.timeline-begin{
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-  border-radius: 5px;
-  background-color: #fff; 
-  padding: 15px;
-  position: relative;
-  text-align: center;
-  z-index: 1;
-  margin-bottom: 8vw;
-}
-
-.timeline-item-content::after {
-  background-color: #fff;
-  box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
-  position: absolute;
-  right: -7.5px;
-  top: calc(50% - 7.5px);
-  transform: rotate(45deg);
-  width: 15px;
-  height: 15px;
-}
-
-.timeline-item:nth-child(odd) .timeline-item-content {
-  text-align: left;
-  align-items: flex-start;
-}
-
-.timeline-item:nth-child(odd) .timeline-item-content::after {
-  right: auto;
-  left: -7.5px;
-  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
-}
-.timeline-item-content .tag {
-  color: #fff;
-  font-size: 12px;
-  font-weight: bold;
-  top: 5px;
-  left: 5px;
-  letter-spacing: 1px;
-  padding: 5px;
-  position: absolute;
-  text-transform: uppercase;
-}
-
-.timeline-item:nth-child(odd) .timeline-item-content .tag {
-  left: auto;
-  right: 5px;
-}
-
-.timeline-item-content time {
-  color: var(--lightblue);
-  font-size: 12px;
-  font-weight: bold;
-}
-
-.timeline-item-content p {
-  font-size: 16px;
-  line-height: 24px;
-  margin: 15px 0;
-/*   max-width: 250px; */
-}
-.timeline-item-content span{
-  font-size: 18px;
-}
-
-.timeline-item-content a {
-  font-size: 14px;
-  font-weight: bold;
-}
-
-.timeline-item-content a::after {
-  font-size: 12px;
-}
-
-.timeline-item-content .circle {
-  background-color: #fff;
-  border: 3px solid var(--text-primary);
-  border-radius: 50%;
-  position: absolute;
-  top: calc(50% - 10px);
-  right: -40px;
-  width: 20px;
-  height: 20px;
-  z-index: 100;
-}
-
-.timeline-item:nth-child(odd) .timeline-item-content .circle {
-  right: auto;
-  left: -40px;
-}
-@media only screen and (max-width: 1023px) {
-  .timeline-item-content {
-      max-width: 100%;
-  }
+@media only screen and (max-width: 1023px) {
+  .timeline-item-content {
+      max-width: 100%;
+  }
 }
 
 @media only screen and (max-width: 767px) {
@@ -909,196 +934,15 @@ svg{
       display: none;
   }
 }
-/* Horizontal */
-.timeline {
-  white-space: nowrap;
-  min-height: 500px;
-  width: 83vw;
-  overflow-x: auto;
-  overflow-y: hidden;
-  background-color: inherit; 
-  font-size: 1rem; 
-}
-
-.timelineol {
-  font-size: 0;
-  width: 100vw;
-  padding: 250px 0;
-  transition: all 1s;
-}
-
-
-.t-tag{
-  box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
-  color: #fff;
-  font-size: 12px;
-  font-weight: bold;
-  letter-spacing: 1px;
-  padding: 5px;
-  margin-bottom: 10px;
-  text-transform: uppercase;
-  width: fit-content !important;
-}
-
-
-button.tabbutton.Patient.active, button.tabbutton.All.active, 
-button.tabbutton.Industry.active, button.tabbutton.Academia.active, 
-button.tabbutton.Medical.active, .modulators.active, .inhalations.active{
-  border-color: black;
-}
-
-button.tabbutton:nth-child(1){
-  background-color: white;
-}
-
-.Patient, button.tabbutton:nth-child(2){
-  background-color: var(--accen-secondary);
-}
-
-.Medical, button.tabbutton:nth-child(3){
-  background-color: var(--accent-primary);
-}
-
-.Academia, .Research, button.tabbutton:nth-child(4){
-  background-color: var(--lightblue);
-}
-
-.Industry, button.tabbutton:nth-child(5){
-  background-color: var(--mediumpurple);
-}
-button.tabbutton:nth-child(6){
-  background-color: var(--igemlightgreen);
-}
-
-.Ethics{
-  background-color: var(--offblack); 
-}
-
-.timelineolli {
-  position: relative;
-  display: inline-block;
-  list-style-type: none;
-  width: 160px;
-  height: 5px;
-  /* background-image: url("../components/data/stroke.svg");
-  background-size: auto 100%;
-  background-repeat: round;
-  background-position: 0em; */ 
-  background: var(--text-primary); 
-}
-.timeline ol li:last-child {
-  width: 280px;
-}
-
-
-.timeline ol li:not(:first-child) {
-  margin-left: 14px;
-}
-
-.timeline ol li:not(:last-child)::after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: calc(100% + 1px);
-  bottom: 0;
-  width: 12px;
-  height: 12px;
-  transform: translateY(-50%);
-  border-radius: 50%;
-  background: var(--text-primary);
-}
-
-
-.timeline ol li .timeline-item {
-  min-height: 310%;
-  position: absolute;
-  left: calc(100% + 7px);
-  width: 280px;
-  padding: 15px;
-  font-size: 0.9rem;
-  white-space: normal;
-  color: black;
-  background: white;
-}
-.timeline ol li:nth-child(2n+1) .moretop{
-  top: -30px !important;   
-}
-
-.timeline ol li .timeline-item::before {
-  content: '';
-  position: absolute;
-  top: 100%;
-  left: 0;
-  width: 0;
-  height: 0;
-  border-style: solid;
-  
-}
-
-.timeline ol li:nth-child(odd) .timeline-item {
-  top: -16px;
-  transform: translateY(-100%);
-  box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
-}
-
-.timeline ol li:nth-child(even) .timeline-item {
-  box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
-  top: calc(100% + 16px);
-}
-.timeline ol li:nth-child(odd) .timeline-item::before {
-  top: 100%;
-  border-width: 8px 8px 0 0;
-  border-color: white transparent transparent transparent;
-}
-.timeline ol li:nth-child(even) .timeline-item::before {
-  top: -8px;
-  border-width: 8px 0 0 8px;
-  border-color: transparent transparent transparent white;
-}
 
 
 
-
-
-
-.card {
-  border-radius: 4px;
-  background-color: #fff;
-  color: #333;
-  padding: 10px;
-  box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
-  width: 100%;
-  max-width: 560px;
-  
-}
-
-.date {
-  background-color: var(--text-primary) !important;
-  padding: 4px !important;
-  color: #fff !important;
-  border-radius: 4px !important;
-  font-weight: 500;
-  font-size: .85rem;
-}
-.imageAtom{
-  object-fit: cover;
-  overflow: hidden;
-  width: 100%;
-  max-height: 400px;
-}
 .imageCredit { margin-top: 10px; font-size: 0.85rem }
 .imageText { margin-bottom: 10px; font-size: 1rem }
 .events{ padding: 10px }
 .event { margin-bottom: 20px }
 
-.date-col{
-  position: relative;
-    background-color: #fff ;
-    padding: 10px;
-    width: 10%;
-    border-right: #000;
-    border-right-width: 2px;
-}
+
 
 .card-col{
   width: 100%;
@@ -1136,31 +980,50 @@ button.tabbutton:nth-child(6){
   max-width: 40%;
 }
 
-
 .download-butt{
-  background-color: var(--text-primary);
-  padding: 0.5vw;
+  color: var(--ourbeige) !important;
+  display: inline-block;
+  height: 50px !important;
+}
+.download-butt{ /* @media unnötig */
+  background: var(--ourgradient); 
+  padding: 0.5vh !important;
   border-radius: 5px;
   margin: auto !important;
-  width: fit-content !important;
-}
+  text-align: center;
+  min-width: 5vw !important;
+  width: 30vw !important; 
+  max-width: 200px !important;
+  min-height: 2vh !important;
+} 
 .download-col{
-  height: 5vw !important;
   display: flex;
+  margin-top: var(--simple-margin) !important;
+  margin-bottom: var(--simple-margin) !important;
   align-items: center !important;
 }
-.small-i{
-  width: 80%;
+.small-i{ /* @media unnötig */
+  width: 100%;
+  max-width: 1100px !important;
+}
+.one-pdf-line{ /* @media fertig */
+  max-height: 650px !important;
+  height: 100vh !important;
+  max-width: 40% !important;
+}
+.two-pdf-line{ /* @media fertig */
+  min-height: 650px !important;
+  height: 100vh !important;
 }
-
 
 /* SHAPES */
 .circle {
   display: flex;
   width: 10vw;
+  color: var(--ourbeige);
   height: 10vw;
-  background-color: var(--lightblue) !important;
-  box-shadow: 3px 3px 10px black !important;
+  background-color: var(--text-primary) !important;
+  box-shadow: 3px 3px 10px var(--offblack) !important;
   border-radius: 50%;
   margin: 1vw;
 } 
@@ -1173,21 +1036,27 @@ button.tabbutton:nth-child(6){
 /*collapsible*/ 
 
 .collapse-card {
+  margin-bottom: var(--big-padding) !important;
   border-radius: 4px;
-  background-color: var(--ourbeige);
-  margin-top: 10px;
+  margin-top: 20px;
   color: #333;
   padding: 5px;
   box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
   width: 100%;
   
 }
-
+.collapse-card .btn {
+  margin-right: var(--simple-margin);
+}
+.collapse-card h6 {
+  margin-top: auto !important;
+  margin-bottom: auto !important;
+}
 
 /*boxes*/
 .hint-container {
   position:relative;
-  transition:background var(--vp-ct),border-color var(--vp-ct),color var(--vp-ct)
+  transition:background var(--vp-ct)border-color var(--vp-ct),color var(--vp-ct)
 }
 @media print {
   .hint-container {
@@ -1294,7 +1163,60 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
 .hint-container.info code {
   background:var(--info-code-bg-color)
 }
+.hint-container.danger {
+  border-color:var(--danger-border-color);
+  background:var(--danger-bg-color)
+}
+.hint-container.danger>.hint-container-title {
+  color:var(--danger-title-color)
+}
+.hint-container.danger>.hint-container-title:before {
+  background-image:url("")
+}
+.hint-container.danger code {
+  background:var(--danger-code-bg-color)
+}
+.hint-container.tip {
+  border-color:var(--tip-border-color);
+  background:var(--tip-bg-color) !important; 
+}
+.hint-container.tip>.hint-container-title {
+  color:var(--tip-title-color)
+}
+.hint-container.tip>.hint-container-title:before {
+  background-image:url("")
+}
+.hint-container.tip code {
+  background:var(--tip-code-bg-color)
+}
+
+.hint-container.warning {
+  border-color:var(--warning-border-color);
+  background:var(--warning-bg-color) !important;
+}
+.hint-container.warning>.hint-container-title {
+  color:var(--warning-title-color);
+}
+.hint-container.warning>.hint-container-title:before {
+  background-image:url("")
+}
+.hint-container.warning code {
+  background:var(--warning-code-bg-color)
+}
 
+.hint-container.note {
+  border-color:var(--note-border-color);
+  background:var(--note-bg-color) !important;
+}
+.hint-container.note>.hint-container-title {
+  color:var(--note-title-color);
+}
+.hint-container.note>.hint-container-title:before {
+  background-image:url("")
+}
+.hint-container.note code {
+  background:var(--note-code-bg-color)
+}
 
 /*POPUP*/
 .popup {
@@ -1314,7 +1236,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
   min-width: 50vw;
   min-height: 20vw;
   background-color: #555;
-  color: #fff;
+  color: var(--ourbeige);
   text-align: center;
   border-radius: 6px;
   z-index: 1;
@@ -1333,7 +1255,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
 }
 .tl-butt img:hover{
   cursor: pointer;
-  box-shadow: 3px 3px 10px black;
+  box-shadow: 3px 3px 10px var(--offblack);
 }
 /* Add animation (fade in the popup) */
 @-webkit-keyframes fadeIn {
@@ -1389,7 +1311,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
 .wrapper{
 	width: 500px;
 	height: 100%;
-	background: #fff;
+	background: var(--ourbeige);
 	margin: 15px auto 0;
 }
 .wrapper .tabs_wrap{
@@ -1431,7 +1353,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
 .wrapper .tabs_wrap ul li:hover,
 .wrapper .tabs_wrap ul li.active{
 	background: #7fc469;
-	color: #fff;
+	color: var(--ourbeige);
 }
 
 
@@ -1529,22 +1451,31 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
 }
 .lnp > img{
   display: block;
-  margin-left: auto;
-  margin-right: auto;
-  width: 16rem !important;
+  width: 8rem !important;
   max-width: 66% !important;
   transition: all 1s ease;
   border: 5px solid var(--text-primary);
+  margin: auto;
 }
 .lnp:hover > img{
   display: block;
-  margin-left: auto;
-  margin-right: auto;
-  width: 100% !important;
+  margin-left: none;
+  margin-right: none;
+  width: 25rem !important;
   max-width: 100% !important;
-  
 }
 
+#rnabindingtext:hover, #pegrnatext:hover, #nikasetext:hover, #linkertext:hover,
+#PEtext:hover, #stemlooptext:hover, #ribotext:hover
+{
+  fill: var(--text-primary) !important;
+  stroke: var(--text-primary) !important;
+  font-size: 17px !important;
+}
+
+
+
+
 
 /* datawrapper */
 			.chart.vis-d3-maps-choropleth {
@@ -1630,7 +1561,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
 			}
 			
 			.chart.vis-d3-maps-choropleth .map-key.mobile {
-				background: #0000;
+				background: var(--offblack)0;
 				position: static!important
 			}
 			
@@ -1650,7 +1581,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
 			.chart.vis-d3-maps-choropleth .map-key.map-key-mb,
 			.chart.vis-d3-maps-choropleth .map-key.map-key-mt,
 			.chart.vis-d3-maps-choropleth .map-key.mobile {
-				background: #0000;
+				background: var(--offblack)0;
 				padding: 0;
 				position: static!important
 			}
@@ -1681,9 +1612,9 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
 			}
 			
 			.chart.vis-d3-maps-choropleth .dw-tooltip {
-				background: #fff;
+				background: var(--ourbeige);
 				border: 1px solid #f5f5f5;
-				box-shadow: 3px 3px 3px #0000001a;
+				box-shadow: 3px 3px 3px var(--offblack)0001a;
 				font-size: 11px;
 				max-width: 200px;
 				padding: 10px;
@@ -1747,11 +1678,11 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
 				font-weight: 700;
 				padding: 8px 35px 8px 14px;
 				position: relative;
-				text-shadow: 0 1px 0 #ffffff80
+				text-shadow: 0 1px 0 var(--cebitecgray)
 			}
 			
 			.chart.vis-d3-maps-choropleth .dw-tooltip .tooltip-warning table {
-				background: #fff;
+				background: var(--ourbeige);
 				border-radius: 1px;
 				display: block;
 				font-weight: 400;
@@ -1985,9 +1916,9 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
       }
 
       /* Additional bc missing? */
-      .datawrapper-llngz-1tjke6r.horizontal g.labels text, .datawrapper-llngz-1tjke6r.horizontal g.labels text tspan {
+     /*  .datawrapper-llngz-1tjke6r.horizontal g.labels text, .datawrapper-llngz-1tjke6r.horizontal g.labels text tspan {
         dominant-baseline: hanging;
-      }
+      } */
       .datawrapper-llngz-zuu2r2.horizontal:not(.dir-rtl) g.labels text.min, .datawrapper-llngz-zuu2r2.horizontal:not(.dir-rtl) g.labels text tspan.min {
         text-anchor: start;
       }
@@ -1999,10 +1930,10 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
         font-family: Roboto, sans-serif;
         font-size: 12px;
       }
-      .datawrapper-llngz-1tjke6r.horizontal g.labels text, .datawrapper-llngz-1tjke6r.horizontal g.labels text tspan {
+      /* .datawrapper-llngz-1tjke6r.horizontal g.labels text, .datawrapper-llngz-1tjke6r.horizontal g.labels text tspan {
         dominant-baseline: hanging;
       }
-      .datawrapper-llngz-zuu2r2.horizontal:not(.dir-rtl) g.labels text.max, .datawrapper-llngz-zuu2r2.horizontal:not(.dir-rtl) g.labels text tspan.max {
+      .data */wrapper-llngz-zuu2r2.horizontal:not(.dir-rtl) g.labels text.max, .datawrapper-llngz-zuu2r2.horizontal:not(.dir-rtl) g.labels text tspan.max {
         text-anchor: end;
       }
       .chart.vis-d3-maps-choropleth .map-outer {
@@ -2096,7 +2027,6 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
 }
 
 
-.slick-slider .slick-track,
 
 .slick-slider .slick-list
 
@@ -2115,53 +2045,8 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
 }
 
 
-.slick-track
-
-{
-
-    position: relative;
-
-    top: 0;
-
-    left: 0;
-
-
-    display: block;
-
-    margin-left: auto;
-
-    margin-right: auto;
-
-}
-
-.slick-track:before,
-
-.slick-track:after
-
-{
-
-    display: table;
-
-
-    content: '';
-
-}
-
-.slick-track:after
-
-{
-
-    clear: both;
-
-}
-
-.slick-loading .slick-track
-
-{
 
-    visibility: hidden;
 
-}
 
 
 .slick-slide
@@ -2352,7 +2237,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
 
     opacity: .75;
 
-    color: white;
+    color: var(--ourbeige);
 
 
     -webkit-font-smoothing: antialiased;
@@ -2574,7 +2459,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
 
     opacity: .25;
 
-    color: black;
+    color: var(--offblack);
 
 
     -webkit-font-smoothing: antialiased;
@@ -2589,7 +2474,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
 
     opacity: .75;
 
-    color: black;
+    color: var(--offblack);
 
 }
 
@@ -2605,16 +2490,14 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
 .meditabs, .meditabs, .timelinecardtabs, .timelinepersontabs{
   display: none;
 }
-
-.tabbutton{
-  padding: 5px;
-  border-radius: 10px;
-  padding-left: 10px;
-  padding-right: 10px;
-  margin-left: 5px;
-  margin-right: 5px;
+.timelinepersontabs{
+  margin-bottom: var(--big-margin);
+}
+.timelinecardtabs{
+  max-width: 100% !important;
 }
 
+
 .blockquote-wrapper {
   display: flex;
   height: fit-content;
@@ -2630,11 +2513,11 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
 }
 
 /* Blockquote header */
-.blockquote h2 {
+.blockquote .block-h2 {
    font-style: italic;
    position: relative; /* for pseudos */
-   color: black;
-   font-size: 2.8rem;
+   color: var(--offblack);
+   font-size: 2.8rem !important;
    font-weight: normal;
    line-height: 1;
    font-size: larger;
@@ -2645,7 +2528,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
 }
 
 /* Blockquote right double quotes */
-.blockquote h2:after {
+.blockquote .block-h2:after {
    content:"";
    position: absolute;
    border: 5px solid var(--text-primary);
@@ -2659,7 +2542,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
    z-index: 3; 
 }
 
-.blockquote h2:before {
+.blockquote .block-h2:before {
    content:"";
    position: absolute;
    width: 80px;
@@ -2679,10 +2562,10 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
 }
 
 /* Blockquote subheader */
-.blockquote h4 {
+.blockquote .block-h4{
    position: relative;
-   color: black;
-   font-size: 1.3rem;
+   color: var(--offblack);
+   font-size: 1.3rem !important; 
    font-weight: 400;
    line-height: 1.2;
    font-size: medium;
@@ -2698,7 +2581,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
  margin-left:-12px;
 }
 
-/* #ct{height:150px; width:370px;border:4px solid var(--accent-dark);margin: 100px auto;text-align:center;position:relative;color:#fff;padding:15px;}
+/* #ct{height:150px; width:370px;border:4px solid var(--accent-dark);margin: 100px auto;text-align:center;position:relative;color:var(--ourbeige);padding:15px;}
 span{
   background:var(--background);
   color:var(--accent-dark);
@@ -2711,7 +2594,7 @@ span{
   height:36px;
   width:36px;
   border-radius:50%;
-  border:4px solid #fff;
+  border:4px solid var(--ourbeige);
   transform:rotate(-45deg);  
   position:absolute;
   background:var(--ourbeige);
@@ -2750,7 +2633,7 @@ span{
    position: relative;
    font-style: sans-serif;
    font-weight: 800;
-   color: black;
+   color: var(--offblack);
    padding: 30px 0;
    width: 100%;
    max-width: 80%;
@@ -2764,7 +2647,7 @@ span{
 /* Blockquote header */
 .blockquotex h1 {
    position: relative;
-   color: black;
+   color: var(--offblack);
    font-size: 20px !important;
    font-weight: 800;
    line-height: 1;
@@ -2822,7 +2705,7 @@ span{
 }
 
 .react-flow__node-mindmap {
-  background: white;
+  background: var(--ourbeige);
   border-radius: 2px;
   border: 1px solid transparent;
   padding: 2px 5px;
@@ -3040,26 +2923,6 @@ span{
 }
 
 
-/* .children  .node{
-  background: --webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.15)), to(rgba(0, 0, 0, 0.15))) var(--background);
-  background: linear-gradient(to top, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)) var(--accent-primary);
-}
-
-.children  .children .node{
-  background: --webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.30)), to(rgba(0, 0, 0, 0.30))) var(--background);
-  background: linear-gradient(to top, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.30)) var(--accent-primary);
-}
-
-.children  .children .children .node{
-  background: --webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.45)), to(rgba(0, 0, 0, 0.45))) var(--background);
-  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)) var(--accent-primary);
-}
-
-.children  .children .children .children .node{
-  background: --webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.60)), to(rgba(0, 0, 0, 0.60))) var(--background);
-  background: linear-gradient(to top, rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.60)) var(--accent-primary);
-}
-  */
 
 #L1, #R1{
   line-height: calc(var(--node-size) / 4);
@@ -3080,140 +2943,46 @@ span{
  }
  
 
-/*  ========================
-      BUTTON TWO
-======================== */
-
-.btn-two {
-  color: #fff;
-  transition: all 0.5s;
-  position: relative;
-}
-.btn-two span {
-  z-index: 2;
-  display: block;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
-.btn-two::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  transition: all 0.5s;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  background-color: rgba(255, 255, 255, 0.1);
-}
-.btn-two::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  transition: all 0.5s;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  background-color: rgba(255, 255, 255, 0.1);
-}
-.btn-two:hover::before {
-  transform: rotate(-45deg);
-  background-color: rgba(255, 255, 255, 0);
-}
-.btn-two:hover::after {
-  transform: rotate(45deg);
-  background-color: rgba(255, 255, 255, 0);
-}
 
 
 /* 
 ========================
-      BUTTON THREE
-======================== */
-
-.btn-three {
-  color: #fff;
-  transition: all 0.5s;
-  position: relative;
-}
-.btn-three::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  background-color: rgba(255, 255, 255, 0.1);
-  transition: all 0.3s;
-}
-.btn-three:hover::before {
-  opacity: 0;
-  transform: scale(0.5, 0.5);
-}
-.btn-three::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  opacity: 0;
-  transition: all 0.3s;
-  border: 1px solid rgba(255, 255, 255, 0.5);
-  transform: scale(1.2, 1.2);
-}
-.btn-three:hover::after {
-  opacity: 1;
-  transform: scale(1, 1);
-}
-
-
-
-div[class*="boxy"] {
-  height: 33.33%;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.boxy-1 {
-  background-color: #ff6766;
+      BUTTONS
+========================
+*/
+button span {
+  margin: auto;
 }
-.boxy-2 {
-  background-color: #3c3c3c;
+button {
+  margin-top: var(--simple-margin) !important;
+  margin-bottom: var(--simple-margin) !important;
+  border-radius: var(--border-radius) !important;
+  cursor: pointer; 
+  text-align: center;
 }
-.boxy-3 {
-  background-color: #66a182;
+ .btn1{
+  padding: var(--button-padding) var(--small-padding) !important;
+} 
+.btn1:hover{
+  filter: brightness(0.7);
 }
-
-.btn-new {
-  line-height: 50px;
-  height: 50px;
-  text-align: center;
-  width: 250px;
-  cursor: pointer;
+.boxy-1{
+  border-radius: 10px;
 }
-
-/* 
-========================
-      BUTTON ONE
-========================
-*/
 .btn-one {
-  color: #fff;
+  border-style: none;
+  height: 100px;
+  width: 200px;
+  padding: var(--small-padding) var(--simple-padding) !important;
+  background: var(--ourgradient); 
+  color: var(--ourbeige);
   transition: all 0.3s;
   position: relative;
+  display: grid;
+  margin-left: auto !important;
+  margin-right: auto !important;
 }
-.btn-one span {
-  transition: all 0.3s;
-}
+
 .btn-one::before {
   content: "";
   position: absolute;
@@ -3232,13 +3001,7 @@ div[class*="boxy"] {
   border-bottom-color: rgba(255, 255, 255, 0.5);
   transform: scale(0.1, 1);
 }
-.btn-one:hover span {
-  letter-spacing: 2px;
-}
-.btn-one:hover::before {
-  opacity: 1;
-  transform: scale(1, 1);
-}
+
 .btn-one::after {
   content: "";
   position: absolute;
@@ -3255,21 +3018,957 @@ div[class*="boxy"] {
   transform: scale(0.1, 1);
 }
 
+.tabbutton{
+  margin-left: 5px;
+  margin-right: 5px;
+}
 
 .backtotop {
   place-self: end; 
   /* visual styling */
   text-decoration: none;
   padding: 10px;
-  color:white !important;
-  background: var(--text-primary);
+  color:var(--ourbeige) !important;
+  background: var(--ourgradient); 
   border-radius: 100px;
   white-space: nowrap;
+  margin-left: 40px;
+  margin-top: 20px;
   text-align: right;
 }
 .backtotop:hover{
-  box-shadow: 5px 5px 15px black;
-  color: white !important;
+  box-shadow: 5px 5px 15px var(--offblack);
+  color: var(--ourbeige) !important;
   transition: all 0.1s linear;
 }
 
+.svg-button:hover{
+  cursor: pointer;
+}
+
+/* * * * * * * * */
+/*VILLAGE BUTTONS*/
+/* * * * * * * * */
+.bottom-buttons{
+  margin-top: 50px !important; 
+  margin-bottom: 20px;
+  padding-left: 30px;
+}
+.normal-buttons{
+  margin-top: 10px !important; 
+  margin-bottom: 20px;
+  padding-left: 30px;
+}
+.village-style-button{
+  flex: 1 0 0%;
+  box-shadow: 5px 5px 15px gray !important;
+  border-radius: 2rem !important;
+  padding: 0 !important;
+  max-width: 12% !important;
+  aspect-ratio: 2 / 3 !important; 
+  margin: auto; 
+}
+.village-style-button:hover{
+  box-shadow: 5px 5px 15px var(--offblack) !important;
+}
+.village-style-button h3{
+  text-align: center !important;
+  font-size: 10px;
+  font-weight: bold;
+  color: var(--offblack);
+}
+.village-style-button img{
+  max-width: 70% !important;
+  max-height: 70% !important;
+  padding-top: 20px !important;
+}
+/* 
+=======================================================
+*/
+
+.cls-1{fill:#c8d5ea;}
+.cls-2{fill:#e8f1f9;opacity:0.43;}
+.cls-11,.cls-12,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7,.cls-9{fill:none;stroke-miterlimit:10;}
+.cls-3,.cls-4,.cls-5{stroke:#d30f0f;stroke-linecap:round;}
+.cls-3{stroke-width:0.47px;}
+.cls-4{stroke-width:0.47px;}
+.cls-5{stroke-width:0.66px;}
+.cls-6{stroke:#1f4e79;}
+.cls-7{stroke:#39dd17;}
+.cls-11,.cls-12,.cls-7,.cls-9{stroke-width:4px;}
+.cls-8{fill:#39dd17;}.cls-9{stroke:#ce1b1b;}
+.cls-10{fill:#ce1b1b;}.cls-11{stroke:#f7931e;}
+.cls-12{stroke:#7913e5;}.cls-13{fill:#7913e5;}
+  
+
+
+.rotate-linear-infinite{
+  animation: rotation 20s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+@keyframes rotation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+}
+
+/* .rotate-linear-infinite:hover{
+  animation-play-state: paused;
+} */
+
+.methods-node:nth-of-type(1) div{
+  margin-top: 25%;
+  font-weight: bold;
+  font-size: medium;
+}
+.methods-node:nth-of-type(3) div{
+  margin-top: 35%;
+  font-weight: bold;
+  font-size: small;
+}
+
+.methods-node:nth-of-type(5) div, .methods-node:nth-of-type(2) div, .methods-node:nth-of-type(4) div{
+  margin-top: 35%;
+  font-weight: bold;
+  font-size: medium;
+}
+.methods-node{
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  height: 6rem;
+  width: 6rem;
+  border: 0.1vw solid var(--text-primary);
+  border-radius: 50%;
+  cursor: pointer;
+  margin-left: 20px;
+  margin-right: 20px;
+  font-size: small;
+  -webkit-transition: all .2s ease;
+  transition: all .2s ease;
+  z-index: 5;
+  text-align: center;
+}
+.methods-node:nth-of-type(1){
+  background-color: var(--accen-secondary);
+}
+.methods-node:nth-of-type(2){
+  background-color: var(--accent-gradient-one-of-three);
+}
+.methods-node:nth-of-type(3){
+  background-color: var(--accent-gradient-two-of-three);
+}
+.methods-node:nth-of-type(4){
+  background-color: var(--accent-gradient-three-of-three);
+}
+.methods-node:nth-of-type(5){
+  background-color: var(--accent-primary);
+}
+.methods-node:nth-of-type(odd) {
+  top: 2vw;
+  left: 0;
+}
+.methods-node:nth-of-type(even){
+  bottom: 2vw;
+}
+
+.methods-node:nth-of-type(even):before {
+  content: '';
+  position: absolute;
+  top: 80%;
+  z-index: 0;
+  left: -3.4vw;
+  width: 3.8vw;
+  transform: rotate(-25deg);
+  border-top: 1px solid var(--text-primary);
+}
+.methods-node:nth-of-type(even):after {
+  content: '';
+  position: absolute;
+  top: 80%;
+  z-index: 0; 
+  left: 6.4vw;
+  width: 3.8vw;
+  transform: rotate(25deg);
+  border-top: 1px solid var(--text-primary);
+}
+
+.bfh-menu{ /* @media fertig */
+  width: fit-content;
+  margin: auto !important;
+  max-width: 60vw !important;
+}
+
+a{
+  cursor: pointer;
+}
+
+svg a text{
+  fill: var(--lightblue) !important;
+}
+svg a:hover text{
+  fill: var(--accen-secondary) !important;
+}
+.bfh-menu svg a:hover >  g circle{
+  fill: var(--accent-gradient-three-of-three) !important;
+}
+
+.vertical{
+  display:inline;
+  vertical-align: middle;
+}
+
+.text-1-bfh{
+  margin-top: auto !important;
+  margin-bottom: auto !important;
+}
+
+.panel-talk-gallery{
+  padding: 0 !important;
+  margin-top: 10px !important;
+  margin-left: 20px !important;
+  margin-right: 20px !important;
+}
+.panel-talk-gallery div{
+  padding: 0 !important;
+}
+.panel-talk-gallery .col:nth-child(1), .panel-talk-gallery .col:nth-child(5){
+  margin-top: 60px !important;
+}
+.panel-talk-gallery .col:nth-child(2), .panel-talk-gallery .col:nth-child(4){
+  margin-top: 30px !important;
+}
+.panel-talk-gallery .col .middle{
+  margin-top: 15px !important;
+}
+.middle{
+  text-align: center;
+}
+
+.bfh-slider{
+  max-width: 500px !important;
+}
+.bfh-slider img{
+  max-width: 400px;
+
+  max-height: 70%;
+}
+
+
+.full-screen-width {
+  position: relative !important;
+  left: 50% !important;
+  right: 50% !important;
+  margin-left: -50vw !important;
+  margin-right: 50vw !important;
+  max-width: 100vw !important;
+  width: 100vw !important;
+}
+
+.collapsible-hr{
+  border-width: 2px !important;
+}
+
+.collapsible-a{
+  margin-top: 1rem !important;
+  margin-bottom: 1rem;
+  margin-left: 1rem !important;
+}
+
+.box{
+  padding: 10px;
+  border-radius: 10px;
+}
+
+
+
+ .detail-sideitem .sideitem{
+  padding-left: 10px !important;
+ }
+
+ .sideitem .cycletab{
+  line-height: 100%;
+  margin-left: 10px;
+  list-style-type: circle !important;
+ }
+
+ .active-sideitem {
+  background: var(--ourgradient); 
+  color: var(--ourbeige) !important;
+  border-radius: 5px;
+  display: block;
+  border-width: 5px;
+  border-color: var(--lightblue);
+  padding-right: 5px;
+  padding-left: 5px;
+ }
+ 
+
+ .img-sponsor-a{
+  margin: 20px;
+  padding: 20px;
+  max-width: 90%;
+ }
+.sp-a{
+  border: 5px solid var(--accent-primary);
+  background-color: var(--ourbeige);
+  height: 250px !important;
+  border-radius: 10px;
+}
+
+.qabox .question-bubble:nth-child(2){ 
+  margin-bottom: 20px;
+  margin-right: 0px;
+  margin-left: auto;
+  border: 5px solid var(--accent-gradient-one-of-three);
+}
+.qabox .question-bubble:nth-child(1){
+  margin-bottom: 10px;
+  margin-left: 0px;
+  margin-right: auto;
+  border: 5px solid var(--accent-gradient-three-of-three);
+}
+
+.question-bubble{
+  border-radius: 10px;
+  padding: 20px;
+  width: fit-content;
+  max-width: 80%;
+  min-width: 20%;
+  position: relative;
+}
+
+.qabox .question-bubble:nth-child(2)::before{
+  bottom: 20px;
+  clip-path: polygon(0 0, 100% 100%, 0 75%);
+  left: calc(100%);
+  width: 20px;
+  height: 20px;
+  content: "";
+  position: absolute;
+  background: var(--accent-gradient-one-of-three);
+}
+
+.qabox .question-bubble:nth-child(1)::before{
+  bottom: 20px;
+  clip-path: polygon(0 100%, 100% 0, 100% 75%);
+  right: calc(100%);
+  width: 20px;
+  height: 20px;
+  content: "";
+  position: absolute;
+  background: var(--accent-gradient-three-of-three);
+} 
+
+.haken-liste{
+  list-style: none !important;
+}
+
+.winner{ /* @media  */
+  vertical-align: middle !important;
+  font-size: xx-large;
+  font-weight: 900 ;
+  margin-top: 10px;
+}
+
+.winners{
+  margin-top: 10px !important;
+}
+
+.list-item-img{
+  max-height: 1.5rem;
+}
+
+.trophy::before{
+  background-image: url(https://static.igem.wiki/teams/5247/design/icons/trophy.svg);
+  background-size: 40px 40px !important;
+  content: '';
+  display: inline-block;
+  width: 40px; 
+  height: 40px;
+}
+.certificate::before{
+  background-image: url(https://static.igem.wiki/teams/5247/design/icons/certificate.svg);
+  background-size: 40px 40px !important;
+  content: '';
+  display: inline-block;
+  width: 40px; 
+  height: 40px;
+}
+.tickets::before{
+  background-image: url(https://static.igem.wiki/teams/5247/design/icons/tickets.svg);
+  background-size: 40px 40px !important;
+  content: '';
+  display: inline-block;
+  width: 40px; 
+  height: 40px;
+}
+.kit::before{
+  background-image: url(https://static.igem.wiki/teams/5247/design/icons/new-box.svg);
+  background-size: 40px 40px !important;
+  content: '';
+  display: inline-block;
+  width: 40px; 
+  height: 40px;
+}
+
+.money::before{
+  background-image: url(https://static.igem.wiki/teams/5247/design/icons/money.svg);
+  background-size: 40px 40px !important;
+  content: '';
+  display: inline-block;
+  width: 40px; 
+  height: 40px;
+}
+.winners div li{
+  vertical-align: middle;
+  line-height:2rem;
+}
+.winners div li span{
+  font-size: large;
+  position: relative;
+  bottom: 1vh;
+  margin-left: 1rem;
+}
+
+.button-left{
+  position:relative; 
+}
+
+.left-button{
+  float: right;
+}
+
+.detail-sideitem, .sidesubtab, a {
+  pointer-events: auto; /* Ensure clickable elements can be interacted with */
+}
+
+
+.subtitle-active .sideitem a summary{
+  color: var(--ourbeige) !important;
+}
+.sideitem a summary{
+  color: var(--offblack) !important;
+}
+
+.active-sideitem a summary{
+  color: var(--ourbeige) !important;
+}
+
+.flexbox{
+  display: flex;
+  align-items: stretch;
+  margin-bottom: 20px;
+}
+
+.hp-timeline-p{
+  flex: 1;
+  margin-bottom: 0 !important;
+  margin-top: 0 !important;
+}
+.flexbox p{
+  margin-top: auto !important;
+  margin-bottom: auto !important;
+}
+.hp-timeline-p p{
+  margin-top: auto !important;
+}
+.hp-timeline-img{
+  margin-top: 0 !important;
+    height: 100%; /* Das Bild wird in der Höhe an den Container angepasst */
+    width: 100%; /* Bild füllt den Image-Container aus */
+    object-fit: contain; /* Optional: Skaliert das Bild so, dass es den Container proportional füllt */
+    margin: auto;
+}
+
+.hti-right{
+  padding-right: var(--simple-padding) !important;
+}
+.hti-left{
+  padding-left: var(--simple-padding) !important;
+}
+
+.hti-box{
+  width: min-content;
+  flex: 0 0.2 40%; /* Bild nimmt maximal 40% der Breite ein */
+}
+
+.hti-abstand{
+  width: 20px;
+}
+
+
+
+.header-title svg{
+  max-width: 100% !important;
+  margin: auto; 
+
+}
+
+.detail-sideitem .sideitem .sidesubtab .sideitem{
+  color: white ;
+}
+
+.grid{
+  display: grid;
+}
+
+.flex{
+  display: flex;
+}
+
+#impressum{
+  font-size: x-large  ;
+}
+
+.precyse{
+  padding: 1px ;
+  padding-left: 2px !important;
+}
+
+.sideitem ul{
+  margin-left: 0 !important;
+  padding-left: 10px !important;
+}
+
+
+
+
+.symptom-img-wrapper img{
+  max-width: 100%;
+}
+
+.feedbackbfh div{
+  padding: 20px; 
+  margin: 10px ;
+  border-radius: 10px;
+  border-width: 5px;
+  border-style: dashed;
+}
+.feedbackbfh div div{
+  padding: 20px; 
+  margin: 10px ;
+  border-radius: 10px;
+  border-width: 0;
+}
+
+.bfh-motto{
+  padding: 10px;
+  background-color: var(--accent-primary);
+  width: fit-content;
+  border-radius: 10px;
+  margin: auto;
+  margin-bottom: 10px;
+}
+
+.bfh-haken{
+  position: relative;
+  font-size: x-large !important;
+  font-weight: 900 !important;
+  color: var(--accent-primary) !important;
+  margin-right: 5px;
+  top: 5px;
+}
+
+#eng-sidebar a{
+  color: var(--text-primary) !important;
+}
+
+
+.quiz-wrapper{
+  height: 95% !important;
+  display: flex; 
+  align-items: center !important;
+  margin-bottom: 15px !important;
+  border-radius: 10px;
+  border-width: 3px;
+  border-style: dotted;
+  border-color: var(--text-primary);
+  padding: 10px;
+}
+
+.quiz-front, .quiz-back{
+  align-self: center;
+  height: 100% !important;
+  align-items: center;
+  text-align: center;
+}
+.quiz-text col{
+  align-content: stretch;
+  align-items: stretch;
+}
+.quiz-text{
+  align-content: stretch;
+  align-items: stretch;
+  margin: auto !important;
+  padding: 15px;
+  display: flex !important;
+  min-height: 40% !important;
+}
+.quiz-button-box{
+justify-content: center;
+height: min-content !important;
+}
+
+.quiz-button{
+  position: relative; 
+  bottom: 0;
+  margin-top: auto !important;
+  align-self: baseline;
+  width: fit-content !important;
+  border-radius: 10px;
+  padding: 5px;
+  background-color: var(--very-light-purple);
+  border-color: var(--lightpurple);
+}
+
+.quiz-heading{
+  padding-top: 10px;
+  font-size: 2rem;
+  font-weight: bold;
+	letter-spacing:0.1em;
+  -webkit-text-fill-color: var(--very-light-purple);
+  -webkit-text-stroke-width: 2px;
+  -webkit-text-stroke-color: var(--text-primary);
+}
+
+
+.gif{
+  align-self: center;
+  display: inline;
+}
+
+.gif-wrapper{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.eng-box{
+  border-radius: 3px;
+  border-style: solid;
+  border-color: var(--text-primary);
+  border-radius: 10px;
+}
+
+.eng-box p {
+  padding-left: 30px;
+  padding-right: 30px;
+}
+
+
+.always-row > * {
+  flex-shrink: 0;
+  width: 100%;
+  max-width: 100%;
+  padding-right: calc(var(--bs-gutter-x) * .5);
+  padding-left: calc(var(--bs-gutter-x) * .5);
+  margin-top: var(--bs-gutter-y);
+}
+
+.always-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));
+  width: 100% !important;
+}
+
+.steckbrief .col-2, .steckbriefbuttonrow .col-2{
+  margin: 10px 15px ;
+}
+
+.ask-p{
+  border-left: solid 5px var(--text-primary);
+  padding-left: 15px;
+  margin-left: 15px;
+}
+
+.hp-collaps .collapse-card{
+  background-color: var(--background) !important; 
+}
+
+
+figcaption{
+  display: table-caption;
+  caption-side: bottom;
+  padding: 0.5em;
+  background-color: var(--darkerbeige)
+}
+
+figure img{
+  margin-bottom: var(--simple-margin) !important;
+}
+
+figure .row div{
+  padding-top: 20px;
+  display: grid; 
+ justify-content: center;
+}
+
+
+
+figure img{
+  object-fit: cover !important;
+}
+
+.lorem{
+  background-color: red !important;
+}
+
+
+.navbar .scroll-progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 5px;
+  width: 100%;
+  background: linear-gradient(90deg,var(--lightblue),var(--text-primary));
+  z-index: 10;
+  overflow: visible;
+}
+
+
+
+.navbar .scroll-progress img {
+  position: absolute;
+  top: -20px;
+  height: 25px;
+  width: 30px;
+  z-index: 11;
+  transition: transform .5s ease-in-out;
+}
+
+.navbar-brand .col {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.boxy-1{
+  border-radius: 10px;
+}
+
+.nav-item, .nav-dropdown, .dropdown-toggle{
+  border-radius: 10px !important;
+}
+
+
+.sponsor-text-left h4{
+  text-align: right;
+}
+
+#hphead{
+  background: linear-gradient(rgba(255,255,255,0.2), rgba(0, 0, 0, 0.8)), url("https://static.igem.wiki/teams/5247/photos/header/hp.webp");
+}
+
+#conhead{
+  background: linear-gradient(rgba(255,255,255,0.2), rgba(0, 0, 0,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/contribution.webp");
+}
+
+#deschead{
+  background: linear-gradient(rgba(255,255,255,0.2), rgba(0, 0, 0,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/project-description.webp");
+}
+  
+#enghead{
+  background: linear-gradient(rgba(255,255,255,0.2), rgba(0, 0, 0,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/engineering.webp");
+}
+#safehead{
+  background: linear-gradient(rgba(255,255,255,0.2), rgba(0, 0, 0,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/biosafety2.webp");
+}
+#atthead{
+  background: linear-gradient(rgba(255,255,255,0.2), rgba(0, 0, 0,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/attribution-2-neu.webp");
+} 
+#dochead{
+  background: linear-gradient(rgba(255,255,255,0.2), rgba(0, 0, 0,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/documentation.webp");
+}
+#exhead{
+  background: linear-gradient(rgba(255,255,255,0.2), rgba(0, 0, 0,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/experiments.webp");
+}
+#ibhead{
+  background: linear-gradient(rgba(255,255,255,0.2), rgba(0, 0, 0,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/bielefeld-neu.webp");
+}
+#jughead{
+  background: linear-gradient(rgba(255,255,255,0.2), rgba(0, 0, 0,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/judging.webp");
+}
+#mmhead{
+  background: linear-gradient(rgba(255,255,255,0.2), rgba(0, 0, 0,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/materials-methods.webp");
+}
+#nothead{
+  background: linear-gradient(rgba(255,255,255,0.2), rgba(0, 0, 0,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/notebook.webp");
+}
+#parhead{
+  background: linear-gradient(rgba(255,255,255,0.2), rgba(0, 0, 0,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/parts.webp");
+}
+#reshead{
+  background: linear-gradient(rgba(255,255,255,0.2), rgba(0, 0, 0,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/results.webp");
+}
+#teamhead{
+  background: linear-gradient(rgba(255,255,255,0.2), rgba(0, 0, 0,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/rooster.webp");
+}
+#sphead{
+  background: linear-gradient(rgba(255,255,255,0.2), rgba(0, 0, 0,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/sponsors-partners.webp");
+}
+#suphead{
+  background: linear-gradient(rgba(255,255,255,0.2), rgba(0, 0, 0,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/supplement.webp");
+}
+
+#hphead, #conhead, #deschead, #enghead, #safehead, #atthead, #dochead, 
+#exhead, #ibhead, #jughead, #mmhead, #nothead, #parhead, #reshead, #teamhead
+, #sphead, #suphead
+{
+  background-size: 100vw auto;
+  background-repeat: no-repeat;
+}
+
+.header-title{
+  min-height: 900px;
+}
+
+.download-butt span {
+  display: inline-block;
+  padding: 10px;
+  min-height: 50px !important;
+}
+
+.download-butt-image{
+  display: inline-block;
+  margin-bottom: 20px;
+}
+
+/* Philip's area (sorry Lili) */
+
+.casettecontainer {
+  display: flex;
+  justify-content: center; /* Align boxes in the center horizontally */
+  align-items: flex-start; /* Align items at the top (start) vertically */
+  flex-wrap: wrap; /* Ensure the boxes wrap on smaller screens */
+  gap: 20px; /* Add space between the boxes */
+}
+
+.casettebox {
+  display: flex;
+  flex-direction: column; /* Stack image and any content vertically */
+  justify-content: flex-start; /* Align images at the top */
+  align-items: center; /* Center images horizontally */
+  width: auto; /* Set a width for the boxes */
+  height: auto; /* Allow height to adapt based on content */
+  padding: 10px;
+}
+
+.casettebox img {
+  width: 100%; /* Image takes up full width of its container */
+  height: auto; /* Maintain aspect ratio of the image */
+  max-height: 150px; /* Set a maximum height to ensure consistency */
+  object-fit: cover; /* Ensure the image covers the available space */
+}
+
+.pegrnabox {
+  display: flex;
+  flex-direction: column; /* Stack image and any content vertically */
+  justify-content: flex-start; /* Align images at the top */
+  align-items: center; /* Center images horizontally */
+  width: auto; /* Set a width for the boxes */
+  height: auto; /* Allow height to adapt based on content */
+  padding: 10px;
+}
+
+.pegrnabox img {
+  width: 100%; /* Image takes up full width of its container */
+  height: auto; /* Maintain aspect ratio of the image */
+  object-fit: cover; /* Ensure the image covers the available space */
+}
+
+.timelinetab{
+  border-radius: 20px;
+  padding: 20px;
+}
+
+
+.iframe-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* .figure-wrapper-philip{
+  border-color: var(--darkerbeige);
+  border-width: 5px;
+  border-style: solid;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-top: var(--big-margin) !important; 
+  margin-bottom: var(--big-margin) !important; 
+  padding: 0 !important;
+} */
+
+.figure-wrapper {
+  border-color: var(--darkerbeige);
+  border-width: 5px;
+  border-style: solid;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-top: var(--big-margin) !important; 
+  margin-bottom: var(--big-margin) !important; 
+  padding: 0 !important;
+}
+
+figure {
+  align-self: center;
+  text-align: center;
+  font-style: italic;
+  font-size: medium; 
+  text-indent: 0;
+  display: grid !important;
+  width: 100%;
+  text-align: center;
+  margin: 0 !important;
+}
+.responsive-image {
+  margin: auto;
+  padding-left: var(--simple-margin);
+  padding-right: var(--simple-margin);
+  margin-top: var(--simple-margin); 
+  margin-bottom: var(--simple-margin); 
+  align-self: center !important;
+  max-height: 40vh; /* Set the maximum height for tall images */
+  width: auto; /* Keeps the image's aspect ratio */
+  max-width: 100%; /* Limits the width to container's width */
+  object-fit: contain !important; /* Adds space around the image if it's narrower than the container */
+}
+
+/* Galerie Container */
+.bfhgal {
+  display: grid;
+  gap: 10px; /* Abstand zwischen den Bildern */
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Reaktionsfähige Spalten */
+  padding: 10px;
+}
+
+/* Galerie-Elemente (Bilder) */
+.bfhgal-item {
+  position: relative;
+  width: 100%;
+  padding-top: 100%; /* Macht die Bilder quadratisch */
+  overflow: hidden;
+}
+
+/* Bild Styling */
+.bfhgal-item img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover; /* Bild wird zugeschnitten, um das Quadrat zu füllen */
+}

src/App/App.scss

@@ -142,10 +142,10 @@ $size: 6;
     & > a {
       opacity: 0;
       position: absolute;
-      color: #000;
-      background-color: #000;
+      color: var(--offblack);
+      background-color: var(--offblack);
       font: bold 4em "Helvetica";
-      $shadow: 5px #fff;
+      $shadow: 5px var(--ourbeige);
       text-shadow: 0 -1px $shadow, -1px 0px $shadow, 0 1px $shadow,
         1px 0px $shadow;
       padding: 2rem;
@@ -165,7 +165,7 @@ $size: 6;
   & > div {
     overflow: hidden;
     position: relative;
-    box-shadow: 0 2px 8px 0 rgba(#000, 0.2), 0 3px 20px 0 rgba(#000, 0.19);
+    box-shadow: 0 2px 8px 0 rgba(var(--offblack), 0.2), 0 3px 20px 0 rgba(var(--offblack), 0.19);
   }
   div,
   a {
@@ -201,7 +201,7 @@ $size: 6;
   .content {
     max-width: 90%;
     position: relative;
-    color: #fff;
+    color: var(--ourbeige);
     &:hover > a.close {
       opacity: 1;
       transform: scale(1, 1);
@@ -262,7 +262,7 @@ $size: 6;
     opacity: 0;
     transform-origin: right top;
     text-decoration:none;
-    color:#fff;
+    color:var(--ourbeige);
     &::after {
       content: "X";
     }
@@ -332,7 +332,7 @@ $shadow: #bc15aa;
 	height: 100px;
 	line-height: 100px;
 	margin: auto;
-	color: #fff;
+	color: var(--ourbeige);
 	position: absolute;
 	top: 0;
 	bottom: 0;
@@ -459,7 +459,7 @@ $shadow: #bc15aa;
 	}
 	i{
 		position: relative;
-		color: white;
+		color: var(--ourbeige);
 		font-size: 60px/2;
 		margin-top: 60px/4;
 		transition: all 0.25s ease;
@@ -543,4 +543,98 @@ $shadow: #bc15aa;
 	i{
 		z-index: 1;
 	}
-}
\ No newline at end of file
+}
+
+.picture-frame {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  max-width: 400px;
+  width: 90%;
+  margin: auto;
+  background: var(--ourbeige);
+  padding: 30px;
+  border-style: solid;
+  border-width: 30px;
+  $color: "#850F78"; 
+  border-top-color: #850F78;
+  border-right-color: #bc15aa; 
+  border-bottom-color: #850F78;
+  border-left-color: #bc15aa; 
+  box-shadow: 2px 2px 4px rgba(0,0,0,.6);
+}
+.cert-frame {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  min-width: 180px;
+  max-width: 200px;
+  width: 70%;
+  margin: auto;
+  background: var(--ourbeige);
+  padding: 10px;
+  border-style: solid;
+  border-width: 20px;
+  border-top-color:#850F78;
+  border-right-color: #bc15aa; 
+  border-bottom-color: #850F78;
+  border-left-color: #bc15aa; 
+  box-shadow: 2px 2px 4px rgba(0,0,0,.6);
+}
+
+figure.snip1113 {
+  font-family: 'Raleway', Arial, sans-serif;
+  position: relative;
+  overflow: hidden;
+  min-width: 220px;
+  max-width: 310px;
+  width: 80%;
+  background: var(--ourbeige);
+  text-align: center;
+}
+
+figure.snip1113 * {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+}
+
+figure.snip1113 img {
+  max-width: 65%;
+  margin: 40px auto;
+  display: block;
+  position: relative;
+  border: 3px solid #F59121;
+  padding: 15px 15px 85px 15px;
+  -webkit-transform: translate(0, 0);
+  transform: translate(0, 0);
+}
+
+figure.snip1113 figcaption {
+  position: absolute;
+  height: 120px;
+  bottom: 0px;
+  left: 0;
+  right: 0;
+  display: block;
+}
+
+figure.snip1113 h3 {
+  background-color: var(--ourbeige);
+  color: var(--offblack);
+  font-size: 1.7em;
+  width: 100%;
+  padding: 5px 12px;
+  margin: 0;
+  text-transform: uppercase;
+  font-weight: 400;
+}
+
+figure.snip1113 h3 span {
+  font-weight: 800;
+}
+
+/* Collapsible 2 */

src/App/App.tsx

-import { useState, useEffect } from "react";
+import { useEffect } from "react";
 import "./App.css";
+import "./HP.css"
+import "./mediarules.css"
+import "./Timelines.css";
+import '../App/Graph.css'; 
+import '../components/test.css'
+import "./LandingPage.css"
 import "../contents/example.css"
 import "./App.scss";
 import 'beautiful-react-diagrams/styles.css';
 import "bootstrap/dist/css/bootstrap.min.css";
-import { Route, Routes } from "react-router-dom";
+import "./Graph.css"
+import LoadingScreen from "../components/LoadingScreen.tsx";
+import { Routes, Route } from "react-router-dom";
 import { Footer } from "../components/Footer.tsx";
 import { NotFound } from "../components/NotFound.tsx";
 import { Navbar } from "../components/Navbar.tsx";
 import { getPathMapping } from "../utils/getPathMapping.ts";
 import { stringToSlug } from "../utils/stringToSlug.ts";
 import { Villbuttonrow } from "../components/Buttons.tsx";
-import "../utils/highlight.js";
-import LoadingScreen from "../components/LoadingScreen.tsx";
+import "../utils/Highlight-functions.js";
 import "./LoadingScreen.css";
+import "./calendar.css"
+import { useLoading } from "../utils/LoadingContext.tsx";
+
 
 const App = () => {
-  const [isLoading, setIsLoading] = useState(true);
+  const { isLoading, setIsLoading } = useLoading(); // 2. Ladezustand hier verwenden
+
+
+  window.scrollTo(0, 0);
+
+//  const [isLoading, setIsLoading] = useState(true);
 
   const pathMapping = getPathMapping();
   const currentPath =
@@ -32,11 +47,12 @@ const App = () => {
     document.title = `${title || ""} | ${import.meta.env.VITE_TEAM_NAME} - iGEM ${import.meta.env.VITE_TEAM_YEAR}`;
   }, [title]);
 
+
   useEffect(() => {
     const timer = setTimeout(() => {
       console.log("Hiding loading screen");
       setIsLoading(false);
-    }, 0); // Adjust the delay as needed, Update the loading state after 3 seconds
+    }, 1000); // Adjust the delay as needed, Update the loading state after 3 seconds
 
     return () => {
       console.log("Cleaning up timer");
@@ -46,54 +62,75 @@ const App = () => {
 
   return (
     <>
-      {isLoading ? (
-        <LoadingScreen />
-      ) : (
-        <>
-          {/* Navigation */}
-          <Navbar/>
-
-          {/* Header and PageContent */}
-          <Routes>
-            {Object.entries(pathMapping).map(([path, {header: Header, component: Component, navlist: Sidebar}]) => (
-              <Route
-                key={path}
-                path={path}
-                element={
-                  <>
-                    <Header/>
-                    {/* Page content */}
-                    <div className="container-fluid">
-                      <div className="row">
-                        <Sidebar/>
-                        <div className="col">
-                          <Component />
-                          <Villbuttonrow/>
-                        </div>
-                        <div className="col-1 d-none d-lg-block">
-                          {/* <!-- empty!--> */}
-                        </div>
-                      </div>
+    {isLoading ? (
+      <LoadingScreen />
+    ) : (
+
+    <>
+      
+      {/* Navigation */}
+      <Navbar />
+
+      {/* Header and PageContent */}
+      <Routes>
+        {Object.entries(pathMapping).map(([path, { header: Header, component: Component, navlist: Sidebar }]) => (
+          <Route
+            key={path}
+            path={path}
+            element={
+              <>
+                <Header />
+                {/* Page content */}
+                <div className="container-fluid" >
+                  <div className="row">
+                    <Sidebar/>
+                    <div className="full-col-phone col-9 max-1240">
+                      <Component />
+                      <Villbuttonrow />
                     </div>
-                    {/* End page content */}
-                  </>
-                }
-              />
-            ))}
-            <Route
-              path="*"
-              element={
-                <>
-                
-                  <NotFound />
-                </>
-              }
-            />
-          </Routes>
-
-          {/* Footer */}
-          <Footer />
-        </>
+                    <div className="col-1 none d-lg-block">
+                      {/* <!-- empty!--> */}
+                    </div>
+                  </div>
+                </div>
+                {/* End page content */}
+              </>
+            }
+          />
+        ))}
+        {/* Add a route for the Description component */}
+        <Route
+          path="/description"
+          element={
+            <>
+              {/* Page content */}
+              <div className="container-fluid">
+                <div className="row">
+                  <div className="col">
+                    <Villbuttonrow />
+                  </div>
+                  <div className="col-1  d-lg-block">
+                    {/* <!-- empty!--> */}
+                  </div>
+                </div>
+              </div>
+            </>
+          }
+        />
+
+        <Route
+          path="*"
+          element={
+            <>
+              <NotFound />
+            </>
+          }
+        />
+      </Routes>
+
+      {/* Footer */}
+      <Footer />
+      </>
       )}
     </>
   );

src/App/Graph.css

+/* Specific styles for the pie chart container */
+.pie-chart-container {
+    display: block; 
+    width: 400px; 
+    height: 400px; 
+    padding: 10px; 
+    margin: auto;
+}
+
+
+.pie-chart-container canvas {
+    width: 100% !important; 
+    height: 100% !important;
+}

src/App/HP.css

+#under-reflection{
+    background-color: var(--lightblue) !important;
+}
+#under-responsibility{
+    background-color: var(--lightpurple) !important;
+}
+#under-responsive{
+    background-color: var(--text-primary) !important;
+}
+
+#under-responsive, #under-responsibility, #under-reflection{
+    border-radius: 10px;
+    color: var(--ourbeige) ;
+}
+
+#under-reflection div, #under-responsibility div, #under-responsive div{
+    padding: 15px;   
+}
+
+.framecycletab{
+    box-shadow: 1px 2px 5px gray;
+    background-color: var(--background);
+    padding: 30px 20px;
+    border-radius: 20px;
+    margin-left: 60px;
+  }
+
+  .act-version, .reflect-version, .engage-version /*, .anticipate-version */{
+    display: none !important;
+  }
+
+  #g744{
+    display: block !important;
+  }
+
+  #hp3-wrapper{
+    display: inline-flex;
+    justify-content: center;
+    max-width: 70%;
+    max-height: 60%;
+  }
+
+  
+  #left-col {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  #ref-img {
+    width: 100%;
+    height: auto;
+  }
+
+
+  
+  .mitte {
+    
+    flex-grow: 1; /* Nimmt den gesamten restlichen Platz ein */
+  }
+  
+  .unten {
+    padding-bottom: 50px;
+    padding-left: 10px;
+  }
+  
+  .mitte-parent{
+    display: grid;
+  }
+
+  .graphs{
+    max-height: 50% !important;
+  }
+
+  .pie-chart-container-small{
+    height: auto;
+  }
+
+  .pie-chart-container-other{
+    height: 250px !important;
+  }
+
+  .pie-chart-container-small, .pie-chart-container, .pie-chart-container-other, .bar-chart-container {
+    margin-bottom: 10px;
+  }
\ No newline at end of file

src/App/LandingPage.css

+.content-block {
+  width:100vw;
+  height:100vh;
+  opacity: 0;
+  visibility: hidden;  
+  transition: opacity 1200ms ease-out, transform 600ms ease-out,
+  visibility 1200ms ease-out;
+  will-change: opacity, visibility;
+  background-color: var(--offblack);
+}
+
+.content-block.is-visible {
+    opacity: 1;
+    transform: none;
+    visibility: visible;
+    background-color: var(--offblack);
+}
+
+.landing-page-header .row .col{
+  padding: 30px;
+  margin: auto;
+  justify-content: center;
+}
+
+.landing-page-header .col{
+  justify-content: center;
+  display: grid ;
+}
+
+
+.landing-page-header button{
+  background-color: var(--accent-primary);
+  border-radius: 10px;
+  padding: 10px;
+  width: 30vw;
+}
+
+.landing-page-header{
+  padding-top: 200px !important;
+}
+
+.header-button-row{
+  min-height: 450px;
+}
+
+
+/* .header-button-row .h5 {
+
+} */
+
+#landing-page-header-2{
+  margin-top: 5rem;
+  background-image: url("https://static.igem.wiki/teams/5247/landing-page/lp-1new-lung-two.svg") !important;
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+  padding: 0 !important;
+}
+
+.button-x{
+ 
+  align-items: center;
+  display: flex;
+  align-self: center;
+}
+
+.button-x button{
+  margin: auto;
+  padding: 10px;
+  border-radius: 10px;
+  background-color: var(--text-primary);
+  color: var(--ourbeige)
+}
\ No newline at end of file

src/App/LoadingScreen.css

@@ -9,6 +9,7 @@
     justify-content: center;
     align-items: center;
     z-index: 9999;
+    animation: fadeInOut 5s forwards;
 }
 
 .custom-animation {
@@ -24,4 +25,17 @@
     50% {
         transform: scale(1.2);
     }
-}
\ No newline at end of file
+}
+
+@keyframes fadeInOut {
+        0% {
+            opacity: 1;
+        }
+        80% {
+            opacity: 1;
+        }
+        100% {
+            opacity: 0;
+        }
+
+    }
\ No newline at end of file

src/App/Timelines.css

+/* * * * * * * * * * * */
+/* Horizontal Timeline */
+/* * * * * * * * * * * */
+
+/* This is the timeline container */
+.timeline {
+  white-space: nowrap;
+  min-height: 700px;
+  width: 75vw; 
+  overflow-x: auto !important;
+  max-width: inherit !important;
+  overflow-y: hidden !important;
+  width: 100%;
+  background-color: inherit; 
+  /* align items center */
+  align-items: center !important;
+  /* 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));
+}
+/* This is the timeline list container */
+.timelineol {
+  font-size: 0;
+  width: 100vw;
+  padding: 250px 0;
+  transition: all 1s;
+}
+
+/* Positioning of the upper timeline cards */
+.timeline ol li:nth-child(2n+1) .time-meta::before{
+  top: 100%;
+  left: 8px !important;
+  border-color: white transparent transparent transparent !important;
+}
+.timeline ol li:nth-child(2n+1) .moretop{
+  top: -40px !important;   
+}
+.timeline ol li:nth-child(odd) .timeline-item {
+  top: -16px;
+  transform: translateY(-100%);
+  box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
+}
+
+
+/* Positioning for the lower timeline cards */
+.timeline ol li:nth-child(2n) .time-meta::before{
+top: 100%;
+left: 8px !important;
+border-color:  transparent transparent transparent white !important;
+}
+.timeline ol li:nth-child(2n) .moretop{
+top: 50px !important;   
+}
+.timeline ol li:nth-child(even) .timeline-item {
+  box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
+  top: calc(100% + 16px);
+}
+  
+
+/* The DNA Strang of the timeline */
+.timelineolli {
+position: relative;
+display: inline-block;
+list-style-type: none;
+width: 250px;
+height: 20px;
+background-image: url("https://static.igem.wiki/teams/5247/design/icons/dna-strang-schmal-fatter.svg"); 
+background-size: 100% 120%;
+}
+
+/* Timeline Pointers outline and form */
+.timeline ol li .timeline-item::before {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 0;
+  height: 0;
+  border-style: solid;  
+}
+.timeline ol li:nth-child(odd) .timeline-item::before {
+top: 100%;
+border-width: 20px 8px 0 0;
+border-color: var(--ourbeige)  transparent transparent transparent;
+}
+.timeline ol li:nth-child(even) .timeline-item::before {
+top: -20px;
+border-width: 20px 0 0 8px;
+border-color: transparent transparent transparent white;
+}
+
+/* To extend the line at the end */
+.timelineolli:last-child{
+background-size: 65% 120%;
+}
+.timeline ol li:last-child {
+  width: 300px;
+}
+
+/* For the points */
+.timeline ol li:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: calc(98%);
+  bottom: 0;
+  z-index: 4;
+  width: 40px;
+  height: 40px;
+  transform: translateY(-50%);
+  border-radius: 50%;
+  background: var(--text-primary);
+}
+
+/* Card layout */
+
+.timeline ol li .timeline-item {
+  height: 250px;
+  min-height: 310%;
+  position: absolute;
+  left: calc(100% + 7px);
+  width: 350px;
+  padding: 15px;
+  font-size: 0.9rem;
+  white-space: normal;
+  color: var(--offblack);
+  background: white; /* Soll white bleiben! */
+}
+
+/* Layout for meta timeline cards */
+.time-meta{
+  border-radius: 10px;
+}
+
+/* Tags */
+.t-tag{
+  box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
+  color: var(--ourbeige);
+  font-size: 12px;
+  font-weight: bold;
+  letter-spacing: 1px;
+  padding: 5px;
+  margin-bottom: 10px;
+  text-transform: uppercase;
+  width: fit-content !important;
+}
+
+button.tabbutton.Patient.active, button.tabbutton.All.active, 
+button.tabbutton.Industry.active, button.tabbutton.Academia.active, 
+button.tabbutton.Medical.active, .modulators.active, .inhalations.active{
+  border-color: var(--offblack);
+}
+
+
+/* and buttons */
+button.tabbutton:nth-child(1), button.tabbutton:nth-child(6){
+  background-color: white; /* soll whit ebleiben! */
+}
+
+.Patient, button.tabbutton:nth-child(2), .button.tabbutton:nth-child(7), .skin{
+  background-color: var(--accen-secondary) !important;
+}
+
+.Medical, button.tabbutton:nth-child(3), .button.tabbutton:nth-child(8), .mucosa{
+  background-color: var(--accent-primary);
+}
+
+.Academia, .Research, button.tabbutton:nth-child(4), button.tabbutton:nth-child(9){
+  background-color: var(--lightblue);
+}
+
+.Industry, button.tabbutton:nth-child(5){
+  background-color: var(--mediumpurple);
+}
+.Activist, .Milestone{
+  background-color: var(--igemmediumgreen) !important;
+}
+
+.Education, .Outreach{
+  background-color: var(--igemlightgreen);
+}
+
+.Other{
+  background-color: var(--offblack); 
+}
+
+
+/* * * * * * * */
+/* TIMELINE BFH*/
+/* * * * * * * */
+
+/* Container */
+.timeline-container {
+  display: flex;
+
+  flex-direction: column;
+  position: relative;
+  margin: 40px 0;
+}
+/* Line */
+.timeline-container::after {
+  background-color: var(--text-primary);
+  position: absolute;
+  left: calc(50% - 2px);
+  content: "";
+  width: 4px;
+  height: 100%;
+  z-index: 0;
+} 
+
+/* Cards */
+.timeline-item {
+  min-width: 100px;
+ /*  display: flex; */
+  justify-content: flex-end;
+  padding-right: 30px;
+  position: relative;
+  margin: 10px 0;
+  width: 50%;
+}
+.timeline-item-content {
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+  border-radius: 5px;
+  background-color: white; /* Soll white bleiben! */
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  padding: 15px;
+  position: relative;
+  text-align: right;
+}
+/* Accomodate for alteration in card design */
+.timeline-item:nth-child(odd) .timeline-item-content {
+  text-align: left;
+  align-items: flex-start;
+}
+
+/* Tags */
+.timeline-item-content .tag {
+  color: var(--ourbeige);
+  font-size: 12px;
+  font-weight: bold;
+  top: 5px;
+  left: 5px;
+  letter-spacing: 1px;
+  padding: 5px;
+  margin-top: 5px;
+  margin-left: 5px;
+  position: absolute;
+  text-transform: uppercase;
+}
+  .timeline-item:nth-child(odd) .timeline-item-content .tag {
+  left: auto;
+  right: 5px;
+  margin-right: 5px;
+}  
+/* Title design */  
+.timeline-item-content time {
+  color: var(--offblack);
+  font-size: 16px;
+  font-weight: bold;
+}
+
+/* To create alternation */
+.timeline-item:nth-child(odd) {
+  align-self: flex-end;
+  justify-content: flex-start;
+  padding-left: 30px;
+  padding-right: 0;
+}
+
+/* To create bigger first and final cards */
+.timeline-end{
+box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+border-radius: 5px;
+background-color: white; /* soll white bleiben */ 
+padding: 15px;
+position: relative;
+text-align: center;
+z-index: 1;
+margin-top: 8vw;
+}
+.timeline-begin{
+box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+border-radius: 5px;
+background-color: white; /* soll white bleiben */
+padding: 15px;
+position: relative;
+text-align: center;
+z-index: 1;
+margin-bottom: 8vw;
+}
+
+/* Make short description on card bigger */
+.timeline-item-content span{
+  font-size: 18px;
+}
+/* Make links on Cards fat */
+.timeline-item-content a {
+  font-weight: bold;
+}
+
+/* Circle */
+.timeline-item-content .circle {
+background-color: var(--ourbeige) !important;
+border: 3px solid var(--text-primary);
+border-radius: 50%;
+position: absolute;
+top: calc(50% - 10px);
+right: -54px !important;
+width: 20px;
+height: 20px;
+z-index: 100;
+} 
+.timeline-item:nth-child(odd) .timeline-item-content .circle {
+  right: auto;
+  left: -53px;
+}
+
+
+
+
+
+
+
+
+
+*/
+.hpbuttonrow {
+  display: flex; /* Flex-Layout für die untere Reihe */
+  margin-top: auto; /* Schiebt diese Reihe nach unten */
+  align-items: center; /* Vertikale Zentrierung */
+}
+
+.fillup {
+flex: 1;
+display: flex; /* Flex-Layout aktivieren */
+align-items: center; /* Vertikale Zentrierung */
+justify-content: center; /* Horizontale Zentrierung */
+}
+
+.timeline-item .row:first-child {
+  flex: 1; /* Füllt den verbleibenden Raum aus */
+  display: flex; /* Flex-Layout aktivieren */
+  align-items: center; /* Vertikale Zentrierung */
+}
+
+/* Untere Reihe */
+.timeline-item .row:last-child {
+  margin-top: auto; /* Schiebt die letzte Reihe nach unten */
+}
+
+
+
+
+.fillup-wrapper{
+display: flex;
+}
+
+
+.timeline-item figcaption{
+  background-color: var(--ourbeige)  !important;
+}
+
+
+.timeline-item figcaption, .timeline-item figure, .timeline-item figcaption h3 {
+  background-color: white !important;
+}
+
+
+
+.timeline-item .img-cube{
+  height: 120px;
+  max-height: 13vh;
+  object-fit: cover !important;
+
+}
\ No newline at end of file

src/App/calendar.css

+
+.month {
+    padding: 70px 25px;
+    width: 100%;
+    margin-top: 40px;
+    background: var(--mediumpurple);
+    text-align: center;
+    border-radius: 10px;
+  }
+
+.cal-entry{
+  border-color: var(--text-primary);
+  border-radius: 10px;
+  border-width: 2px;
+  border-style: dotted; 
+}
+
+.entry-body{
+  padding: 2vw 4vw;
+  
+}
+ 
+.entry-header{
+  background-color: var(--darkerbeige);
+  padding: 15px;
+  border-bottom-color: var(--text-primary);
+  border-bottom-width: 1px;
+  border-bottom-style: solid; 
+}
+  
+  .month ul {
+    margin: 0;
+    padding: 0;
+  }
+  
+  .month ul li {
+    color: var(--ourbeige) !important;
+    font-size: 20px;
+    text-transform: uppercase;
+    letter-spacing: 3px;
+    list-style: none;
+  }
+  
+  .prev a, .next a{
+    color: var(--ourbeige) !important;
+  }
+  .month .prev {
+    float: left;
+    padding-top: 10px;
+  }
+  
+  .month .next {
+    float: right;
+    padding-top: 10px;
+  }
+  
+  .weekdays {
+    border-radius: 10px;
+    margin: 0;
+    padding: 10px 0;
+    background-color: #ddd;
+  }
+  
+  .weekdays li {
+    display: inline-block;
+    width: 13.6%;
+    color: #666;
+    text-align: center;
+  }
+  
+  .days {
+    border-radius: 10px;
+    padding: 10px 0;
+    background: #eee;
+    margin: 0;
+  }
+  
+  .days li {
+    list-style-type: none;
+    display: inline-block;
+    width: 13.6%;
+    text-align: center;
+    margin-bottom: 5px;
+    font-size:12px;
+    color: #777;
+  }
+  
+  .days li .active {
+    padding: 5px;
+    background: #1abc9c;
+    color: var(--ourbeige) !important
+  }
+  
+  /* Add media queries for smaller screens */
+  @media screen and (max-width:720px) {
+    .weekdays li, .days li {width: 13.1%;}
+  }
+  
+  @media screen and (max-width: 420px) {
+    .weekdays li, .days li {width: 12.5%;}
+    .days li .active {padding: 2px;}
+  }
+  
+  @media screen and (max-width: 290px) {
+    .weekdays li, .days li {width: 12.2%;}
+  }
\ No newline at end of file

src/App/mediarules.css

+/* * * * * * * */
+/* MEDIA RULES */
+/* * * * * * * */
+
+/*For tablet or bigger*/
+@media screen and (min-width: 992px) {
+    /* navbar opens on hover*/ 
+    .dropdown:hover .dropdown-menu {
+        display: block;
+    }
+  }
+/*For Tablet and smaller*/
+@media screen and (max-width: 992px){
+    .two-pdf-line{ 
+        max-height: 650px !important;
+        height: 26vh !important;
+        max-width: 50vw !important;
+      }
+      .seperator-2{
+        width: 1px !important;
+      }
+      .boxy-1{
+        margin-top: 10px !important;
+      }
+      .navbar {
+        flex-direction: column;
+        align-items: center;
+      }
+      
+    
+      .col-6 {
+        width: 100%; /* Full width on tablets */
+      }
+      .progress-bar{
+        display: none !important;
+      }
+    
+}
+/*For Smartphones*/
+/*12pro*/
+@media screen and (max-width: 600px){
+    .lnp:hover > img{
+        display: block;
+        margin-left: none;
+        margin-right: none;
+        width: 8rem !important;
+        max-width: 100% !important;
+      }
+      .col-6 {
+        width: 100% ; 
+      }
+      .container-fluid {
+        min-height: 100vh; 
+      }
+      /***heading***/
+      .header-title{
+        min-height: 400px;
+        text-align: center;
+        align-items: center;
+        margin: auto !important;
+        padding: 0 30px;
+        font-size: 130px;
+        font-weight: 900;
+        line-height: 130px;
+      }
+      .header-container{
+        padding-top: 170px !important;
+        padding-bottom: 0px !important;
+        background-color: var(--ourbeige);
+      }
+      .base {
+        width: 100%;
+        background-color: var(--lightblue);
+        padding: 0px;
+    }
+    
+      /***footer***/
+      footer {
+          width: 100% !important; 
+          box-sizing: border-box !important; 
+          padding: 15px !important;       
+        
+      }
+      .col {
+        width: 100% !important; 
+        margin-bottom: 20px; 
+      }
+      .col-sm-4, .col-sm-8, .col-6 {
+        width: 100%; 
+      }
+      footer a, footer p {
+        font-size: 14px; 
+        line-height: 1.4; 
+      }
+    
+      footer .socials {
+        display: flex;
+        justify-content: center !important;
+        margin-bottom: 10px;
+      }
+    
+      .contact-info {
+        font-size: 14px; 
+        text-align: center;
+
+      }
+    
+      .img-sponsor {
+        width: 100px; 
+        height: auto;
+        margin: 0 auto; 
+      }
+      .footer-slider {
+        width: 100%; 
+        margin-top: 20px;
+      }
+
+      footer a {
+        word-wrap: break-word;
+        overflow-wrap: break-word;
+      }
+      hr {
+        margin: 20px 0; 
+      }
+
+    /***gif***/
+    .CFTR-gif  {
+      width: 1000px !important; 
+      max-width: 100%;
+      height: auto; 
+    }
+    /***home***/
+   #breatht  {
+    font-size: 1.5em !important; /* Adjust font size for smaller screens */
+    text-align: left; /* Optional: center text for mobile */
+  }
+   #breathf {
+    left: 48vw !important;
+    width: 65vw !important;
+
+  }
+  /*#breatht1 {
+    left: 0 !important;
+    position:initial!important;
+    font-size: 0.5em !important;
+
+  }*/ 
+  img[src*="200k-anim-transparent-bg.gif"] {
+    width: 100%;
+    height: auto;
+  }
+    /***Biosafty***/
+    #safehead {
+      background-size: contain; /* Adjust the image to fit within the container */
+      background-position: center 25%; /* Push the image down for better visibility */
+      height: 10px; /* Adjust the height for mobile screens */
+    }
+    /***contribution***/
+    .timeline-item{
+      padding-right: 0px !important;
+      padding-left: 5%;
+      width: 50% !important;
+      box-sizing: content-box;
+      text-align: left !important;
+
+    }
+    .timeline-item:nth-child(odd) {
+      align-self: flex-end !important;
+      justify-content: flex-start;
+      padding-left: 30px;
+      padding-right: 0;
+    }
+    figure.snipp1113{
+      min-width: 0px !important ;
+      max-width: 120px ;
+      width: 100% ;
+      margin-left: 80px;
+
+    }
+    .timeline-item-content{
+      text-align:initial !important;
+      align-items: flex-end ;
+      padding-left: 30px;
+      font-display: initial !important;
+      display: flex;
+      position: inherit;
+    }
+    .timeline-item-content .tag{
+      padding: 0px !important;
+
+    }
+    /***engineering***/
+    .col-2{
+      width: 50% !important;
+    }
+    /***Description***/
+    .pie-chart-container-small {
+        width: 300px !important; /* Make smaller for mobile */
+        height: 300px !important; /* Adjust height accordingly */
+      }  
+    .quiz-wrapper {
+        flex-direction: column;
+        padding: 10px;
+        width: 100% !important; /* Set width to 100% for mobile screens */
+      }
+    
+    .quiz-front, .quiz-back {
+        padding: 10px !important;
+      }
+    
+    .quiz-heading {
+        font-size: 1.2em;
+      }
+    
+    .quiz-text {
+        font-size: 1em;
+        margin-bottom: 10px !important;
+        word-wrap: break-word; /* Keep word breaking for mobile */
+      }
+    
+    .quiz-button-box {
+        margin-top: 5px !important;
+        justify-content: space-evenly;
+      }
+    
+
+    .row-if-small{
+        --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));
+        width: 100% !important;
+    }
+    .col-4, .col-3{
+        margin-top: 10px !important;
+        margin-bottom: 10px !important;
+    }
+    .full-small{
+        width: 100% !important;
+        max-height: 100% !important;
+    }
+    .max400{
+        max-width: 100% !important;
+        max-height: 100% !important;
+    }
+    .panel-talk-gallery div img{
+        max-width: 100% !important;
+    }
+    .panel-talk-gallery .col, .panel-talk-gallery .col:nth-child(5), 
+    .panel-talk-gallery .col:nth-child(1), .panel-talk-gallery .col:nth-child(2), 
+    .panel-talk-gallery .col:nth-child(3), .panel-talk-gallery .col:nth-child(4){
+        margin-top: 20px !important;
+    }
+    .bfh-slider{
+        width: 100em !important;
+        max-width: 250px !important;
+    } 
+    
+    .tag{
+        width: min-content !important;
+    }
+    .timeline-item-content  time{
+        width: fit-content !important;
+        margin-top: 0 !important;
+        max-width: 10em !important;
+    }
+    .picture-frame{
+        margin-bottom: 20px !important;
+    }
+    .winner{
+        font-size: x-large;
+    }
+    .small-only{
+        display: block !important;
+    }
+    .small-none{
+        display: none !important;
+    }
+    .bfh-menu{
+        max-width: 50vw !important;
+    }
+    .two-pdf-line{ 
+        max-height: 650px !important;
+        height: 26vh !important;
+        width: 65vw !important;
+        max-width: 60vw !important;
+        margin: auto;
+      }
+svg text{
+    font-size: 5vw !important;
+    stroke-width:1px !important;
+}
+.village-style-button h3{
+    display: none !important;
+}
+.village-style-button{
+    box-shadow: 1px 1px 1px gray;
+    border-radius: 10px;
+    border-color: var(--offblack);
+    padding: 10px; 
+
+}
+.village-style-button:hover{
+    box-shadow: none;
+}
+.village-style-button img{
+    max-width: 90%;
+    max-height: 90%;
+    padding-top: 10px;
+    padding-bottom: 5px;
+}
+.bigtitle {
+    width: 450px !important;
+    height: 200px !important;
+    word-wrap: break-word; 
+}
+
+.framecycletab{
+  margin-left: 0 !important; 
+}
+
+body {
+/*     padding: 10px !important; */
+    width: 202% !important;
+    overflow-x: hidden ; /* Prevents horizontal scrolling */
+    margin: 0;
+    padding: 0;
+    background-size: cover !important; /* Ensures the background scales to cover the entire screen */
+    background-position: center !important; /* Keeps the background centered */
+    background-repeat: no-repeat;
+}
+
+
+.img-half{
+    max-width: 100% !important;
+    height: auto !important;
+}
+/*.container {
+    padding: 10px;
+  }*/
+
+ .row{
+    display: grid !important;
+ }
+
+
+.full-col-phone{
+  width: 100vw !important;
+}
+}
+
+/*For small Smartphones (iphone 13 or similars)*/
+@media screen and (max-width: 400px){
+  .figure-wrapper:first-of-type img {
+    width: 100% !important;  /* Full width on small screens */
+    height: 10% !important;  /* Maintain aspect ratio */
+    max-width: 100% !important;  /* Limit the image width to fit the screen */
+    margin: 0 auto;  /* Center the image horizontally */
+    overflow: visible !important;
+  }
+
+  .figure-wrapper:first-of-type img{
+    text-align: center;  /* Ensure the figure caption is centered */
+  }
+
+    
+}
+/* Big computer screens */
+@media only screen and (min-width: 1600px){
+    .two-pdf-line{
+        max-height: 50vw !important;
+        height: 50vh !important;
+    }
+}
+/*Bigger than smartphones*/
+@media only screen and (min-width: 768px) {
+.col-1 {width: 8.33%;}
+.col-2 {width: 16.66%;}
+.col-3 {width: 25%;}
+.col-4 {width: 33.33%;}
+.col-5 {width: 41.66%;}
+.col-6 {width: 50%;}
+.col-7 {width: 58.33%;}
+.col-8 {width: 66.66%;}
+.col-9 {width: 75%;}
+.col-10 {width: 83.33%;}
+.col-11 {width: 91.66%;}
+.col-12 {width: 100%;}
+
+
+}
+
+/***description***/
+.pie-chart-container {
+  width: 600px;  /* Set the width of the container */
+  height: 600px; /* Set the height of the container */
+  position: relative;
+  margin: 0 auto; /* Center the chart */
+}
+
+@media screen and (max-width: 1300px){
+    .one-pdf-line{
+        height: 115vw !important;
+      }
+}
\ No newline at end of file

src/components/AOSs.tsx

 
 import { useEffect } from "react";
-
+import AOS from "aos";
 
 
 export function AOStry(){
     useEffect(() => {
-       /*  AOS.init({
+        AOS.init({
           disable: "phone",
           duration: 700,
           easing: "ease-out-cubic",
-        }); */
+        }); 
       }, []);
     return(
         <h1 data-aos="zoom-y-out">Sample heading</h1>
     )
-}
\ No newline at end of file
+}
+