.env

 VITE_TEAM_ID=5247
 VITE_TEAM_NAME=Bielefeld-CeBiTec
-VITE_TEAM_YEAR=2024
+VITE_TEAM_YEAR=2024
\ No newline at end of file

.gitignore

@@ -2,10 +2,21 @@ env
 venv
 .vscode
 __pycache__
-public
 .venv
+code/biblib-master
 node_modules
 versions
-code
 .vite
-app.py
\ No newline at end of file
+app.py
+unused.py
+unused-css-master
+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

.gitlab-ci.yml

@@ -3,17 +3,28 @@ image: node:18.20.0
 build:
   stage: build
   cache:
-    - key:
-        files:
-          - yarn.lock
+    - key: $CI_COMMIT_REF_SLUG
+        
       paths:
         - .yarn-cache/
   before_script:
     - echo 'yarn-offline-mirror ".yarn-cache/"' >> .yarnrc
     - echo 'yarn-offline-mirror-pruning true' >> .yarnrc
+    - apt-get update && apt-get install -y libpangocairo-1.0-0
     - yarn install --frozen-lockfile
+    - echo "$VITE_TEAM_NAME"
+    - echo "Environment variables:"
+    - printenv
+    - echo "Node version:"
+    - node -v
+    - echo "npm version:"
+    - npm -v
+    - echo "Installed packages:"
+    - yarn list
+
   script:
     - yarn build
+    - mv dist public
   rules:
     - if: $CI_COMMIT_BRANCH != $CI_DEFAULT_BRANCH
 
@@ -28,11 +39,12 @@ pages:
   before_script:
     - echo 'yarn-offline-mirror ".yarn-cache/"' >> .yarnrc
     - echo 'yarn-offline-mirror-pruning true' >> .yarnrc
+    - apt-get update && apt-get install -y libpangocairo-1.0-0
     - yarn install --frozen-lockfile
   script:
     - yarn build
-    - cp -a dist/. public/
-    - echo '/* /index.html 200' > public/_redirects
+    - mv dist public #Ensure the output directory is renamed to public
+    - echo '/* /index.html 200' > public/_redirects #original
   artifacts:
     paths:
       - public

README.md

@@ -6,64 +6,38 @@ Images, photos, icons and fonts **MUST** be stored on `static.igem.wiki` using [
 
 For up-to-date requirements, resources, help and guidance, visit [competition.igem.org/deliverables/team-wiki](https://competition.igem.org/deliverables/team-wiki).
 
-## Getting started
 
-You should probably only edit the files inside folders `static`, `wiki` and `wiki > pages`.
-1. Open the Web IDE
-2. Make the changes on the files you wish:
-    * For the menu, change the file [menu.html](wiki/menu.html)
-    * For the layout, change the file [layout.html](wiki/layout.html)
-    * For the pages, change the corresponding file in the foler [pages](wiki/pages)
-3. Review the changes you made
-4. Once you are done, save the changes by **committing** them to the *main branch* of the repository 
-5. An automated script will build, test and deploy your wiki, which should take less than 30 seconds.
-
-## About this Template
 
 ### Files
 
 The static assets are in the `static` directory. The layout and templates are in the `wiki` directory, and the pages live in the `wiki > pages` directory. Unless you are an experienced and/or adventurous human, you probably shouldn't change other files.
 
-    |__ static/             -> static assets (CSS and JavaScript files only)
-    |__ wiki/               -> Main directory for the pages and layouts
-        |__ footer.html     -> Footer that will appear in all the pages
-        |__ layout.html     -> Main layout of your wiki. All the pages will follow its structure
-        |__ menu.html       -> Menu that will appear in all the pages
-        |__ pages/          -> Directory for all the pages
-            |__ *.html      -> Actual pages of your wiki
-    |__ .gitignore          -> Tells GitLab which files/directories should not be uploaded to the repository
-    |__ .gitlab-ci.yml      -> Automated flow for building, testing and deploying your website.
-    |__ LICENSE             -> License CC-by-4.0, all wikis are required to have this license - DO NOT MODIFY
-    |__ README.md           -> File containing the text you are reading right now
-    |__ app.py              -> Python code managing your wiki
-    |__ dependencies.txt    -> Software dependencies from the Python code
-
-### Technologies
-
-  * [GitLab Pages](https://docs.gitlab.com/ee/user/project/pages/)
-  * [Python](https://www.python.org): Programming language
-  * [Flask](https://palletsprojects.com/p/flask/): Python framework
-  * [Fronzen-Flask](https://pythonhosted.org/Frozen-Flask): Library that builds the wiki to be deployed as a static website
-  * [Bootstrap](https://getbootstrap.com/docs/5.0/components): CSS and JS components used
-
-### Building locally (advanced users)
-
-To work locally with this project, follow the steps below:
-
-#### Install
-```bash
-git clone https://gitlab.igem.org/2024/bielefeld-cebitec.git
-cd bielefeld-cebitec
-python3 -m venv venv
-. venv/bin/activate # on Linux, MacOS; or
-. venv\Scripts\activate # on Windows
-pip install -r dependencies.txt
-```
+├── README.md                       -> The file you are currently reading
+├── public
+|   ├── index.html                  -> Single HTML file for the wiki
+├── package.json                    -> Manages project metadata and dependencies
+├── src/
+│   ├── components/                 -> Components (Like Navbar, Timelines, ...)
+│   ├── App/                        -> Main React application container
+|   |     ├── App.tsx
+|   |     └── App.css
+│   ├── contents/                   -> Page components for the website
+│   │   ├── *.tsx                   
+│   │   └── index.ts                -> Declaration file 
+│   ├── main.tsx                    -> Entry point of the wiki application
+│   ├── pages.ts                    -> Page definition and path mapping
+│   ├── utils/                      -> Utility functions
+|   |       ├── *.js                -> Extra js files
+|   |       └── *.ts                -> Given ts files 
+│   └── vite-env.d.ts               -> TypeScript definitions for Vite
+├── tsconfig.json                   -> Configures TypeScript options
+├── tsconfig.node.json              -> TypeScript settings for Node.js
+├── vite.config.ts                  -> Configuration for the Vite tool
+└── yarn.lock                       -> Yarn lock file for dependency management
+
+
+
 
-#### Execute
-```bash
-python app.py
-```
 
 Read me changed for test
 Kaya was here
@@ -71,4 +45,73 @@ Lisa
 <3
 asal say hi 
 
-hellooo it's mee, Flip :D
\ No newline at end of file
+hellooo it's mee, Flip :D
+
+
+
+### Local run 
+#### Install npm 
+For that, we have to install Node.js from https://nodejs.org/en/download/package-manager
+Close Terminal and open again
+check installation with: 
+  node -v
+  npm -v
+Close VSC and open it again
+#### Install yarn
+npm install --global yarn
+
+#### Navigate to folder and install dependencies
+cd bielefeld-cebitec
+yarn install
+
+#### Run 
+yarn run dev
+
+
+
+
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
+
+npm install @mui/material @emotion/react @emotion/styled
+npm install @mui/lab
+yarn add react-simple-maps
+npm -i @types/react-simple-maps
+
+yarn add react-grid-gallery
+yarn add react-select
+yarn add react-pdf
+npm install --save react-grid-gallery
+
+
+Argument of type 'DSVRowArray<string>' is not assignable to parameter of type 'SetStateAction<never[]>'.
+  Type 'DSVRowArray<string>' is not assignable to type 'never[]'.
+    The types returned by 'pop()' are incompatible between these types.
+      Type 'DSVRowString<string> | undefined' is not assignable to type 'undefined'.
+        Type 'DSVRowString<string>' is not assignable to type 'undefined'.
+
+        Hallo ich bins
+        Hallo ich bins nochmal
+        Overwritten 
+        Overwritten 
+change2
+
+
+fnm env --use-on-cd | Out-String | Invoke-Expression
+fnm use --install-if-missing 18
+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/common/icons/favicons/igem-2022.svg"
-      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" />
-    <title>%VITE_TEAM_NAME% - iGEM %VITE_TEAM_YEAR%</title>
+
+    <title>Bielefeld-CeBiTec - iGEM 2024</title>
   </head>
   <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <div id="root" style="background-color: #FFF6F2;"></div>
+    
+    <script type="module" src="./src/main.tsx"></script>
   </body>
 </html>
 

package.json

@@ -7,23 +7,61 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "format": "prettier --write \"**/*.{ts,tsx,md,json,css}\"",
+    "format": "prettier --write \"**/*.{ts,tsx,md,json,css,js}\"",
     "preview": "vite preview"
   },
   "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",
+    "@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.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-router-dom": "^6.23.0"
+    "react-js-diagrams": "^2.3.2",
+    "react-photo-album": "^2.4.1",
+    "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",
     "@types/react-dom": "^18.2.22",
+    "@types/react-helmet": "^6.1.11",
+    "@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",

pubpub/mapscript.js

+! function() {
+    "use strict";
+    const t = new Set(["0", "false", "null"]),
+        e = {
+            allowEditing: Boolean,
+            dark: function(e) {
+                return "auto" === e ? e : !!e && !t.has(e)
+            },
+            dev: Boolean,
+            fitchart: Boolean,
+            logo: String,
+            logoId: String,
+            map2svg: Boolean,
+            plain: Boolean,
+            previewId: String,
+            search: String,
+            static: Boolean,
+            svgonly: Boolean,
+            theme: String,
+            transparent: Boolean
+        };
+     function n(n) {
+        return function(n) {
+            let r = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : e;
+            return Object.fromEntries(Object.entries(r).map((e => {
+                let [r, o] = e;
+                const i = n(r);
+                return o === Boolean ? [r, !!i && !t.has(i)] : [r, i && o(i)]
+            })))
+        }((t => n.getAttribute("data-".concat(t))), arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : e)
+    }
+
+    function r() {}
+    const o = {};
+    const i = {},
+        a = "undefined" != typeof Symbol ? Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator")) : "@@iterator";
+
+    function c(t, e, n) {
+        if (!t.s) {
+            if (n instanceof s) {
+                if (!n.s) return void(n.o = c.bind(null, t, e));
+                1 & e && (e = n.s), n = n.v
+            }
+            if (n && n.then) return void n.then(c.bind(null, t, e), c.bind(null, t, 2));
+            t.s = e, t.v = n;
+            const r = t.o;
+            r && r(t)
+        }
+    }
+    const s = function() {
+        function t() {}
+        return t.prototype.then = function(e, n) {
+            const r = new t,
+                o = this.s;
+            if (o) {
+                const t = 1 & o ? e : n;
+                if (t) {
+                    try {
+                        c(r, 1, t(this.v))
+                    } catch (t) {
+                        c(r, 2, t)
+                    }
+                    return r
+                }
+                return this
+            }
+            return this.o = function(t) {
+                try {
+                    const o = t.v;
+                    1 & t.s ? c(r, 1, e ? e(o) : o) : n ? c(r, 1, n(o)) : c(r, 2, o)
+                } catch (t) {
+                    c(r, 2, t)
+                }
+            }, r
+        }, t
+    }();
+
+    function u(t) {
+        return t instanceof s && 1 & t.s
+    }
+
+    function l(t, e, n) {
+        if ("function" == typeof t[a]) {
+            var r, o, i, l = t[a]();
+
+            function f(t) {
+                try {
+                    for (; !((r = l.next()).done || n && n());)
+                        if ((t = e(r.value)) && t.then) {
+                            if (!u(t)) return void t.then(f, i || (i = c.bind(null, o = new s, 2)));
+                            t = t.v
+                        } o ? c(o, 1, t) : o = t
+                } catch (t) {
+                    c(o || (o = new s), 2, t)
+                }
+            }
+            if (f(), l.return) {
+                var d = function(t) {
+                    try {
+                        r.done || l.return()
+                    } catch (t) {}
+                    return t
+                };
+                if (o && o.then) return o.then(d, (function(t) {
+                    throw d(t)
+                }));
+                d()
+            }
+            return o
+        }
+        if (!("length" in t)) throw new TypeError("Object is not iterable");
+        for (var h = [], p = 0; p < t.length; p++) h.push(t[p]);
+        return function(t, e, n) {
+            var r, o, i = -1;
+            return function a(l) {
+                try {
+                    for (; ++i < t.length && (!n || !n());)
+                        if ((l = e(i)) && l.then) {
+                            if (!u(l)) return void l.then(a, o || (o = c.bind(null, r = new s, 2)));
+                            l = l.v
+                        } r ? c(r, 1, l) : r = l
+                } catch (t) {
+                    c(r || (r = new s), 2, t)
+                }
+            }(), r
+        }(h, (function(t) {
+            return e(h[t])
+        }), n)
+    }
+
+    function d(t) {
+        return function() {
+            for (var e = [], n = 0; n < arguments.length; n++) e[n] = arguments[n];
+            try {
+                return Promise.resolve(t.apply(this, e))
+            } catch (t) {
+                return Promise.reject(t)
+            }
+        }
+    }
+    window.datawrapper && window.datawrapper.render || (window.datawrapper = {
+        ...window.datawrapper || {},
+        chartData: o,
+        libraries: {},
+        WebComponent: {},
+        render: d((function(t) {
+            let e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {};
+            t.script = document.currentScript, !t.chart.publicUrl && t.script && (t.chart.publicUrl = t.script.src.replace(/\/(embed\.js)?$/, "/"));
+            const o = t.origin = e.origin || (t.chart.publicUrl || "").replace(/\/(index\.html)?$/, "");
+            window.datawrapper.chartData[t.chart.id] = Promise.resolve(t);
+            const a = "datawrapper-vis-".concat(t.chart.id),
+                c = e.target || document.createElement("div");
+            c.classList.add("datawrapper-script-embed"), c.setAttribute("id", a), e.target || t.script.parentNode.insertBefore(c, t.script), c.style.all = "initial";
+            const s = e.flags || n(t.script),
+                u = "auto" === s.dark || null === s.dark && t.chartAutoDark;
+            if (u && (s.dark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches), !("customElements" in window) || !("ResizeObserver" in window)) {
+                const e = document.createElement("iframe");
+                return e.src = t.chart.publicUrl, e.setAttribute("title", t.chart.title), e.setAttribute("scrolling", "no"), e.setAttribute("frameborder", "0"), e.setAttribute("style", "width: 0; min-width: 100% !important; border: none;"), e.setAttribute("height", t.chart.metadata.publish["embed-height"]), e.setAttribute("data-external", 1), c.appendChild(e), void window.addEventListener("message", (function(t) {
+                    if (void 0 !== t.data["datawrapper-height"]) {
+                        var e = document.querySelectorAll("iframe");
+                        for (var n in t.data["datawrapper-height"])
+                            for (var r = 0; r < e.length; r++)
+                                if (e[r].contentWindow === t.source) {
+                                    var o = t.data["datawrapper-height"][n] + "px";
+                                    e[r].style.height = o
+                                }
+                    }
+                }))
+            }
+            let h = null;
+            const p = {
+                    target: c,
+                    props: {
+                        outerContainer: c,
+                        dependencyPromises: window.datawrapper.dependencyPromises,
+                        renderFlags: s,
+                        isAutoDark: u,
+                        ...t,
+                        selfDestruct() {
+                            h && h.$destroy ? h.$destroy() : c.innerHTML = ""
+                        }
+                    },
+                    hydrate: !1
+                },
+                f = d((function(t) {
+                    return i[t] || (i[t] = function(t) {
+                        let e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : null;
+                        return new Promise(((n, r) => {
+                            const o = document.createElement("script");
+                            o.src = t, o.charset = "utf-8", o.onload = () => {
+                                e && e(), n()
+                            }, o.onerror = r, document.body.appendChild(o)
+                        }))
+                    }(t.startsWith("http") ? t : "".concat(o, "/").concat(t))), i[t]
+                })),
+                [m, w, ...v] = t.dependencies;
+            return b = Promise.all([f(m), f(w)]), g = function() {
+                return e = l(v, (function(t) {
+                    return function(t, e) {
+                        if (!e) return t && t.then ? t.then(r) : Promise.resolve()
+                    }(f(t))
+                })), n = function() {
+                    const {
+                        webComponentJsHash: e
+                    } = t, n = window.datawrapper.WebComponent[e] || window.datawrapper.VisualizationWebComponent, r = "datawrapper-visualization", o = customElements.get(r) && customElements.get(r) !== n ? "".concat(r, "-").concat(null != e ? e : "1") : r;
+                    customElements.get(o) || customElements.define(o, n);
+                    const i = customElements.get(o);
+                    h = new i(p)
+                }, e && e.then ? e.then(n) : n(e);
+                var e, n
+            }, y ? g ? g(b) : b : (b && b.then || (b = Promise.resolve(b)), g ? b.then(g) : b);
+            var b, g, y
+        }))
+    })
+}();
+
+window.datawrapper.render({
+    "chart": {
+        "metadata": {
+            "data": {
+                "changes": [],
+                "transpose": false,
+                "vertical-header": true,
+                "horizontal-header": true,
+                "column-format": {
+                    "928": {
+                        "type": "number"
+                    },
+                    "CF": {
+                        "type": "auto"
+                    },
+                    "VALUE": {
+                        "type": "auto"
+                    },
+                    "Austria": {
+                        "type": "text"
+                    },
+                    "DW_NAME": {
+                        "type": "text"
+                    }
+                },
+                "upload-method": "copy"
+            },
+            "describe": {
+                "source-name": "",
+                "source-url": "",
+                "intro": "",
+                "byline": "",
+                "aria-description": "",
+                "number-format": "-",
+                "number-divisor": 0,
+                "number-append": "",
+                "number-prepend": "",
+                "hide-title": false
+            },
+            "visualize": {
+                "dark-mode-invert": true,
+                "highlighted-series": [],
+                "highlighted-values": [],
+                "sharing": {
+                    "enabled": false,
+                    "url": "https://www.datawrapper.de/_/llngz",
+                    "auto": false
+                },
+                "labels": {
+                    "max": 1,
+                    "type": "places",
+                    "places": [],
+                    "enabled": false
+                },
+                "layers": {},
+                "basemap": "world-2019",
+                "legends": {
+                    "color": {
+                        "size": 170,
+                        "title": "",
+                        "labels": "ranges",
+                        "enabled": true,
+                        "offsetX": 0,
+                        "offsetY": 0,
+                        "reverse": false,
+                        "labelMax": "high",
+                        "labelMin": "low",
+                        "position": "above",
+                        "hideItems": [],
+                        "showTitle": false,
+                        "interactive": false,
+                        "labelCenter": "medium",
+                        "labelFormat": "0,0.[00]",
+                        "orientation": "horizontal",
+                        "customLabels": []
+                    }
+                },
+                "mapView": "crop",
+                "miniMap": {
+                    "size": 175,
+                    "enabled": false,
+                    "offsetX": 1,
+                    "offsetY": 1,
+                    "position": "bottom-left",
+                    "innerBorders": false
+                },
+                "tooltip": {
+                    "body": "{{ _928 }}",
+                    "title": "{{ austria }}",
+                    "sticky": true,
+                    "enabled": true
+                },
+                "zoomable": false,
+                "map-align": "center",
+                "colorscale": {
+                    "map": {},
+                    "mode": "continuous",
+                    "stops": "equidistant",
+                    "colors": [{
+                        "color": "#fae99e",
+                        "position": 0
+                    }, {
+                        "color": "#f4cc1e",
+                        "position": 0.16666666666666666
+                    }, {
+                        "color": "#ff9d43",
+                        "position": 0.3333333333333333
+                    }, {
+                        "color": "#f57d22",
+                        "position": 0.5
+                    }, {
+                        "color": "#bc15aa",
+                        "position": 0.6666666666666666
+                    }, {
+                        "color": "#850f78",
+                        "position": 0.8333333333333334
+                    }, {
+                        "color": "#32232c",
+                        "position": 1
+                    }],
+                    "palette": 0,
+                    "rangeMax": "",
+                    "rangeMin": "",
+                    "stopCount": 5,
+                    "customStops": [null, 508, 1017, 1525, 2034, null, "", "", ""],
+                    "rangeCenter": "",
+                    "categoryOrder": [],
+                    "interpolation": "equidistant",
+                    "categoryLabels": {}
+                },
+                "max-height": 650,
+                "map-padding": 0,
+                "map-key-attr": "NAME_SHORT",
+                "map-type-set": true,
+                "chart-type-set": true,
+                "max-map-height": 650,
+                "min-label-zoom": 1,
+                "zoom-button-pos": "br",
+                "map-label-format": "0,0.[00]",
+                "text-annotations": [],
+                "range-annotations": [],
+                "hide-empty-regions": false,
+                "mapViewCropPadding": 10,
+                "avoid-label-overlap": true,
+                "hide-region-borders": false,
+                "basemapShowExtraOptions": false
+            },
+            "axes": {
+                "keys": "Austria",
+                "values": "928"
+            },
+
+            "annotate": {
+                "notes": ""
+            },
+            "custom": {}
+        },
+        "title": "",
+        "readonlyKeys": [],
+        "publicId": "llngz",
+        "language": "en-GB",
+        "theme": "datawrapper",
+        "id": "llngz",
+        "type": "d3-maps-choropleth",
+        "lastEditStep": 4,
+        "publishedAt": null,
+        "publicUrl": "https://datawrapper.dwcdn.net/llngz/1/",
+        "publicVersion": 1,
+        "forkable": false,
+        "isFork": false,
+        "externalData": "",
+        "createdAt": "2024-06-29T22:04:28.000Z",
+        "lastModifiedAt": "2024-06-29T22:28:39.000Z",
+        "forkedFrom": null,
+        "organizationId": null,
+        "authorId": 753476,
+        "folderId": null
+    },
+    "visualization": {
+        "ariaLabel": "map",
+        "axes": {
+            "keys": {
+                "accepts": ["text"],
+                "preferred": "^(key|id|geo|ags|fips|iso)"
+            },
+            "values": {
+                "accepts": ["number", "text"]
+            },
+            "labels": {
+                "accepts": ["text", "number"],
+                "optional": true
+            }
+        },
+        "controls": {
+            "js": "vis-d3-maps/static/controls-choropleth.js",
+            "css": "vis-d3-maps/static/controls-choropleth.css",
+            "amd": "svelte/d3-maps/controls-choropleth",
+            "migrate": "/lib/plugins/vis-d3-maps/static/migrate.js"
+        },
+        "defaultMetadata": {
+            "zoomable": false,
+            "zoom-button-pos": "br",
+            "hide-empty-regions": false,
+            "mapView": "full",
+            "mapViewCropPadding": 10,
+            "min-label-zoom": 1,
+            "map-padding": 0,
+            "map-align": "center",
+            "map-label-format": "0,0.[00]",
+            "max-height": 650,
+            "avoid-label-overlap": true,
+            "colorscale": {
+                "map": {},
+                "mode": "continuous",
+                "stops": "equidistant",
+                "interpolation": "equidistant",
+                "colors": [],
+                "palette": 0,
+                "rangeMin": "",
+                "rangeMax": "",
+                "stopCount": 5,
+                "customStops": [],
+                "rangeCenter": "",
+                "categoryOrder": [],
+                "categoryLabels": {}
+            },
+            "tooltip": {
+                "enabled": true,
+                "sticky": true,
+                "title": "%REGION_NAME%",
+                "body": "%REGION_VALUE%"
+            },
+            "legends": {
+                "color": {
+                    "enabled": true,
+                    "reverse": false,
+                    "interactive": false,
+                    "title": "",
+                    "size": 170,
+                    "labels": "ranges",
+                    "orientation": "horizontal",
+                    "position": "above",
+                    "labelMin": "low",
+                    "labelCenter": "medium",
+                    "labelMax": "high",
+                    "offsetX": 0,
+                    "offsetY": 0,
+                    "customLabels": [],
+                    "hideItems": []
+                }
+            },
+            "text-annotations": [],
+            "miniMap": {
+                "enabled": false,
+                "offsetX": 1,
+                "offsetY": 1,
+                "position": "bottom-left",
+                "size": 175
+            }
+        },
+        "dependencies": {
+            "globalize": false,
+            "jquery": false,
+            "dayjs": true,
+            "numeral": true
+        },
+        "height": "fixed",
+        "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 30 30\">\n  <path fill=\"#60ACC6\" d=\"m24.69 15.929-.945.464.237-.697-.54.496-.357-.148-.358.208-.566-.596-.566.03-.327 1.013L21 16.37h-.507l-.238.268-.774-.09-.358-.118.12.715-.194.363-.056.34.537.875-.34.594-.65-.198-.677.282.452 1.159-.509.14-.339.764.316.476.09.715.774.328h.715l.238-.298.149-.566.595.417.12-.149.744-.03.477.209.596-.09.893.686.09.566 1.161.476.358-.357.268.149.208-.209.566-.06.09-.238.506-.09-.268-.297-.328-.358-.03-.417.314-.364V20.57l-.945-.928.945-.464v-.929l-.473-1.393-.472-.928h-.473Z\"/>\n  <path fill=\"#60ACC6\" d=\"m18.073 25.679 1.418-.929.437.107.327-.443-.566-.507-.417-.238-.625.209-.358-.12.12-.357-.18-.328-.357-.417-.09-.715-.315-.476-.593-.791-.34.734-.649.057-.904.395.17.593-1.017.311-.792-.226-.084-.904-.452-.226-1.121-.282-.703.678-.408 1.186h.593l-.185.678h-.55l-.254.876.396.206.226.698-.622.96-.217.834 1.494.294.472-.465 2.837.929.945-.929H17.6l.473-1.392ZM13.399 9.893l-.31-.929.94.02.328-.417.12-.566.446-.03.477.268.476.179.715-.238-.09 1.012-.118.775-.12.357.239.477.804-.03.268-.685.596-.06.328-.685.208.09.477.179.685-.596.149.238.655.298.09.238.238.924-.209.327-.804.239-.06.297.15.358-.388.745.03.506.208.506-.417.328.15.745-.537.208-.357.03.208.506.417.268.15.388-.418.268.12.715-.194.363-.678-.338-.932-.255-.113-.395-.65.395-.678-.79-.932-.255-.989.226-1.13.339-.17.421-1.092.144-.518-.876.288-1.497-.44-.906.44-.115.23-1.268.697-.125.565-.948.141-1.017.311-.356Z\"/>\n  <path fill=\"#92CADC\" d=\"m24.218 15 1.418-2.786-.079-.4-.268-.298-.655-.447-.685.06-.417-.18-.388.18-.387-.388.06-.268-.239-.298-.297-.178-.12-.358-.715-.387-.148-.238-.298-.03-.03.268-.298.298.09.238.238.924-.209.327-.804.239-.06.297.15.358-.388.745.03.506.208.506-.417.328.15.745-.537.208-.357.03.208.506.417.268.15.388-.418.268.358.119.774.09.238-.269H21l.268.328.327-1.013.566-.03.566.596.358-.208.357.148.54-.496.236-.696Zm2.837 7.429-.946-.465-.314.364.03.418.328.357.268.298-.506.09-.09.238-.566.06-.208.208-.268-.15-.358.358-1.162-.476-.089-.566-.893-.686-.596.09-.477-.209-.744.03-.12.149-.595-.417-.15.566-.238.298h-.715l-.774-.328.358.417.178.328-.119.357.357.12.626-.21.417.24.566.506-.327.443 1.454.357h.945l1.891.929.946-.464 2.363-2.322.473-.928h-.945ZM8.145 21.5l-1.89 3.714.945.929 1.89.928.87.171.218-.833.622-.96-.226-.699-.396-.206.254-.876h.55l.185-.678h-.593l.408-1.186.703-.678v-.424h-.703l.185-1.06.518-.692 1.403-1.666-.31-.427-1.093.144-.518-.876.287-1.497-.44-.906-.44.115-1.074.234-.882-.234-.473.452-1.418-.682-.472.464.945 1.393.945.465.473.928-.473.929.473.464-.473 3.25Z\"/>\n  <path fill=\"#92CADC\" d=\"m24.218 15 1.418-2.786-.079-.4-.268-.298-.655-.447-.685.06-.417-.18-.388.18-.387-.388.06-.268-.239-.298-.297-.178-.12-.358-.715-.387-.148-.238-.298-.03-.03.268-.298.298.09.238.238.924-.209.327-.804.239-.06.297.15.358-.388.745.03.506.208.506-.417.328.15.745-.537.208-.357.03.208.506.417.268.15.388-.418.268.358.119.774.09.238-.269H21l.268.328.327-1.013.566-.03.566.596.358-.208.357.148.54-.496.236-.696Z\"/>\n  <path fill=\"#1D81A2\" d=\"M11.685 20.702v.424l1.12.282.453.226.085.904.79.226 1.018-.31-.17-.594.904-.395.65-.057.339-.734.593.79.34-.762.508-.141-.452-1.159.678-.282.65.198.339-.594-.537-.875.056-.34-.678-.338-.932-.255-.113-.395-.65.395-.678-.79-.932-.255-.989.226-1.13.339-.17.421.311.427-1.403 1.666-.518.693-.185 1.059h.703Zm-.231-14.523.473.464-.242.119.584.81.113.928.706.464.942.02.327-.417.12-.566.446-.03.477.268.476.179.715-.238-.09 1.013-.118.774-.12.357.239.477.804-.03.268-.685.596-.06.328-.685.208.09.477.179.685-.596.149.238.655.298.298-.298.03-.268.298.03.149.238.714.387.12.358.297.178.239.298-.06.268.387.388.388-.18.417.18.685-.06.655.447.268.298.08.4.945-.464V8.964l.945-1.393h-2.836l-.473-.928h-1.89l-1.42-1.393h-.945l-1.891-1.393-.946-.464L16.182 2l-1.418.929-.473 1.857-2.837 1.393Z\"/>\n  <path fill=\"#186D89\" d=\"m5.782 12.214.945 1.393 1.418.682.473-.452.882.234 1.074-.234.44-.115.44-.115.23-1.268.698-.125.565-.948.141-1.017.311-.356-.31-.929-.707-.464-.113-.929-.584-.809-.703.345-1.891-.464v-.464l-1.418-.465v.465l.472 1.857.473.928H5.782l-.946-.928-.472.464H2.945L2 8.964l.473.465L2 9.893v.928h.945l2.837 1.393Z\"/>\n</svg>\n",
+        "id": "d3-maps-choropleth",
+        "libraries": [],
+        "namespace": "map",
+        "supportsFitHeight": true,
+        "title": "Choropleth map",
+        "workflow": "d3-maps-choropleth",
+        "__controlsHash": "5a017155",
+        "__visHash": "1ffaf0f3",
+        "__plugin": "vis-d3-maps",
+        "__styleHash": "da2ff5f7",
+        "__title": "Choropleth map",
+        "beta": false,
+        "script": "/home/ubuntu/code/plugins/vis-d3-maps/static/d3-maps-choropleth.js",
+        "less": "/home/ubuntu/code/plugins/vis-d3-maps/less/d3-maps-choropleth.less",
+        "hash": "1ffaf0f3",
+        "dwJsHash": "81808ccd"
+    },
+    "theme": {
+        "id": "datawrapper",
+        "title": "Datawrapper",
+        "_computed": {
+            "locator-maps": {
+                "mapStyles": [{
+                    "id": "dw-light",
+                    "colors": {
+                        "land": "#f2f3f0",
+                        "highlightRegion": {
+                            "fill": "#ffffff",
+                            "stroke": "#888"
+                        },
+                        "areaMarker": {
+                            "fill": "#000",
+                            "stroke": "#888"
+                        },
+                        "lineMarker": {
+                            "stroke": "#888"
+                        }
+                    }
+                }, {
+                    "id": "dw-earth",
+                    "colors": {
+                        "land": "#e8e5d8",
+                        "highlightRegion": {
+                            "fill": "#ffffff",
+                            "stroke": "#888"
+                        },
+                        "areaMarker": {
+                            "fill": "#000",
+                            "stroke": "#888"
+                        },
+                        "lineMarker": {
+                            "stroke": "#888"
+                        }
+                    }
+                }, {
+                    "id": "dw-white",
+                    "colors": {
+                        "land": "#f4f4f4",
+                        "highlightRegion": {
+                            "fill": "#ffffff",
+                            "stroke": "#888"
+                        },
+                        "areaMarker": {
+                            "fill": "#000",
+                            "stroke": "#888"
+                        },
+                        "lineMarker": {
+                            "stroke": "#888"
+                        }
+                    }
+                }, {
+                    "id": "dw-white-invert",
+                    "colors": {
+                        "land": "#ffffff",
+                        "highlightRegion": {
+                            "fill": "#f2f3f0",
+                            "stroke": "#888"
+                        },
+                        "areaMarker": {
+                            "fill": "#000",
+                            "stroke": "#888"
+                        },
+                        "lineMarker": {
+                            "stroke": "#888"
+                        }
+                    }
+                }],
+                "defaultPointMarker": {
+                    "markerColor": "#333333",
+                    "markerTextColor": "#333333",
+                    "text": {
+                        "color": "#333333",
+                        "halo": "#f2f3f0"
+                    }
+                },
+                "darkMode": {
+                    "mapStyles": [],
+                    "defaultMarker": {
+                        "text": {}
+                    }
+                }
+            },
+            "original": {
+                "annotations": {
+                    "line": {
+                        "color": "#888",
+                        "opacity": 0.5
+                    },
+                    "range": {
+                        "color": "#888",
+                        "opacity": 0.1
+                    }
+                }
+            },
+            "bgLight": "#ffffff",
+            "bgDark": "#252525",
+            "origGradients": [
+                ["#f0f9e8", "#b6e3bb", "#75c8c5", "#4ba8c9", "#2989bd", "#0a6aad", "#254b8c"],
+                ["#fcfcbe", "#fdc78d", "#fb8d67", "#e45563", "#ac337b", "#6b1f7b", "#2c1160"],
+                ["#f0f723", "#fbbf2b", "#f38a47", "#d8586a", "#ac2790", "#6703a5", "#0d0787"],
+                ["#fefaca", "#008b15"],
+                ["#feebe2", "#fcc5c0", "#fa9fb5", "#f768a1", "#c51b8a", "#7a0177"],
+                ["#ffffcc", "#c7e9b4", "#7fcdbb", "#41b6c4", "#2c7fb8", "#253494"],
+                ["#8c510a", "#d8b365", "#f6e8c3", "#f5f7ea", "#c7eae5", "#5ab4ac", "#01665e"],
+                ["#c51b7d", "#e9a3c9", "#fde0ef", "#faf6ea", "#e6f5d0", "#a1d76a", "#4d9221"],
+                ["#b2182b", "#ef8a62", "#fddbc7", "#f8f6e9", "#d1e5f0", "#67a9cf", "#2166ac"]
+            ]
+        },
+        "fontsCSS": "@import \"https://static.dwcdn.net/css/roboto.css\";"
+    },
+    "chartAfterHeadHTML": "<meta property=\"og:image\" content=\"https://datawrapper.dwcdn.net/llngz/plain-s.png?v=1\">\n<meta name=\"twitter:card\" content=\"summary_large_image\">\n<meta name=\"twitter:image\" content=\"https://datawrapper.dwcdn.net/llngz/plain-s.png?v=1\">\n\n<link rel=\"alternate\" type=\"application/json+oembed\"\n  href=\"https://api.datawrapper.de/v3/oembed?url=https://datawrapper.dwcdn.net/llngz/1/&format=json\"\n  title=\"oEmbed\" />",
+    "translations": {
+        "accessibility / annotations / multiple": "The chart has %count% annotations.",
+        "accessibility / annotations / single": "The chart has one annotation.",
+        "accessibility / area-chart / multiple": "Area chart with %count% areas",
+        "accessibility / area-chart / single": "Area chart with one area",
+        "accessibility / area-values": "Area showing %count% values for \"%name%\".",
+        "accessibility / axis-labels": "The horizontal axis is labeled as \"%xlabel%\", the vertical axis is labeled as \"%ylabel%\".",
+        "accessibility / clear-search": "Clear search input.",
+        "accessibility / current-rows": "Currently displaying rows $0 to $1",
+        "accessibility / current-rows / search-results": "of $0 results for search term \"$1\".",
+        "accessibility / line-chart / multiple": "Line chart with %count% lines",
+        "accessibility / line-chart / single": "Line chart with a single line",
+        "accessibility / line-values": "Line showing %count% values for \"%name%\".",
+        "accessibility / pagination-button": "Go to page $0 of $1.",
+        "accessibility / rank": "Rank",
+        "accessibility / scatterplot": "Scatterplot with %count% symbols",
+        "accessibility / search-results": "Showing $0 results for search term \"$1\".",
+        "accessibility / sort-column": "by column \"$0\"",
+        "accessibility / sort-direction / ascending": "Sorted ascending",
+        "accessibility / sort-direction / descending": "Sorted descending",
+        "accessibility / sparkline": "Small %chart_type% with $0 values, ranging from $1 to $2.",
+        "accessibility / sparkline / type-columns": "column chart",
+        "accessibility / sparkline / type-line": "line chart",
+        "accessibility / sparkline-no-values": "Small %chart_type% with no values.",
+        "accessibility / stacked-area-chart / multiple": "Stacked area chart with %count% areas",
+        "accessibility / stacked-area-chart / single": "Stacked area chart with one area",
+        "accessibility / sticky-rows": "Including $0 sticky rows.",
+        "accessibility / summary": "Table with $0 columns and $1 rows.",
+        "accessibility / xy-grid / axis-log": "Axis uses logarithmic scale.",
+        "accessibility / xy-grid / axis-x-date": "Horizontal date axis, ranging from %from% to %to%.",
+        "accessibility / xy-grid / axis-x-log": "Horizontal axis, ranging from %from% to %to%.",
+        "accessibility / xy-grid / axis-x-number": "Horizontal axis, ranging from %from% to %to%.",
+        "accessibility / xy-grid / axis-x-text": "Horizontal category axis, ranging from %from% to %to%.",
+        "accessibility / xy-grid / axis-y-date": "Vertical date axis, ranging from %from% to %to%.",
+        "accessibility / xy-grid / axis-y-log": "Vertical axis, ranging from %from% to %to%.",
+        "accessibility / xy-grid / axis-y-number": "Vertical axis, ranging from %from% to %to%.",
+        "accessibility / xy-grid / axis-y-text": "Vertical category axis, ranging from %from% to %to%.",
+        "blocks / attribution": "Created with",
+        "blocks / byline / fork": "Based on",
+        "blocks / byline / chart": "Chart:",
+        "blocks / byline / map": "Map:",
+        "blocks / byline / table": "Table:",
+        "blocks / download-image": "Download image",
+        "blocks / download-pdf": "Download PDF",
+        "blocks / download-svg": "Download SVG",
+        "blocks / edit-in-datawrapper": "Create a copy",
+        "blocks / embed": "Embed",
+        "blocks / embed / caption": "You can copy and paste this <b>code to embed</b> the visualization:",
+        "blocks / get-the-data": "Get the data",
+        "blocks / map-attribution": "Map data",
+        "blocks / source": "Source",
+        "expanded-view-note": "This is the extended area for the inset map on mobile. You can disable this feature.",
+        "fallback-image-note": "(Please use a modern browser to see the interactive version of this visualization)",
+        "insufficient-data-bars": "<b>Not enough data to show a bar chart.</b> You need at least one numeric column in your dataset. Please go back to the <a href=\"/chart/%chartid%/describe\" target=\"_parent\">\"Check & Describe\"</a> step and check your data.",
+        "insufficient-data-columns": "<b>Not enough data to show a column chart.</b> You need at least one numeric column in your dataset. Please go back to the <a href=\"/chart/%chartid%/describe\" target=\"_parent\">\"Check & Describe\"</a> step and check your data.",
+        "insufficient-data-donut": "<b>Not enough data to show a donut chart.</b> You need at least one numeric column in your dataset. Please go back to the <a href=\"/chart/%chartid%/describe\" target=\"_parent\">\"Check & Describe\"</a> step and check your data.",
+        "insufficient-data-dot-plot": "<b>Not enough data to show a dot plot.</b> You need at least one numeric column in your dataset. Please go back to the <a href=\"/chart/%chartid%/describe\" target=\"_parent\">\"Check & Describe\"</a> step and check your data.",
+        "insufficient-data-lines": "<b>Not enough data to show a line or area chart.</b> Please go back to the <a href=\"/chart/%chartid%/describe\" target=\"_parent\">\"Check & Describe\"</a> step and check your data.",
+        "insufficient-data-pie": "<b>Not enough data to show a pie chart.</b> You need at least one numeric column in your dataset. Please go back to the <a href=\"/chart/%chartid%/describe\" target=\"_parent\">\"Check & Describe\"</a> step and check your data.",
+        "insufficient-data-range-arrow": "<b>Not enough data to show a range or arrow plot.</b> You need at least two numeric columns in your dataset. Please go back to the <a href=\"/chart/%chartid%/describe\" target=\"_parent\">\"Check & Describe\"</a> step and check your data.",
+        "no-results-found": "No matching records found",
+        "other": "Other",
+        "pagination": "Page $0 of $1",
+        "show-less": "Show less",
+        "show-more": "Show $0 more",
+        "symbol-labels-less-than-7": "%count% symbols are labelled: %labels%, and \"%last%\".",
+        "symbol-labels-more-than-7": "Some symbols are labelled, including %labels%, and %others% others.",
+        "table-search-placeholder": "Search in table",
+        "total": "Total",
+        "truncated-rows": "Additional $0 rows not shown.",
+        "accessibility / multiple-line-chart / chart-single": "A single line chart.",
+        "accessibility / multiple-line-chart / chart-multiple": "A grid of %count% line charts.",
+        "accessibility / multiple-line-chart / panel-group-multiple": "A group of %count% panels.",
+        "accessibility / multiple-line-chart / panel-group-single": "A group with a single panel.",
+        "accessibility / multiple-line-chart / panel-single": "Chart panel with title \"%title%\" containing one line.",
+        "accessibility / multiple-line-chart / panel-multiple": "Chart panel with title \"%title%\" containing %count% lines.",
+        "accessibility / multiple-line-chart / lines-multiple": "A group of %count% lines.",
+        "accessibility / multiple-line-chart / line": "Line showing %count% values for \"%title%\".",
+        "accessibility / color-legend / less-than": "less than",
+        "accessibility / color-legend / greater-equal-than": "greater than or equal to",
+        "accessibility / color-legend / continuous": "Continuous color legend, ranging from %from% to %to%.",
+        "accessibility / color-legend / continuous-title": "Continuous color legend, titled \"%title%\", ranging from %from% to %to%.",
+        "accessibility / color-legend / stepped": "Color legend with %count% steps, ranging from %from% to %to%.",
+        "accessibility / color-legend / stepped-title": "Color legend with %count% steps, titled \"%title%\", ranging from %from% to %to%.",
+        "accessibility / color-legend / category-single-title": "Category legend titled \"%title%\" with 1 item, %item%.",
+        "accessibility / color-legend / category-single": "Category legend with 1 item, %item%.",
+        "accessibility / color-legend / category-few-title": "Category legend with %count% items, titled \"%title%\". %items_description%",
+        "accessibility / color-legend / category-few": "Category legend with %count% items. %items_description%",
+        "accessibility / color-legend / category-many-title": "Category legend with %count% items, titled \"%title%\". %items_description%",
+        "accessibility / color-legend / category-many": "Category legend with %count% items. %items_description%",
+        "accessibility / color-legend / category-items-few": "The items are %items%.",
+        "accessibility / color-legend / category-items-many": "The first 3 items are %items%. The last one is %last%.",
+        "accessibility / multiple-line-chart / panel-single-annotation-single": "Chart panel with title \"%title%\" containing one line and one annotation.",
+        "accessibility / multiple-line-chart / panel-multiple-annotation-single": "Chart panel with title \"%title%\" containing %count% lines and one annotation.",
+        "accessibility / multiple-line-chart / panel-multiple-annotation-multiple": "Chart panel with title \"%title%\" containing %count% lines and %annotations% annotations.",
+        "accessibility / multiple-line-chart / panel-single-annotation-multiple": "Chart panel with title \"%title%\" containing one line and %annotations% annotations.",
+        "accessibility / multiple-line-chart / annotation-single": "The panel has one annotation.",
+        "accessibility / multiple-line-chart / annotation-multiple": "The panel has %count% annotations."
+    },
+    "assets": {
+        "dataset.csv": {
+            "load": true,
+            "url": "dataset.csv"
+        },
+        "world-2019.json": {
+            "load": true,
+            "url": "../../lib/basemaps/world-2019.e17305c2.json"
+        }
+    },
+    "externalDataUrl": "static.dwcdn.net/data",
+    "blocks": [],
+    "nextPublicUrl": "https://datawrapper.dwcdn.net/llngz/1/",
+    "isIframe": true,
+    "isPreview": false,
+    "isExport": false,
+    "locales": {
+        "dayjs": {
+            "base": "\"use strict\";\n(function () {\n    return {\n        name: 'en-gb',\n        weekdays: 'Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday'.split('_'),\n        weekdaysShort: 'Sun_Mon_Tue_Wed_Thu_Fri_Sat'.split('_'),\n        weekdaysMin: 'Su_Mo_Tu_We_Th_Fr_Sa'.split('_'),\n        months: 'January_February_March_April_May_June_July_August_September_October_November_December'.split('_'),\n        monthsShort: 'Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec'.split('_'),\n        weekStart: 1,\n        yearStart: 4,\n        relativeTime: {\n            future: 'in %s',\n            past: '%s ago',\n            s: 'a few seconds',\n            m: 'a minute',\n            mm: '%d minutes',\n            h: 'an hour',\n            hh: '%d hours',\n            d: 'a day',\n            dd: '%d days',\n            M: 'a month',\n            MM: '%d months',\n            y: 'a year',\n            yy: '%d years'\n        },\n        formats: {\n            LT: 'HH:mm',\n            LTS: 'HH:mm:ss',\n            L: 'DD/MM/YYYY',\n            LL: 'D MMMM YYYY',\n            LLL: 'D MMMM YYYY HH:mm',\n            LLLL: 'dddd, D MMMM YYYY HH:mm'\n        },\n        ordinal: function (n) {\n            var s = ['th', 'st', 'nd', 'rd'];\n            var v = n % 100;\n            return '[' + n + (s[(v - 20) % 10] || s[v] || s[0]) + ']';\n        }\n    };\n})();\n",
+            "custom": {}
+        },
+        "numeral": {
+            "base": "\"use strict\";\n(function () {\n    // numeral.js locale configuration\n    // locale : english united kingdom (uk)\n    // author : Dan Ristic : https://github.com/dristic\n    return {\n        delimiters: {\n            thousands: ',',\n            decimal: '.'\n        },\n        abbreviations: {\n            thousand: 'k',\n            million: 'm',\n            billion: 'bn',\n            trillion: 't'\n        },\n        ordinal: function (number) {\n            var b = number % 10;\n            return ~~((number % 100) / 10) === 1\n                ? 'th'\n                : b === 1\n                    ? 'st'\n                    : b === 2\n                        ? 'nd'\n                        : b === 3\n                            ? 'rd'\n                            : 'th';\n        },\n        currency: {\n            symbol: '£'\n        }\n    };\n})();\n",
+            "custom": {}
+        }
+    },
+    "webComponentJsHash": "1854c125",
+    "polyfillUri": "../../lib/vendor",
+    "teamPublicSettings": {},
+    "requiresAttribution": true,
+    "ptStylesheet": "//pt.dwcdn.net/llngz.css",
+    "allowPrintExport": false,
+    "themeDataDark": {
+        "vis": {
+            "base": {
+                "grid": {
+                    "general": {
+                        "baseLine": {
+                            "aboveChart": true
+                        },
+                        "tickLines": {
+                            "aboveChart": true
+                        },
+                        "tickLabels": {
+                            "units": "first",
+                            "aboveChart": true
+                        }
+                    }
+                },
+                "format": {
+                    "minusCharacter": "−",
+                    "plusMinusCharacter": "±"
+                },
+                "annotations": {
+                    "line": {
+                        "color": "#878787",
+                        "opacity": 0.52
+                    },
+                    "range": {
+                        "color": "#878787",
+                        "opacity": 0.13
+                    }
+                },
+                "panels": {
+                    "title": {
+                        "fontSize": 13
+                    }
+                }
+            },
+            "d3-maps-core": {
+                "places": {
+                    "capital": {
+                        "label": {
+                            "fontStyle": "normal",
+                            "fontWeight": {
+                                "normal": "#ffdcff"
+                            }
+                        }
+                    },
+                    "general": {
+                        "label": {
+                            "color": {
+                                "normal": "#000000",
+                                "inverted": "#e5e5e5"
+                            },
+                            "buffer": {
+                                "color": {
+                                    "normal": "#bfbfbf",
+                                    "inverted": "#252525"
+                                }
+                            },
+                            "fontStyle": "normal",
+                            "fontWeight": {
+                                "normal": 500,
+                                "inverted": 400
+                            }
+                        },
+                        "symbol": {
+                            "fill": {
+                                "normal": "#000000",
+                                "inverted": "#e5e5e5"
+                            },
+                            "stroke": {
+                                "normal": "#bfbfbf",
+                                "inverted": "#252525"
+                            }
+                        }
+                    }
+                }
+            },
+            "d3-pies": {
+                "labels": {
+                    "group": {
+                        "name": {
+                            "fontSize": 14
+                        }
+                    },
+                    "center": {
+                        "fontSize": 14
+                    }
+                }
+            },
+            "multiple-lines": {
+                "panels": {
+                    "title": {}
+                }
+            },
+            "d3-maps-symbols": {
+                "regionFill": "#3c3c3c"
+            }
+        },
+        "colors": {
+            "picker": {
+                "controls": {
+                    "hue": true,
+                    "lightness": true,
+                    "saturation": true,
+                    "hexEditable": true
+                },
+                "rowCount": 6,
+                "showDuplicates": false
+            },
+            "neutral": "#535353",
+            "palette": ["#2584af", "#4aa1c3", "#84c2df", "#19673c", "#1e7c64", "#27a186", "#595959", "#ff8068", "#b15112", "#6b470f", "#4e400f"],
+            "negative": "#ff5f4a",
+            "positive": "#3d6e8b",
+            "gradients": [
+                ["#254b8c", "#0a6aad", "#2989bd", "#4ba8c9", "#75c8c5", "#b6e3bb", "#f0f9e8"],
+                ["#2c1160", "#6b1f7b", "#ac337b", "#e45563", "#fb8d67", "#fcfcbe", "#fdc78d"],
+                ["#0d0787", "#6703a5", "#ac2790", "#d8586a", "#f38a47", "#fbbf2b", "#f0f723"],
+                ["#007001", "#f6f4a6"],
+                ["#42342d", "#683c39", "#8f3e55", "#c73a78", "#ff6bca", "#ffcbff"],
+                ["#253494", "#2c7fb8", "#41b6c4", "#7fcdbb", "#c7e9b4", "#ffffcc"],
+                ["#eba25d", "#7a5e12", "#483f21", "#35372d", "#2b4945", "#1f7b75", "#75c6bc"],
+                ["#ff6cbd", "#8c4d71", "#513a46", "#39362d", "#323f22", "#2b6311", "#599e2d"],
+                ["#ff9791", "#b15531", "#583f2f", "#37362c", "#354750", "#31799d", "#7badfa"]
+            ],
+            "background": "#252525",
+            "categories": [
+                ["#5d4b0f", "#2598ae", "#1c6f66", "#5d6412", "#ff7e75", "#be5713", "#acc5ff", "#216596", "#13512a", "#244149"],
+                ["#24702d", "#6b5d80", "#764914", "#34370f", "#7aa5ee", "#ff3a96", "#e57a37", "#aaaaaa"],
+                ["#834743", "#3f576a", "#314b2c", "#5a4a60", "#5b4216", "#32350f", "#534933", "#573b4a", "#393939"],
+                ["#335b6d", "#59a2e1", "#2e5a0f", "#289824", "#9f494b", "#ff5f4a", "#774a0f", "#c04d12", "#6d5878", "#e1abff", "#34370f", "#e58551"]
+            ],
+            "bgBlendRatios": {
+                "value": 0
+            },
+            "chartContentBaseColor": "#ffffff"
+        },
+        "metadata": {
+            "publish": {
+                "blocks": {
+                    "logo": {
+                        "enabled": false
+                    },
+                    "embed": false,
+                    "download-pdf": false,
+                    "download-svg": false,
+                    "get-the-data": true,
+                    "download-image": false
+                }
+            }
+        },
+        "overrides": [{
+            "type": "darkMode",
+            "settings": {
+                "colors.gradients": [
+                    ["#254b8c", "#0a6aad", "#2989bd", "#4ba8c9", "#75c8c5", "#b6e3bb", "#f0f9e8"],
+                    ["#2c1160", "#6b1f7b", "#ac337b", "#e45563", "#fb8d67", "#fcfcbe", "#fdc78d"],
+                    ["#0d0787", "#6703a5", "#ac2790", "#d8586a", "#f38a47", "#fbbf2b", "#f0f723"],
+                    ["#007001", "#f6f4a6"],
+                    ["#42342d", "#683c39", "#8f3e55", "#c73a78", "#ff6bca", "#ffcbff"],
+                    ["#253494", "#2c7fb8", "#41b6c4", "#7fcdbb", "#c7e9b4", "#ffffcc"]
+                ],
+                "colors.background": "#252525",
+                "vis.d3-maps-core.places.general.label.color.normal": "#000000",
+                "vis.d3-maps-core.places.general.symbol.fill.normal": "#000000",
+                "vis.d3-maps-core.places.general.label.color.inverted": "#e5e5e5",
+                "vis.d3-maps-core.places.general.symbol.fill.inverted": "#e5e5e5",
+                "vis.d3-maps-core.places.general.symbol.stroke.normal": "#bfbfbf",
+                "vis.d3-maps-core.places.general.label.buffer.color.normal": "#bfbfbf"
+            }
+        }, {
+            "settings": {
+                "vis.base.grid.vertical.tickLabels.hideZero": true
+            },
+            "condition": ["in", ["get", "type"],
+                ["column-chart", "grouped-column-chart", "stacked-column-chart"]
+            ]
+        }, {
+            "settings": {
+                "vis.base.grid.horizontal.tickLabels.units": "last"
+            },
+            "condition": ["==", ["get", "type"], "d3-scatter-plot"]
+        }, {
+            "settings": {
+                "vis.base.grid.horizontal.tickLabels.units": "all"
+            },
+            "condition": ["in", ["get", "type"],
+                ["d3-bars", "d3-arrow-plot", "d3-bars-bullet", "d3-bars-grouped", "d3-bars-stacked", "d3-dot-plot", "d3-range-plot"]
+            ]
+        }, {
+            "settings": {
+                "vis.base.grid.horizontal.gridLines.aboveChart": true
+            },
+            "condition": ["==", ["get", "type"], "d3-bars-stacked"]
+        }, {
+            "settings": {
+                "vis.base.grid.horizontal.baseLine.aboveChart": false,
+                "vis.base.grid.horizontal.baseLine.blendBaseColorWithBg": 0.6
+            },
+            "condition": ["in", ["get", "type"],
+                ["d3-dot-plot", "d3-range-plot", "d3-arrow-plot"]
+            ]
+        }, {
+            "type": "darkMode",
+            "settings": {
+                "vis.base.grid.horizontal.baseLine.blendBaseColorWithBg": 0.85
+            },
+            "condition": ["in", ["get", "type"],
+                ["d3-dot-plot", "d3-range-plot", "d3-arrow-plot"]
+            ]
+        }, {
+            "settings": {
+                "vis.base.grid.vertical.gridLines.major.strokeDasharray": "dotted"
+            },
+            "condition": ["in", ["get", "type"],
+                ["d3-range-plot", "d3-arrow-plot"]
+            ]
+        }, {
+            "type": "darkMode",
+            "settings": {
+                "blocks.shareTools.styles.buttons.base.color": "rgba(255,255,255,0.4)",
+                "blocks.shareTools.styles.buttons.twitter.hover.color": "#ffffff",
+                "blocks.shareTools.styles.buttons.facebook.hover.color": "#ffffff",
+                "blocks.shareTools.styles.buttons.linkedin.hover.color": "#ffffff"
+            }
+        }, {
+            "type": "darkMode",
+            "settings": {
+                "vis.d3-maps-core.places.general.label.fontWeight.normal": 500,
+                "vis.d3-maps-core.places.general.label.fontWeight.inverted": 400
+            }
+        }, {
+            "settings": {
+                "blocks.bodyCenter.styles.gap": 20,
+                "vis.base.annotations.text.size": 12
+            },
+            "condition": ["==", ["get", "type"], "multiple-lines"]
+        }],
+        "blocks": {
+            "body": {
+                "styles": {
+                    "gap": 20,
+                    "links": {
+                        "typography": {
+                            "color": "#4ba9f0",
+                            "underlined": false
+                        }
+                    },
+                    "typography": {
+                        "color": "#ffffff",
+                        "fontSize": 12,
+                        "typeface": "Roboto,sans-serif"
+                    }
+                }
+            },
+            "header": {
+                "styles": {
+                    "gap": 10
+                }
+            },
+            "bodyTop": {
+                "styles": {
+                    "gap": 10,
+                    "layout": "flex-row"
+                }
+            },
+            "filterUI": {
+                "styles": {
+                    "tabs": {
+                        "color": "#aaaaaa",
+                        "hover": {
+                            "color": "#ffffff"
+                        },
+                        "active": {
+                            "color": "#ffffff",
+                            "border": {
+                                "bottom": "2px solid #bebebe"
+                            }
+                        },
+                        "border": {
+                            "bottom": "1px solid #535353"
+                        }
+                    },
+                    "point": {
+                        "line": {
+                            "color": "#535353"
+                        },
+                        "buttons": {
+                            "hover": {
+                                "background": "#3e3e3e"
+                            },
+                            "active": {
+                                "border": "1px solid #878787",
+                                "background": "#535353"
+                            },
+                            "border": "1px solid #535353"
+                        }
+                    },
+                    "select": {
+                        "border": "1px solid #535353",
+                        "textColor": "#ffffff"
+                    }
+                }
+            },
+            "bodyCenter": {
+                "styles": {
+                    "gap": 10,
+                    "flexGrow": 1,
+                    "maxWidth": "100%",
+                    "minWidth": "0px"
+                }
+            },
+            "shareTools": {
+                "styles": {
+                    "gap": 8,
+                    "buttons": {
+                        "base": {
+                            "color": "rgba(255,255,255,0.4)",
+                            "padding": "0px"
+                        },
+                        "twitter": {
+                            "hover": {
+                                "color": "#ffffff"
+                            }
+                        },
+                        "facebook": {
+                            "hover": {
+                                "color": "#ffffff"
+                            }
+                        },
+                        "linkedin": {
+                            "hover": {
+                                "color": "#ffffff"
+                            }
+                        }
+                    }
+                }
+            },
+            "footer": {
+                "styles": {
+                    "gap": 5
+                }
+            },
+            "footerMain": {
+                "styles": {
+                    "layout": "inline",
+                    "separator": {
+                        "margin": "0.249em"
+                    },
+                    "typography": {
+                        "color": "#9d9d9d",
+                        "fontSize": 11
+                    }
+                }
+            },
+            "notes": {
+                "styles": {
+                    "typography": {
+                        "cursive": true,
+                        "color": "#bcbcbc"
+                    }
+                }
+            },
+            "headline": {
+                "styles": {
+                    "typography": {
+                        "fontSize": 22,
+                        "fontWeight": 700,
+                        "color": "#ffffff"
+                    }
+                }
+            },
+            "description": {
+                "styles": {
+                    "typography": {
+                        "lineHeight": 17,
+                        "fontSize": 14
+                    }
+                }
+            }
+        },
+        "version": 2,
+        "regions": {
+            "footer": {
+                "type": "container",
+                "children": [{
+                    "type": "notes"
+                }, {
+                    "id": "footerMain",
+                    "type": "container"
+                }]
+            }
+        },
+        "defaultFooterRegion": "footerMain",
+        "export": {
+            "pdf": {
+                "fonts": {
+                    "Roboto Bold": "https://static.dwcdn.net/css/fonts/roboto/ttf/Roboto-Bold.ttf",
+                    "Roboto Light": "https://static.dwcdn.net/css/fonts/roboto/ttf/Roboto-Light.ttf",
+                    "Roboto Medium": "https://static.dwcdn.net/css/fonts/roboto/ttf/Roboto-Medium.ttf",
+                    "Roboto Regular": "https://static.dwcdn.net/css/fonts/roboto/ttf/Roboto-Regular.ttf",
+                    "Roboto Bold Italic": "https://static.dwcdn.net/css/fonts/roboto/ttf/Roboto-BoldItalic.ttf",
+                    "Roboto Light Italic": "https://static.dwcdn.net/css/fonts/roboto/ttf/Roboto-LightItalic.ttf",
+                    "Roboto Medium Italic": "https://static.dwcdn.net/css/fonts/roboto/ttf/Roboto-MediumItalic.ttf",
+                    "Roboto Regular Italic": "https://static.dwcdn.net/css/fonts/roboto/ttf/Roboto-Italic.ttf"
+                },
+                "cmykColors": [],
+                "defaultFont": "Roboto Regular"
+            }
+        },
+        "fontFamilies": {
+            "Roboto": [{
+                "name": "Roboto Regular",
+                "style": "normal",
+                "weight": 400
+            }, {
+                "name": "Roboto Light",
+                "style": "normal",
+                "weight": 300
+            }]
+        }
+    },
+    "themeDataLight": {
+        "vis": {
+            "base": {
+                "grid": {
+                    "general": {
+                        "baseLine": {
+                            "aboveChart": true
+                        },
+                        "tickLines": {
+                            "aboveChart": true
+                        },
+                        "tickLabels": {
+                            "units": "first",
+                            "aboveChart": true
+                        }
+                    }
+                },
+                "format": {
+                    "minusCharacter": "−",
+                    "plusMinusCharacter": "±"
+                },
+                "annotations": {
+                    "line": {
+                        "color": "#888",
+                        "opacity": 0.5
+                    },
+                    "range": {
+                        "color": "#888",
+                        "opacity": 0.1
+                    }
+                },
+                "panels": {
+                    "title": {
+                        "fontSize": 13
+                    }
+                }
+            },
+            "d3-maps-core": {
+                "places": {
+                    "capital": {
+                        "label": {
+                            "fontStyle": "normal",
+                            "fontWeight": {
+                                "normal": 700
+                            }
+                        }
+                    },
+                    "general": {
+                        "label": {
+                            "color": {
+                                "normal": "#ffffff",
+                                "inverted": "#525252"
+                            },
+                            "buffer": {
+                                "color": {
+                                    "normal": "#323232",
+                                    "inverted": "#ffffff"
+                                }
+                            },
+                            "fontStyle": "normal",
+                            "fontWeight": {
+                                "normal": 400
+                            }
+                        },
+                        "symbol": {
+                            "fill": {
+                                "normal": "#ffffff",
+                                "inverted": "#525252"
+                            },
+                            "stroke": {
+                                "normal": "#323232",
+                                "inverted": "#ffffff"
+                            }
+                        }
+                    }
+                }
+            },
+            "d3-pies": {
+                "labels": {
+                    "group": {
+                        "name": {
+                            "fontSize": 14
+                        }
+                    },
+                    "center": {
+                        "fontSize": 14
+                    }
+                }
+            },
+            "multiple-lines": {
+                "panels": {
+                    "title": {}
+                }
+            },
+            "d3-maps-symbols": {
+                "regionFill": "#ededed"
+            }
+        },
+        "colors": {
+            "picker": {
+                "controls": {
+                    "hue": true,
+                    "lightness": true,
+                    "saturation": true,
+                    "hexEditable": true
+                },
+                "rowCount": 6,
+                "showDuplicates": false
+            },
+            "neutral": "#CCCCCC",
+            "palette": ["#18a1cd", "#1d81a2", "#15607a", "#00dca6", "#09bb9f", "#009076", "#c4c4c4", "#c71e1d", "#fa8c00", "#ffca76", "#ffe59c"],
+            "negative": "#E31A1C",
+            "positive": "#85B4D4",
+            "gradients": [
+                ["#f0f9e8", "#b6e3bb", "#75c8c5", "#4ba8c9", "#2989bd", "#0a6aad", "#254b8c"],
+                ["#fcfcbe", "#fdc78d", "#fb8d67", "#e45563", "#ac337b", "#6b1f7b", "#2c1160"],
+                ["#f0f723", "#fbbf2b", "#f38a47", "#d8586a", "#ac2790", "#6703a5", "#0d0787"],
+                ["#fefaca", "#008b15"],
+                ["#feebe2", "#fcc5c0", "#fa9fb5", "#f768a1", "#c51b8a", "#7a0177"],
+                ["#ffffcc", "#c7e9b4", "#7fcdbb", "#41b6c4", "#2c7fb8", "#253494"],
+                ["#8c510a", "#d8b365", "#f6e8c3", "#f5f7ea", "#c7eae5", "#5ab4ac", "#01665e"],
+                ["#c51b7d", "#e9a3c9", "#fde0ef", "#faf6ea", "#e6f5d0", "#a1d76a", "#4d9221"],
+                ["#b2182b", "#ef8a62", "#fddbc7", "#f8f6e9", "#d1e5f0", "#67a9cf", "#2166ac"]
+            ],
+            "background": "#ffffff",
+            "categories": [
+                ["#F6D500", "#0B91A7", "#00CABD", "#C2C100", "#BA403E", "#EF7F36", "#2D4F84", "#85BDF4", "#9EF1BF", "#D3F3FD"],
+                ["#7fc97f", "#beaed4", "#fdc086", "#ffff99", "#386cb0", "#f0027f", "#bf5b17", "#666666"],
+                ["#fbb4ae", "#b3cde3", "#ccebc5", "#decbe4", "#fed9a6", "#ffffcc", "#e5d8bd", "#fddaec", "#f2f2f2"],
+                ["#a6cee3", "#1f78b4", "#b2df8a", "#33a02c", "#fb9a99", "#e31a1c", "#fdbf6f", "#ff7f00", "#cab2d6", "#6a3d9a", "#ffff99", "#b15928"]
+            ],
+            "bgBlendRatios": {
+                "value": 0
+            },
+            "chartContentBaseColor": "#181818"
+        },
+        "metadata": {
+            "publish": {
+                "blocks": {
+                    "logo": {
+                        "enabled": false
+                    },
+                    "embed": false,
+                    "download-pdf": false,
+                    "download-svg": false,
+                    "get-the-data": true,
+                    "download-image": false
+                }
+            }
+        },
+        "overrides": [{
+            "type": "darkMode",
+            "settings": {
+                "colors.gradients": [
+                    ["#254b8c", "#0a6aad", "#2989bd", "#4ba8c9", "#75c8c5", "#b6e3bb", "#f0f9e8"],
+                    ["#2c1160", "#6b1f7b", "#ac337b", "#e45563", "#fb8d67", "#fcfcbe", "#fdc78d"],
+                    ["#0d0787", "#6703a5", "#ac2790", "#d8586a", "#f38a47", "#fbbf2b", "#f0f723"],
+                    ["#007001", "#f6f4a6"],
+                    ["#42342d", "#683c39", "#8f3e55", "#c73a78", "#ff6bca", "#ffcbff"],
+                    ["#253494", "#2c7fb8", "#41b6c4", "#7fcdbb", "#c7e9b4", "#ffffcc"]
+                ],
+                "colors.background": "#252525",
+                "vis.d3-maps-core.places.general.label.color.normal": "#000000",
+                "vis.d3-maps-core.places.general.symbol.fill.normal": "#000000",
+                "vis.d3-maps-core.places.general.label.color.inverted": "#e5e5e5",
+                "vis.d3-maps-core.places.general.symbol.fill.inverted": "#e5e5e5",
+                "vis.d3-maps-core.places.general.symbol.stroke.normal": "#bfbfbf",
+                "vis.d3-maps-core.places.general.label.buffer.color.normal": "#bfbfbf"
+            }
+        }, {
+            "settings": {
+                "vis.base.grid.vertical.tickLabels.hideZero": true
+            },
+            "condition": ["in", ["get", "type"],
+                ["column-chart", "grouped-column-chart", "stacked-column-chart"]
+            ]
+        }, {
+            "settings": {
+                "vis.base.grid.horizontal.tickLabels.units": "last"
+            },
+            "condition": ["==", ["get", "type"], "d3-scatter-plot"]
+        }, {
+            "settings": {
+                "vis.base.grid.horizontal.tickLabels.units": "all"
+            },
+            "condition": ["in", ["get", "type"],
+                ["d3-bars", "d3-arrow-plot", "d3-bars-bullet", "d3-bars-grouped", "d3-bars-stacked", "d3-dot-plot", "d3-range-plot"]
+            ]
+        }, {
+            "settings": {
+                "vis.base.grid.horizontal.gridLines.aboveChart": true
+            },
+            "condition": ["==", ["get", "type"], "d3-bars-stacked"]
+        }, {
+            "settings": {
+                "vis.base.grid.horizontal.baseLine.aboveChart": false,
+                "vis.base.grid.horizontal.baseLine.blendBaseColorWithBg": 0.6
+            },
+            "condition": ["in", ["get", "type"],
+                ["d3-dot-plot", "d3-range-plot", "d3-arrow-plot"]
+            ]
+        }, {
+            "type": "darkMode",
+            "settings": {
+                "vis.base.grid.horizontal.baseLine.blendBaseColorWithBg": 0.85
+            },
+            "condition": ["in", ["get", "type"],
+                ["d3-dot-plot", "d3-range-plot", "d3-arrow-plot"]
+            ]
+        }, {
+            "settings": {
+                "vis.base.grid.vertical.gridLines.major.strokeDasharray": "dotted"
+            },
+            "condition": ["in", ["get", "type"],
+                ["d3-range-plot", "d3-arrow-plot"]
+            ]
+        }, {
+            "type": "darkMode",
+            "settings": {
+                "blocks.shareTools.styles.buttons.base.color": "rgba(255,255,255,0.4)",
+                "blocks.shareTools.styles.buttons.twitter.hover.color": "#ffffff",
+                "blocks.shareTools.styles.buttons.facebook.hover.color": "#ffffff",
+                "blocks.shareTools.styles.buttons.linkedin.hover.color": "#ffffff"
+            }
+        }, {
+            "type": "darkMode",
+            "settings": {
+                "vis.d3-maps-core.places.general.label.fontWeight.normal": 500,
+                "vis.d3-maps-core.places.general.label.fontWeight.inverted": 400
+            }
+        }, {
+            "settings": {
+                "blocks.bodyCenter.styles.gap": 20,
+                "vis.base.annotations.text.size": 12
+            },
+            "condition": ["==", ["get", "type"], "multiple-lines"]
+        }],
+        "blocks": {
+            "body": {
+                "styles": {
+                    "gap": 20,
+                    "links": {
+                        "typography": {
+                            "color": "#0088CC",
+                            "underlined": false
+                        }
+                    },
+                    "typography": {
+                        "color": "#181818",
+                        "fontSize": 12,
+                        "typeface": "Roboto,sans-serif"
+                    }
+                }
+            },
+            "header": {
+                "styles": {
+                    "gap": 10
+                }
+            },
+            "bodyTop": {
+                "styles": {
+                    "gap": 10,
+                    "layout": "flex-row"
+                }
+            },
+            "filterUI": {
+                "styles": {
+                    "tabs": {
+                        "color": "#666",
+                        "hover": {
+                            "color": "#222"
+                        },
+                        "active": {
+                            "color": "#000000",
+                            "border": {
+                                "bottom": "2px solid #555555"
+                            }
+                        },
+                        "border": {
+                            "bottom": "1px solid #cccccc"
+                        }
+                    },
+                    "point": {
+                        "line": {
+                            "color": "#ccc"
+                        },
+                        "buttons": {
+                            "hover": {
+                                "background": "#ebebeb"
+                            },
+                            "active": {
+                                "border": "1px solid #888",
+                                "background": "#ccc"
+                            },
+                            "border": "1px solid #ccc"
+                        }
+                    },
+                    "select": {
+                        "border": "1px solid #cccccc",
+                        "textColor": "#000"
+                    }
+                }
+            },
+            "bodyCenter": {
+                "styles": {
+                    "gap": 10,
+                    "flexGrow": 1,
+                    "maxWidth": "100%",
+                    "minWidth": "0px"
+                }
+            },
+            "shareTools": {
+                "styles": {
+                    "gap": 8,
+                    "buttons": {
+                        "base": {
+                            "color": "#a7a7a7",
+                            "padding": "0px"
+                        },
+                        "twitter": {
+                            "hover": {
+                                "color": "#000000"
+                            }
+                        },
+                        "facebook": {
+                            "hover": {
+                                "color": "#1877F2"
+                            }
+                        },
+                        "linkedin": {
+                            "hover": {
+                                "color": "#2867B2"
+                            }
+                        }
+                    }
+                }
+            },
+            "footer": {
+                "styles": {
+                    "gap": 5
+                }
+            },
+            "footerMain": {
+                "styles": {
+                    "layout": "inline",
+                    "separator": {
+                        "margin": "0.249em"
+                    },
+                    "typography": {
+                        "color": "#888",
+                        "fontSize": 11
+                    }
+                }
+            },
+            "notes": {
+                "styles": {
+                    "typography": {
+                        "cursive": true,
+                        "color": "#656565"
+                    }
+                }
+            },
+            "headline": {
+                "styles": {
+                    "typography": {
+                        "fontSize": 22,
+                        "fontWeight": 700,
+                        "color": "#000000"
+                    }
+                }
+            },
+            "description": {
+                "styles": {
+                    "typography": {
+                        "lineHeight": 17,
+                        "fontSize": 14
+                    }
+                }
+            }
+        },
+        "version": 2,
+        "regions": {
+            "footer": {
+                "type": "container",
+                "children": [{
+                    "type": "notes"
+                }, {
+                    "id": "footerMain",
+                    "type": "container"
+                }]
+            }
+        },
+        "defaultFooterRegion": "footerMain",
+        "export": {
+            "pdf": {
+                "fonts": {
+                    "Roboto Bold": "https://static.dwcdn.net/css/fonts/roboto/ttf/Roboto-Bold.ttf",
+                    "Roboto Light": "https://static.dwcdn.net/css/fonts/roboto/ttf/Roboto-Light.ttf",
+                    "Roboto Medium": "https://static.dwcdn.net/css/fonts/roboto/ttf/Roboto-Medium.ttf",
+                    "Roboto Regular": "https://static.dwcdn.net/css/fonts/roboto/ttf/Roboto-Regular.ttf",
+                    "Roboto Bold Italic": "https://static.dwcdn.net/css/fonts/roboto/ttf/Roboto-BoldItalic.ttf",
+                    "Roboto Light Italic": "https://static.dwcdn.net/css/fonts/roboto/ttf/Roboto-LightItalic.ttf",
+                    "Roboto Medium Italic": "https://static.dwcdn.net/css/fonts/roboto/ttf/Roboto-MediumItalic.ttf",
+                    "Roboto Regular Italic": "https://static.dwcdn.net/css/fonts/roboto/ttf/Roboto-Italic.ttf"
+                },
+                "cmykColors": [],
+                "defaultFont": "Roboto Regular"
+            }
+        },
+        "fontFamilies": {
+            "Roboto": [{
+                "name": "Roboto Regular",
+                "style": "normal",
+                "weight": 400
+            }, {
+                "name": "Roboto Light",
+                "style": "normal",
+                "weight": 300
+            }]
+        }
+    },
+    "textDirection": "ltr",
+    "published": true,
+    "chartAutoDark": false,
+    "dependencies": ["../../lib/vendor/dw-2.0.min.970dcca5.js", "../../lib/vendor/web-component.0e3b1999.js", "../../lib/vis/d3-maps-choropleth.babf5ef1.js"],
+    "styles": ".chart.vis-d3-maps-choropleth{overflow:hidden;position:relative}.chart.vis-d3-maps-choropleth .label-buffer.svelte-u5v6p6,.chart.vis-d3-maps-choropleth .label.svelte-u5v6p6{text-anchor:end}.chart.vis-d3-maps-choropleth .rtl .label-buffer.svelte-u5v6p6,.chart.vis-d3-maps-choropleth .rtl .label.svelte-u5v6p6{text-anchor:start}.chart.vis-d3-maps-choropleth .inset-map-container svg{overflow:visible}.chart.vis-d3-maps-choropleth .inset-map-container path.view{fill:none}.chart.vis-d3-maps-choropleth .inset-map-container circle.view{stroke:none}.chart.vis-d3-maps-choropleth .inset-map-container .graticule{fill:none}.chart.vis-d3-maps-choropleth .inset-map-container div.label{position:absolute;text-align:center}.chart.vis-d3-maps-choropleth .inset-map-container div.label.outline{opacity:.5}.chart.vis-d3-maps-choropleth .inset-map-container div.label:not(.outline) span{text-shadow:none}.chart.vis-d3-maps-choropleth .legend-container{display:flex;justify-content:start;z-index:1}.chart.vis-d3-maps-choropleth .legend-container.align-center{justify-content:center}.chart.vis-d3-maps-choropleth .legend-container[data-position*=inside]{justify-content:start}.chart.vis-d3-maps-choropleth .legend-container.align-center .legend-title{text-align:center}.chart.vis-d3-maps-choropleth .legend-container.align-center .category-legend.horizontal{display:grid;justify-items:center}.chart.vis-d3-maps-choropleth .legend-container.align-center .size-legend[data-title-position=above],.chart.vis-d3-maps-choropleth .legend-container.align-center .size-legend[data-title-position=below]{align-items:center}.chart.vis-d3-maps-choropleth .legend-combined{gap:10px}@media (max-width:449px){.chart.vis-d3-maps-choropleth .legend-container{display:block}}.chart.vis-d3-maps-choropleth .map-key.mobile{background:#0000;position:static!important}.chart.vis-d3-maps-choropleth .map-key.mobile .legend-categories{display:inline-block!important}.chart.vis-d3-maps-choropleth .map-key.mobile .category-legend.horizontal{height:auto!important;width:auto!important}.chart.vis-d3-maps-choropleth .map-key.mobile .title br{display:none}.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;padding:0;position:static!important}.chart.vis-d3-maps-choropleth .map-key.map-key-mb .legend-categories,.chart.vis-d3-maps-choropleth .map-key.map-key-mt .legend-categories,.chart.vis-d3-maps-choropleth .map-key.mobile .legend-categories{display:inline-block!important}.chart.vis-d3-maps-choropleth .map-key.map-key-mb .category-legend.horizontal,.chart.vis-d3-maps-choropleth .map-key.map-key-mt .category-legend.horizontal,.chart.vis-d3-maps-choropleth .map-key.mobile .category-legend.horizontal{height:auto!important;width:auto!important}.chart.vis-d3-maps-choropleth .map-key svg{display:block}.chart.vis-d3-maps-choropleth .category-legend{border-radius:4px}.chart.vis-d3-maps-choropleth .color-legend{border-radius:0}.chart.vis-d3-maps-choropleth .dw-tooltip{background:#fff;border:1px solid #f5f5f5;box-shadow:3px 3px 3px #0000001a;font-size:11px;max-width:200px;padding:10px;position:absolute;visibility:hidden;z-index:100}.chart.vis-d3-maps-choropleth .dw-tooltip h2{font-size:13px;margin-top:0}.chart.vis-d3-maps-choropleth .dw-tooltip table{border-spacing:0;color:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;text-align:inherit;white-space:inherit}.chart.vis-d3-maps-choropleth .dw-tooltip td,.chart.vis-d3-maps-choropleth .dw-tooltip th{padding:0 5px 3px 0;text-align:left}.chart.vis-d3-maps-choropleth .dw-tooltip ol,.chart.vis-d3-maps-choropleth .dw-tooltip ul{padding-left:15px}.chart.vis-d3-maps-choropleth .dw-tooltip ol li,.chart.vis-d3-maps-choropleth .dw-tooltip ul li{margin-bottom:2px}.chart.vis-d3-maps-choropleth .dw-tooltip hr{border:0;border-top:1px solid #777}.chart.vis-d3-maps-choropleth .dw-tooltip big{font-size:120%}.chart.vis-d3-maps-choropleth .dw-tooltip small{font-size:95%}.chart.vis-d3-maps-choropleth .dw-tooltip .tooltip-warning{background-color:#f2dede;border:1px solid #eed3d7;border-radius:4px;color:#b94a48;font-family:roboto;font-weight:700;padding:8px 35px 8px 14px;position:relative;text-shadow:0 1px 0 #ffffff80}.chart.vis-d3-maps-choropleth .dw-tooltip .tooltip-warning table{background:#fff;border-radius:1px;display:block;font-weight:400;margin-top:10px;padding:1px 4px}.chart.vis-d3-maps-choropleth .dw-tooltip .tooltip-warning table td{padding:0;vertical-align:top}.chart.vis-d3-maps-choropleth .dw-tooltip .tooltip-warning table td.arrow{padding-right:2px}.chart.vis-d3-maps-choropleth .dw-tooltip .dw-tooltip-close{color:#a7a7a7;float:right;font-size:17px;height:17px;line-height:17px;transform:translate(7px,-5px);width:17px}.chart.vis-d3-maps-choropleth .dw-tooltip{left:0;padding-right:20px;pointer-events:none;top:0}.chart.vis-d3-maps-choropleth .dw-tooltip.sticky{pointer-events:all}.chart.vis-d3-maps-choropleth .dw-tooltip .dw-tooltip-close{color:#d8d8d8;cursor:pointer;font-size:14px;height:14px;line-height:14px;position:absolute;right:2px;text-align:center;top:2px;transform:none;width:14px}@media (max-device-width:600px){.chart.vis-d3-maps-choropleth .dw-tooltip .dw-tooltip-close{font-size:17px;height:17px;line-height:17px;padding:4px;width:17px}}.chart.vis-d3-maps-choropleth rect.background{fill:none;pointer-events:all}.chart.vis-d3-maps-choropleth svg.svg-main{display:block}.chart.vis-d3-maps-choropleth .label{pointer-events:none}.chart.vis-d3-maps-choropleth .map-outer{position:relative}.chart.vis-d3-maps-choropleth .annotations,.chart.vis-d3-maps-choropleth .map-outer canvas{left:0;pointer-events:none;position:absolute;top:0}.chart.vis-d3-maps-choropleth .annotations{height:99%;width:100%}.chart.vis-d3-maps-choropleth .d3-maps-zoomed-in .annotations{overflow:hidden}.chart.vis-d3-maps-choropleth .editing-annotations .zoom-buttons,.chart.vis-d3-maps-choropleth .editing-annotations svg{pointer-events:none}.chart.vis-d3-maps-choropleth .legend-container{min-height:10px}.chart.vis-d3-maps-choropleth .inset-map-container{opacity:1;pointer-events:none;position:absolute;transition:opacity .1s ease-in-out}.chart.vis-d3-maps-choropleth .dw-chart-body-content.inset-map-zoom-only:not(.inset-map-show) .inset-map-container{opacity:0}.chart.vis-d3-maps-choropleth path.region{fill:#bebcba}.chart.vis-d3-maps-choropleth .lbl-hidden{pointer-events:none;visibility:hidden}.chart.vis-d3-maps-choropleth path.borders{fill:none;stroke-linejoin:round;stroke-linecap:round;pointer-events:none}.static .zoom-buttons{display:none}.d3-maps-zoomed-in .annotations{overflow:hidden}",
+    "themeCSSDark": ".chart.vis-d3-maps-choropleth{overflow:hidden;position:relative}.chart.vis-d3-maps-choropleth .label-buffer.svelte-u5v6p6,.chart.vis-d3-maps-choropleth .label.svelte-u5v6p6{text-anchor:end}.chart.vis-d3-maps-choropleth .rtl .label-buffer.svelte-u5v6p6,.chart.vis-d3-maps-choropleth .rtl .label.svelte-u5v6p6{text-anchor:start}.chart.vis-d3-maps-choropleth .inset-map-container svg{overflow:visible}.chart.vis-d3-maps-choropleth .inset-map-container path.view{fill:none}.chart.vis-d3-maps-choropleth .inset-map-container circle.view{stroke:none}.chart.vis-d3-maps-choropleth .inset-map-container .graticule{fill:none}.chart.vis-d3-maps-choropleth .inset-map-container div.label{position:absolute;text-align:center}.chart.vis-d3-maps-choropleth .inset-map-container div.label.outline{opacity:.5}.chart.vis-d3-maps-choropleth .inset-map-container div.label:not(.outline) span{text-shadow:none}.chart.vis-d3-maps-choropleth .legend-container{display:flex;justify-content:start;z-index:1}.chart.vis-d3-maps-choropleth .legend-container.align-center{justify-content:center}.chart.vis-d3-maps-choropleth .legend-container[data-position*=inside]{justify-content:start}.chart.vis-d3-maps-choropleth .legend-container.align-center .legend-title{text-align:center}.chart.vis-d3-maps-choropleth .legend-container.align-center .category-legend.horizontal{display:grid;justify-items:center}.chart.vis-d3-maps-choropleth .legend-container.align-center .size-legend[data-title-position=above],.chart.vis-d3-maps-choropleth .legend-container.align-center .size-legend[data-title-position=below]{align-items:center}.chart.vis-d3-maps-choropleth .legend-combined{gap:10px}@media (max-width:449px){.chart.vis-d3-maps-choropleth .legend-container{display:block}}.chart.vis-d3-maps-choropleth .map-key.mobile{background:#0000;position:static!important}.chart.vis-d3-maps-choropleth .map-key.mobile .legend-categories{display:inline-block!important}.chart.vis-d3-maps-choropleth .map-key.mobile .category-legend.horizontal{height:auto!important;width:auto!important}.chart.vis-d3-maps-choropleth .map-key.mobile .title br{display:none}.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;padding:0;position:static!important}.chart.vis-d3-maps-choropleth .map-key.map-key-mb .legend-categories,.chart.vis-d3-maps-choropleth .map-key.map-key-mt .legend-categories,.chart.vis-d3-maps-choropleth .map-key.mobile .legend-categories{display:inline-block!important}.chart.vis-d3-maps-choropleth .map-key.map-key-mb .category-legend.horizontal,.chart.vis-d3-maps-choropleth .map-key.map-key-mt .category-legend.horizontal,.chart.vis-d3-maps-choropleth .map-key.mobile .category-legend.horizontal{height:auto!important;width:auto!important}.chart.vis-d3-maps-choropleth .map-key svg{display:block}.chart.vis-d3-maps-choropleth .category-legend{border-radius:4px}.chart.vis-d3-maps-choropleth .color-legend{border-radius:0}.chart.vis-d3-maps-choropleth .dw-tooltip{background:#fff;border:1px solid #f5f5f5;box-shadow:3px 3px 3px #0000001a;font-size:11px;max-width:200px;padding:10px;position:absolute;visibility:hidden;z-index:100}.chart.vis-d3-maps-choropleth .dw-tooltip h2{font-size:13px;margin-top:0}.chart.vis-d3-maps-choropleth .dw-tooltip table{border-spacing:0;color:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;text-align:inherit;white-space:inherit}.chart.vis-d3-maps-choropleth .dw-tooltip td,.chart.vis-d3-maps-choropleth .dw-tooltip th{padding:0 5px 3px 0;text-align:left}.chart.vis-d3-maps-choropleth .dw-tooltip ol,.chart.vis-d3-maps-choropleth .dw-tooltip ul{padding-left:15px}.chart.vis-d3-maps-choropleth .dw-tooltip ol li,.chart.vis-d3-maps-choropleth .dw-tooltip ul li{margin-bottom:2px}.chart.vis-d3-maps-choropleth .dw-tooltip hr{border:0;border-top:1px solid #777}.chart.vis-d3-maps-choropleth .dw-tooltip big{font-size:120%}.chart.vis-d3-maps-choropleth .dw-tooltip small{font-size:95%}.chart.vis-d3-maps-choropleth .dw-tooltip .tooltip-warning{background-color:#f2dede;border:1px solid #eed3d7;border-radius:4px;color:#b94a48;font-family:roboto;font-weight:700;padding:8px 35px 8px 14px;position:relative;text-shadow:0 1px 0 #ffffff80}.chart.vis-d3-maps-choropleth .dw-tooltip .tooltip-warning table{background:#fff;border-radius:1px;display:block;font-weight:400;margin-top:10px;padding:1px 4px}.chart.vis-d3-maps-choropleth .dw-tooltip .tooltip-warning table td{padding:0;vertical-align:top}.chart.vis-d3-maps-choropleth .dw-tooltip .tooltip-warning table td.arrow{padding-right:2px}.chart.vis-d3-maps-choropleth .dw-tooltip .dw-tooltip-close{color:#a7a7a7;float:right;font-size:17px;height:17px;line-height:17px;transform:translate(7px,-5px);width:17px}.chart.vis-d3-maps-choropleth .dw-tooltip{left:0;padding-right:20px;pointer-events:none;top:0}.chart.vis-d3-maps-choropleth .dw-tooltip.sticky{pointer-events:all}.chart.vis-d3-maps-choropleth .dw-tooltip .dw-tooltip-close{color:#d8d8d8;cursor:pointer;font-size:14px;height:14px;line-height:14px;position:absolute;right:2px;text-align:center;top:2px;transform:none;width:14px}@media (max-device-width:600px){.chart.vis-d3-maps-choropleth .dw-tooltip .dw-tooltip-close{font-size:17px;height:17px;line-height:17px;padding:4px;width:17px}}.chart.vis-d3-maps-choropleth rect.background{fill:none;pointer-events:all}.chart.vis-d3-maps-choropleth svg.svg-main{display:block}.chart.vis-d3-maps-choropleth .label{pointer-events:none}.chart.vis-d3-maps-choropleth .map-outer{position:relative}.chart.vis-d3-maps-choropleth .annotations,.chart.vis-d3-maps-choropleth .map-outer canvas{left:0;pointer-events:none;position:absolute;top:0}.chart.vis-d3-maps-choropleth .annotations{height:99%;width:100%}.chart.vis-d3-maps-choropleth .d3-maps-zoomed-in .annotations{overflow:hidden}.chart.vis-d3-maps-choropleth .editing-annotations .zoom-buttons,.chart.vis-d3-maps-choropleth .editing-annotations svg{pointer-events:none}.chart.vis-d3-maps-choropleth .legend-container{min-height:10px}.chart.vis-d3-maps-choropleth .inset-map-container{opacity:1;pointer-events:none;position:absolute;transition:opacity .1s ease-in-out}.chart.vis-d3-maps-choropleth .dw-chart-body-content.inset-map-zoom-only:not(.inset-map-show) .inset-map-container{opacity:0}.chart.vis-d3-maps-choropleth path.region{fill:#bebcba}.chart.vis-d3-maps-choropleth .lbl-hidden{pointer-events:none;visibility:hidden}.chart.vis-d3-maps-choropleth path.borders{fill:none;stroke-linejoin:round;stroke-linecap:round;pointer-events:none}.static .zoom-buttons{display:none}.d3-maps-zoomed-in .annotations{overflow:hidden}",
+    "themeFonts": {
+        "Roboto": {
+            "type": "font",
+            "import": "https://static.dwcdn.net/css/roboto.css",
+            "method": "import"
+        }
+    }
+});
\ No newline at end of file

src/App/App.css

@@ -2,35 +2,186 @@
 /* * COLOURS * */
 /* * * * * * * */
 :root {
-  /* our colours*/
-  --text-primary: #850F78; 
+  /* our colours*/ 
+  --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; 
-  --background: white; 
+  --darkerbeige: #e2dad7; 
+  --background: #FFF6F2; 
   /*igem colours*/
   --igemdarkgreen: #006530; 
   --igemmediumgreen: #019968; 
   --igemlightgreen: #99cb9a; 
+
+
+    --vp-ct: var(--text-primary); 
+    --info-border-color: var(--accent-primary); 
+    --info-bg-color: var(--lightyellow); 
+    --info-title-color: var(--offblack); 
+    --info-code-bg-color: var(--lightyellow); 
+
+    --note-border-color: var(--text-primary); 
+    --note-bg-color: var(--very-light-purple); 
+    --note-title-color: var(--offblack);
+    --note-code-bg-color: var(--very-light-purple);
+
+    --tip-border-color: var(--offblack); 
+    --tip-bg-color: var(--darkerbeige);  
+    --tip-title-color: var(--offblack);
+    --tip-code-bg-color: var(--offblack);
+
+    --warning-border-color: var(--accen-secondary); 
+    --warning-bg-color: var(--very-light-secondary);  
+    --warning-title-color: var(--offblack);
+
+    --danger-code-bg-color: var(--verylightblue); 
+    --danger-border-color: var(--lightblue); 
+    --danger-bg-color: var(--verylightblue);  
+    --danger-title-color: var(--offblack);
+
+    --markmap-a-color: var(--text-primary) !important; 
+
+    --node-size: 60px; 
+    --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(--background);
-  color: #493843;
+  background-color: var(--ourbeige);
+  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;
@@ -39,8 +190,32 @@ a {
   color: var(--lightblue) !important;
   text-decoration: none !important;
 }
-a:active {
-  background-color: yellow;
+.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:var(--offblack) !important;
+}
+
+.doi{
+  color: var(--lightblue) !important;
+}
+.codesnippet{
+  padding-left: 30px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  border-radius: 10px;
+  margin-top: var(--simple-margin);
+  margin-bottom: var(--simple-margin) !important;
+  color: var(--text-primary) !important;
+  background-color: rgb(217, 217, 217);
 }
 /* * * * * * * */
 /* *SIDEBAR* * */
@@ -49,7 +224,7 @@ a:active {
 .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%;
@@ -57,42 +232,70 @@ a:active {
   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 * */
 /* * * * * * * */
-.left-aligned {margin-left: auto;}
+
+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;}
 .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: 0;
+  padding-bottom: 10px;
+  background-color: var(--ourbeige);
+}
 .null{
   padding: 0% !important;
    margin: 0% !important;
@@ -106,20 +309,26 @@ color: var(--text-primary);
 .center{
   display: flex !important;
   align-items: center !important;
+  text-align: center;
+  align-self: center;
+}
+.shadow{
+  box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
 }
 /* * * * * * * */
 /* *  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 {
@@ -130,17 +339,61 @@ 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;
+}
+/* TABLES */
+table {
+  font-family: arial, sans-serif;
+  border-collapse: collapse;
+  width: 100%;
+}
+
+td, th {
+  border: 1px solid var(--offblack);
+  text-align: left;
+  padding: 8px;
+}
+
+.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;
+}
+tbody tr:nth-child(odd) {
+  background-color: #f3f3f3;
 }
 
 
@@ -148,12 +401,40 @@ color: var(--text-primary);
 /* * * * * * * */
 /* BACKGROUND  */
 /* * * * * * * */
+.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;
@@ -163,35 +444,92 @@ color: var(--text-primary);
 /* * * * * * * */
 /* *HEADINGS * */
 /* * * * * * * */
-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;
+
+.base {
+  width: 100%;
+  background-color: var(--lightblue);
+  padding: 120px 30px;
+}
+
+.header-title{
+  text-align: center;
+  align-items: center;
+  margin: auto !important;
+  padding: 0 30px;
+  font-size: 130px;
+  font-weight: 900;
+  line-height: 130px;
 }
 
+.popart{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  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(--text-primary ),
+						1vw 1vw var(--offblack);
+}
+.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;
 } 
 
+.v2 p {
+  background-position: left;
+  background-size: 0% 100%;
+  background-image: linear-gradient(#f6e05e, #f6e05e);
+}
+.v2:hover p {
+  background-size: 100% 100%;
+}
+
+.v3 p {
+  color: transparent;
+  background-position: right;
+  background-size: 100% 100%;
+  background-image: linear-gradient(#a0aec0, #a0aec0);
+}
+.v3:hover p {
+  color: var(--offblack);
+  background-size: 0% 100%;
+}
+
 
 /* * * * * * * */
 /* * CALLOUT * */
 /* * * * * * * */
+
+.bg-b{
+  background-color: var(--ourbeige);
+}
 .bd-callout {
   padding: 1.25rem;
   margin-top: 1.25rem;
@@ -226,7 +564,7 @@ h2{
 }
 
 .bd-callout-danger {
-  border-left-color: #d9534f;
+  border-left-color: var(--lightblue);
 }
 
 /* * * * * * * */
@@ -236,81 +574,226 @@ 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;
 }
 
 
-/* * * * * * * * */
-/*VILLAGE BUTTONS*/
-/* * * * * * * * */
-.bottom-buttons{
-  margin-top: 50px !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;
 }
+.img-sponsor-partner-page{
+  max-width: 70%;
+  max-height: 100px;
+  padding-bottom: 10px;
+  padding-top: 10px;
+}
 .img-right{
   float: right !important;
-  padding-left: 1vw !important;
+  padding-left: 2vw !important;
+  padding-bottom: 1vw !important;
+  padding-top: 1vw !important;
+}
+.img-left{
+  float: left !important;
+  padding-right: 2vw !important;
   padding-bottom: 1vw !important;
   padding-top: 1vw !important;
 }
 .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{
+  max-width: 3vw;
+}
 
 .hexagon{
   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: var(--ourbeige);
+}
+
+.sponsor-text-right{
+  margin-left: var(--simple-margin);
+}
+.sponsor-text-left{
+  margin-right: 20px;
+}
+#zeiss-portrait{
+  height: 350px !important; 
+  background-image: url(https://static.igem.wiki/teams/5247/sponsors/zeiss-foto.jpg);
+  background-size: auto 100%;
+  background-repeat: no-repeat;
+}
+#zeiss-portrait-logo{
+  padding-top: 10px;
+  height: 90px;
+}
+
+.sponsor-text-left p, .sponsor-text-right p{
+  display: flex;
+  vertical-align: middle;
+}
+
+#idt-portrait{
+  height: 350px !important; 
+  background-image: url(https://static.igem.wiki/teams/5247/sponsors/idt-foto.png);
+  background-size: auto 100%;
+  background-repeat: no-repeat;
+}
+#idt-portrait-logo{
+  padding-top: 10px;
+  height: 50px;
+}
+#integra-portrait{
+  height: 300px !important; 
+  background-image: url(https://static.igem.wiki/teams/5247/sponsors/integra-foto.jpg);
+  background-size: auto 100%;
+  background-repeat: no-repeat;
+  background-color: var(--ourbeige);
+}
+#integra-portrait-logo{
+  padding-top: 10px;
+  height: 40px;
+}
 
 /* * * * * * * */
 /* * * SVG * * */
@@ -318,7 +801,7 @@ img .middle{
 svg{
   background:transparent
 }
-svg text{
+.hone svg text{
   font-size: 7vw !important;
   stroke-width:2px !important;
   fill:var(--accent-primary) ;
@@ -326,73 +809,11 @@ svg text{
   /*letter-spacing:4px;*/
   animation:effect 3s, dash 3s;
 }
-svg text:hover{
+.hone svg text:hover{
   fill: var(--text-primary)
 }
 
 
-
-
-/* * * * * * * */
-/* 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 * */
 /* * * * * * * */
@@ -421,129 +842,67 @@ svg text:hover{
   }
 }
 
+/* Headings */
+.revealUp {
+  opacity: 0;
+  visibility: hidden;
+}
+.spacer {
+  height: 50vh;
+  background-color: var(--offblack);
+}
 
+.hello:hover {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 25vw;
+  animation-name: jumpy;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in-out;
+  -webkit-text-stroke-width: 3px;
+  -webkit-text-stroke-color: var(--offblack);
+}
+.terminal-box{
+  margin-top: 10px;
+  margin-bottom: 10px;
+  background-color: var(--offblack);
+  border-radius: 10px;
+  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;
+.terminal-box .terminal-error{
+  color: red;
 }
 
-.timeline-container::after {
-  background-color: var(--text-primary);
-  position: absolute;
-  left: calc(50% - 2px);
+.problem-error::before {
+  background-image: url(https://static.igem.wiki/teams/5247/design/icons/cross-circle.png); 
+  background-size: 20px 20px;
   content: "";
-  width: 4px;
-  height: 100%;
-}
-.timeline-item {
-  display: flex;
-  justify-content: flex-end;
+  background-repeat: no-repeat;
+  width: 20px; 
+  height: 20px;
   padding-right: 30px;
-  position: relative;
-  margin: 10px 0;
-  width: 50%;
+  align-self: center;
 }
-
-.timeline-item:nth-child(odd) {
-  align-self: flex-end;
-  justify-content: flex-start;
+.problem-error{
+  display: inline-flex;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  background-color: var(--offblack);
+  border-radius: 10px;
+  color: var(--ourbeige);
   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-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 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;
+  padding-right: 20px;
+  padding-top: 10px;
+  padding-bottom: 10px;
 }
 
-.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%;
@@ -577,48 +936,13 @@ svg text:hover{
 }
 
 
-.timeline {
-  background-color: inherit; 
-  font-size: 1rem; 
-  }
 
-.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%;
@@ -656,34 +980,2995 @@ svg text:hover{
   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;
+  background-color: var(--text-primary) !important;
+  box-shadow: 3px 3px 10px var(--offblack) !important;
   border-radius: 50%;
   margin: 1vw;
-}
+} 
 .shape-text {
   margin: auto;
   text-align: center;
-}
\ No newline at end of file
+}
+
+
+/*collapsible*/ 
+
+.collapse-card {
+  margin-bottom: var(--big-padding) !important;
+  border-radius: 4px;
+  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)
+}
+@media print {
+  .hint-container {
+    page-break-inside:avoid
+  }
+}
+.hint-container .hint-container-title {
+  position:relative;
+  font-weight:600;
+  line-height:1.25
+}
+.hint-container.info,
+.hint-container.note,
+.hint-container.tip,
+.hint-container.warning,
+.hint-container.danger {
+  margin:1rem 0;
+  padding:.25rem 1rem;
+  border-inline-start-width:.3rem;
+  border-inline-start-style:solid;
+  border-radius:.5rem;
+  color:inherit
+}
+@media (max-width: 419px) {
+  .hint-container.info,
+  .hint-container.note,
+  .hint-container.tip,
+  .hint-container.warning,
+  .hint-container.danger {
+    margin-inline:-.75rem
+  }
+}
+.hint-container.info .hint-container-title,
+.hint-container.note .hint-container-title,
+.hint-container.tip .hint-container-title,
+.hint-container.warning .hint-container-title,
+.hint-container.danger .hint-container-title {
+  padding-inline-start:1.75rem
+}
+@media print {
+  .hint-container.info .hint-container-title,
+  .hint-container.note .hint-container-title,
+  .hint-container.tip .hint-container-title,
+  .hint-container.warning .hint-container-title,
+  .hint-container.danger .hint-container-title {
+    padding-inline-start:0
+  }
+}
+.hint-container.info .hint-container-title:before,
+.hint-container.note .hint-container-title:before,
+.hint-container.tip .hint-container-title:before,
+.hint-container.warning .hint-container-title:before,
+.hint-container.danger .hint-container-title:before {
+  content:" ";
+  position:absolute;
+  top:calc(50% - .6125em);
+  left:0;
+  width:1.25em;
+  height:1.25em;
+  background-position:left;
+  background-repeat:no-repeat
+}
+@media print {
+  .hint-container.info .hint-container-title:before,
+  .hint-container.note .hint-container-title:before,
+  .hint-container.tip .hint-container-title:before,
+  .hint-container.warning .hint-container-title:before,
+  .hint-container.danger .hint-container-title:before {
+    display:none
+  }
+}
+html[dir=rtl] .hint-container.info .hint-container-title:before,
+html[dir=rtl] .hint-container.note .hint-container-title:before,
+html[dir=rtl] .hint-container.tip .hint-container-title:before,
+html[dir=rtl] .hint-container.warning .hint-container-title:before,
+html[dir=rtl] .hint-container.danger .hint-container-title:before {
+  right:0;
+  left:unset
+}
+.hint-container.info p,
+.hint-container.note p,
+.hint-container.tip p,
+.hint-container.warning p,
+.hint-container.danger p {
+  line-height:1.5
+}
+.hint-container.info a,
+.hint-container.note a,
+.hint-container.tip a,
+.hint-container.warning a,
+.hint-container.danger a {
+  color:var(--vp-tc)
+}
+.hint-container.info {
+  border-color:var(--info-border-color);
+  background:var(--info-bg-color)
+}
+.hint-container.info>.hint-container-title {
+  color:var(--info-title-color)
+}
+.hint-container.info>.hint-container-title:before {
+  background-image:url("https://static.igem.wiki/teams/5247/design/icons/info-filled-small.png")
+}
+.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 {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+  left: 10%;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/* The actual popup */
+.popup .popuptext {
+  visibility: hidden;
+  min-width: 50vw;
+  min-height: 20vw;
+  background-color: #555;
+  color: var(--ourbeige);
+  text-align: center;
+  border-radius: 6px;
+  z-index: 1;
+  position: absolute;
+  top:0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+/* Toggle this class - hide and show the popup */
+.popup .show {
+  visibility: visible;
+  -webkit-animation: fadeIn 1s;
+  animation: fadeIn 1s;
+}
+.tl-butt img:hover{
+  cursor: pointer;
+  box-shadow: 3px 3px 10px var(--offblack);
+}
+/* Add animation (fade in the popup) */
+@-webkit-keyframes fadeIn {
+  from {opacity: 0;} 
+  to {opacity: 1;}
+}
+
+@keyframes fadeIn {
+  from {opacity: 0;}
+  to {opacity:1 ;}
+}
+
+.tabcontent {
+  display: none;
+  padding: 6px 12px;
+}
+
+
+/*GALLERY*/
+.gall {
+  --s: 150px; /* control the size */
+  --g: 10px;  /* control the gap */
+  display: grid;
+  margin: calc(var(--s) + var(--g));
+}
+
+.gall > img {
+  grid-area: 1/1;
+  width: var(--s);
+  aspect-ratio: 1.15;
+  object-fit: cover;
+  clip-path: polygon(25% 0%, 75% 0%, 100% 50%,75% 100%,25% 100%,0 50%);
+  transform: translate(var(--_x,0),var(--_y,0)) scale(var(--_t,1));
+  cursor: pointer;
+  filter: grayscale(80%);
+  transition: .2s linear;
+}
+.gall > img:hover {
+  filter: grayscale(0);
+  z-index: 1;
+  --_t: 1.2;
+}
+
+.gall > img:nth-child(1) {--_y: calc(-100% - var(--g))}
+.gall > img:nth-child(7) {--_y: calc( 100% + var(--g))}
+.gall > img:nth-child(3), .gall > img:nth-child(5) {--_x: calc(-75% - .87*var(--g))}
+.gall > img:nth-child(4), .gall > img:nth-child(6) {--_x: calc( 75% + .87*var(--g))}
+.gall > img:nth-child(3),.gall > img:nth-child(4) {--_y: calc(-50% - .5*var(--g))}
+.gall > img:nth-child(5), .gall > img:nth-child(6) {--_y: calc( 50% + .5*var(--g))}
+
+
+
+.wrapper{
+	width: 500px;
+	height: 100%;
+	background: var(--ourbeige);
+	margin: 15px auto 0;
+}
+.wrapper .tabs_wrap{
+	padding: 20px;
+	border-bottom: 1px solid #ebedec;
+}
+.wrapper .tabs_wrap ul{
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-pack: center;
+	    -ms-flex-pack: center;
+	        justify-content: center;
+}
+.wrapper .tabs_wrap ul li{
+  list-style-type: none;
+	width: 135px;
+    text-align: center;
+    background: #e9ecf1;
+    border-right: 1px solid #c1c4c9;
+    padding: 13px 15px;
+	cursor: pointer;
+	-webkit-transition: all 0.2s ease;
+	-o-transition: all 0.2s ease;
+	transition: all 0.2s ease;
+}
+
+.wrapper .tabs_wrap ul li:first-child{
+	border-top-left-radius: 25px;
+	border-bottom-left-radius: 25px;
+}
+
+.wrapper .tabs_wrap ul li:last-child{
+	border-right: 0px;
+	border-top-right-radius: 25px;
+	border-bottom-right-radius: 25px;
+}
+
+.wrapper .tabs_wrap ul li:hover,
+.wrapper .tabs_wrap ul li.active{
+	background: #7fc469;
+	color: var(--ourbeige);
+}
+
+
+.gall-a {
+  --s: 200px; /* control the size */
+  --g: 8px;   /* control the gap */
+  
+  display: grid;
+  grid: auto-flow var(--s)/repeat(2,var(--s));
+  gap: var(--g);
+}
+.gall-a > span {
+  width: 100%; 
+  aspect-ratio: 1;
+  z-index: 0;
+  position: relative;
+  transition: .25s,z-index 0s .25s;
+  background-color: lightgray;
+}
+.gall-b:hover{
+  background-color: var(--ourbeige);
+}
+.bg-act{
+  background-color: var(--background)!important;
+}
+.gall-a > span > div > img{
+  width: 8rem; 
+  position: absolute; 
+  cursor: pointer;
+}
+
+.gall-a > span:nth-child(1) > div > img{
+  bottom: 0.5rem;
+  right: 1rem; 
+}
+.gall-a > span:nth-child(2) > div > img{
+  bottom: 0.5rem;
+  left  : 1rem;
+}
+.gall-a > span:nth-child(3) >  div > img{
+  top: 0.5rem;
+  right: 1rem;
+}
+.gall-a > span:nth-child(4) > div > img{
+  top: 0.5rem;
+  left: 1rem;
+}
+
+.gall-a > span:nth-child(1){
+  clip-path: circle(var(--_c,70% at 70% 70%));
+  place-self: start;
+}
+.gall-a > span:nth-child(2){
+  clip-path: circle(var(--_c,70% at 30% 70%));
+  place-self: start end;
+}
+.gall-a > span:nth-child(3){
+  clip-path: circle(var(--_c,70% at 70% 30%));
+  place-self: end start;
+}
+.gall-a > span:nth-child(4){
+  clip-path: circle(var(--_c,70% at 30% 30%));
+  place-self: end;
+}
+
+.buffer{
+  height: 5vw;
+}
+
+.explore{
+  position: absolute;
+  right: -4vw;
+  bottom: 8vw;
+  z-index: 1;
+  transform: rotate(-35deg);
+  font-size: xx-large;
+}
+
+.team-container {
+  grid-template-columns: 100px 50px 100px;
+  grid-template-rows: 80px auto 80px; 
+  column-gap: 10px;
+  row-gap: 15px;
+}
+
+/* TEAM */
+.lnp{
+  background-image: url("https://static.igem.wiki/teams/5247/scientific-figures/lnp.png");
+  height: 12rem;
+  width: 12rem;
+  background-size: 11.8rem;
+  background-repeat: no-repeat;
+  background-position: center;
+  align-items: center;
+}
+.lnp > img{
+  display: block;
+  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: 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 {
+				overflow: hidden;
+				position: relative
+			}
+			
+			.chart.vis-d3-maps-choropleth .label-buffer.svelte-u5v6p6,
+			.chart.vis-d3-maps-choropleth .label.svelte-u5v6p6 {
+				text-anchor: end
+			}
+			
+			.chart.vis-d3-maps-choropleth .rtl .label-buffer.svelte-u5v6p6,
+			.chart.vis-d3-maps-choropleth .rtl .label.svelte-u5v6p6 {
+				text-anchor: start
+			}
+			
+			.chart.vis-d3-maps-choropleth .inset-map-container svg {
+				overflow: visible
+			}
+			
+			.chart.vis-d3-maps-choropleth .inset-map-container path.view {
+				fill: none
+			}
+			
+			.chart.vis-d3-maps-choropleth .inset-map-container circle.view {
+				stroke: none
+			}
+			
+			.chart.vis-d3-maps-choropleth .inset-map-container .graticule {
+				fill: none
+			}
+			
+			.chart.vis-d3-maps-choropleth .inset-map-container div.label {
+				position: absolute;
+				text-align: center
+			}
+			
+			.chart.vis-d3-maps-choropleth .inset-map-container div.label.outline {
+				opacity: .5
+			}
+			
+			.chart.vis-d3-maps-choropleth .inset-map-container div.label:not(.outline) span {
+				text-shadow: none
+			}
+			
+			.chart.vis-d3-maps-choropleth .legend-container {
+				display: flex;
+				justify-content: start;
+				z-index: 1
+			}
+			
+			.chart.vis-d3-maps-choropleth .legend-container.align-center {
+				justify-content: center
+			}
+			
+			.chart.vis-d3-maps-choropleth .legend-container[data-position*=inside] {
+				justify-content: start
+			}
+			
+			.chart.vis-d3-maps-choropleth .legend-container.align-center .legend-title {
+				text-align: center
+			}
+			
+			.chart.vis-d3-maps-choropleth .legend-container.align-center .category-legend.horizontal {
+				display: grid;
+				justify-items: center
+			}
+			
+			.chart.vis-d3-maps-choropleth .legend-container.align-center .size-legend[data-title-position=above],
+			.chart.vis-d3-maps-choropleth .legend-container.align-center .size-legend[data-title-position=below] {
+				align-items: center
+			}
+			
+			.chart.vis-d3-maps-choropleth .legend-combined {
+				gap: 10px
+			}
+			
+			@media (max-width:449px) {
+				.chart.vis-d3-maps-choropleth .legend-container {
+					display: block
+				}
+			}
+			
+			.chart.vis-d3-maps-choropleth .map-key.mobile {
+				background: var(--offblack)0;
+				position: static!important
+			}
+			
+			.chart.vis-d3-maps-choropleth .map-key.mobile .legend-categories {
+				display: inline-block!important
+			}
+			
+			.chart.vis-d3-maps-choropleth .map-key.mobile .category-legend.horizontal {
+				height: auto!important;
+				width: auto!important
+			}
+			
+			.chart.vis-d3-maps-choropleth .map-key.mobile .title br {
+				display: none
+			}
+			
+			.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: var(--offblack)0;
+				padding: 0;
+				position: static!important
+			}
+			
+			.chart.vis-d3-maps-choropleth .map-key.map-key-mb .legend-categories,
+			.chart.vis-d3-maps-choropleth .map-key.map-key-mt .legend-categories,
+			.chart.vis-d3-maps-choropleth .map-key.mobile .legend-categories {
+				display: inline-block!important
+			}
+			
+			.chart.vis-d3-maps-choropleth .map-key.map-key-mb .category-legend.horizontal,
+			.chart.vis-d3-maps-choropleth .map-key.map-key-mt .category-legend.horizontal,
+			.chart.vis-d3-maps-choropleth .map-key.mobile .category-legend.horizontal {
+				height: auto!important;
+				width: auto!important
+			}
+			
+			.chart.vis-d3-maps-choropleth .map-key svg {
+				display: block
+			}
+			
+			.chart.vis-d3-maps-choropleth .category-legend {
+				border-radius: 4px
+			}
+			
+			.chart.vis-d3-maps-choropleth .color-legend {
+				border-radius: 0
+			}
+			
+			.chart.vis-d3-maps-choropleth .dw-tooltip {
+				background: var(--ourbeige);
+				border: 1px solid #f5f5f5;
+				box-shadow: 3px 3px 3px var(--offblack)0001a;
+				font-size: 11px;
+				max-width: 200px;
+				padding: 10px;
+				position: absolute;
+				visibility: hidden;
+				z-index: 100
+			}
+			
+			.chart.vis-d3-maps-choropleth .dw-tooltip h2 {
+				font-size: 13px;
+				margin-top: 0
+			}
+			
+			.chart.vis-d3-maps-choropleth .dw-tooltip table {
+				border-spacing: 0;
+				color: inherit;
+				font-size: inherit;
+				font-style: inherit;
+				font-variant: inherit;
+				font-weight: inherit;
+				line-height: inherit;
+				text-align: inherit;
+				white-space: inherit
+			}
+			
+			.chart.vis-d3-maps-choropleth .dw-tooltip td,
+			.chart.vis-d3-maps-choropleth .dw-tooltip th {
+				padding: 0 5px 3px 0;
+				text-align: left
+			}
+			
+			.chart.vis-d3-maps-choropleth .dw-tooltip ol,
+			.chart.vis-d3-maps-choropleth .dw-tooltip ul {
+				padding-left: 15px
+			}
+			
+			.chart.vis-d3-maps-choropleth .dw-tooltip ol li,
+			.chart.vis-d3-maps-choropleth .dw-tooltip ul li {
+				margin-bottom: 2px
+			}
+			
+			.chart.vis-d3-maps-choropleth .dw-tooltip hr {
+				border: 0;
+				border-top: 1px solid #777
+			}
+			
+			.chart.vis-d3-maps-choropleth .dw-tooltip big {
+				font-size: 120%
+			}
+			
+			.chart.vis-d3-maps-choropleth .dw-tooltip small {
+				font-size: 95%
+			}
+			
+			.chart.vis-d3-maps-choropleth .dw-tooltip .tooltip-warning {
+				background-color: #f2dede;
+				border: 1px solid #eed3d7;
+				border-radius: 4px;
+				color: #b94a48;
+				font-family: roboto;
+				font-weight: 700;
+				padding: 8px 35px 8px 14px;
+				position: relative;
+				text-shadow: 0 1px 0 var(--cebitecgray)
+			}
+			
+			.chart.vis-d3-maps-choropleth .dw-tooltip .tooltip-warning table {
+				background: var(--ourbeige);
+				border-radius: 1px;
+				display: block;
+				font-weight: 400;
+				margin-top: 10px;
+				padding: 1px 4px
+			}
+			
+			.chart.vis-d3-maps-choropleth .dw-tooltip .tooltip-warning table td {
+				padding: 0;
+				vertical-align: top
+			}
+			
+			.chart.vis-d3-maps-choropleth .dw-tooltip .tooltip-warning table td.arrow {
+				padding-right: 2px
+			}
+			
+			.chart.vis-d3-maps-choropleth .dw-tooltip .dw-tooltip-close {
+				color: #a7a7a7;
+				float: right;
+				font-size: 17px;
+				height: 17px;
+				line-height: 17px;
+				transform: translate(7px, -5px);
+				width: 17px
+			}
+			
+			.chart.vis-d3-maps-choropleth .dw-tooltip {
+				left: 0;
+				padding-right: 20px;
+				pointer-events: none;
+				top: 0
+			}
+			
+			.chart.vis-d3-maps-choropleth .dw-tooltip.sticky {
+				pointer-events: all
+			}
+			
+			.chart.vis-d3-maps-choropleth .dw-tooltip .dw-tooltip-close {
+				color: #d8d8d8;
+				cursor: pointer;
+				font-size: 14px;
+				height: 14px;
+				line-height: 14px;
+				position: absolute;
+				right: 2px;
+				text-align: center;
+				top: 2px;
+				transform: none;
+				width: 14px
+			}
+			
+			@media (max-device-width:600px) {
+				.chart.vis-d3-maps-choropleth .dw-tooltip .dw-tooltip-close {
+					font-size: 17px;
+					height: 17px;
+					line-height: 17px;
+					padding: 4px;
+					width: 17px
+				}
+			}
+			
+			.chart.vis-d3-maps-choropleth rect.background {
+				fill: none;
+				pointer-events: all
+			}
+			
+			.chart.vis-d3-maps-choropleth svg.svg-main {
+				display: block
+			}
+			
+			.chart.vis-d3-maps-choropleth .label {
+				pointer-events: none
+			}
+			
+			.chart.vis-d3-maps-choropleth .map-outer {
+				position: relative
+			}
+			
+			.chart.vis-d3-maps-choropleth .annotations,
+			.chart.vis-d3-maps-choropleth .map-outer canvas {
+				left: 0;
+				pointer-events: none;
+				position: absolute;
+				top: 0
+			}
+			
+			.chart.vis-d3-maps-choropleth .annotations {
+				height: 99%;
+				width: 100%
+			}
+			
+			.chart.vis-d3-maps-choropleth .d3-maps-zoomed-in .annotations {
+				overflow: hidden
+			}
+			
+			.chart.vis-d3-maps-choropleth .editing-annotations .zoom-buttons,
+			.chart.vis-d3-maps-choropleth .editing-annotations svg {
+				pointer-events: none
+			}
+			
+			.chart.vis-d3-maps-choropleth .legend-container {
+				min-height: 10px
+			}
+			
+			.chart.vis-d3-maps-choropleth .inset-map-container {
+				opacity: 1;
+				pointer-events: none;
+				position: absolute;
+				transition: opacity .1s ease-in-out
+			}
+			
+			.chart.vis-d3-maps-choropleth .dw-chart-body-content.inset-map-zoom-only:not(.inset-map-show) .inset-map-container {
+				opacity: 0
+			}
+			
+			.chart.vis-d3-maps-choropleth path.region {
+				fill: #bebcba
+			}
+			
+			.chart.vis-d3-maps-choropleth .lbl-hidden {
+				pointer-events: none;
+				visibility: hidden
+			}
+			
+			.chart.vis-d3-maps-choropleth path.borders {
+				fill: none;
+				stroke-linejoin: round;
+				stroke-linecap: round;
+				pointer-events: none
+			}
+			
+			.static .zoom-buttons {
+				display: none
+			}
+			
+			.d3-maps-zoomed-in .annotations {
+				overflow: hidden
+			}
+      body.in-editor,
+      .web-component-body.in-editor {
+        padding-bottom: 10px
+      }
+      
+      .dw-chart.vis-height-fit {
+        overflow: hidden
+      }
+      
+      .chart.dir-rtl .dw-chart-body.svelte-9ysojt {
+        direction: rtl
+      }
+      
+      .chart.is-dark-mode .hide-in-dark {
+        display: none
+      }
+      
+      .chart:not(.is-dark-mode) .hide-in-light {
+        display: none
+      }
+      
+      .chart .sr-only {
+        position: absolute;
+        left: -9999px;
+        height: 1px
+      }
+      
+      .chart.js.svelte-9ysojt .noscript {
+        display: none
+      }
+      
+      .chart .hidden,
+      .chart .hide {
+        display: none
+      }
+      
+      a img {
+        border: 0px
+      }
+      
+      b,
+      strong {
+        font-weight: bold
+      }
+      
+      svg rect {
+        shape-rendering: crispEdges
+      }
+      
+      .error {
+        background-color: #fbeff2;
+        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) inset;
+        margin: 2em
+      }
+      
+      .error p {
+        color: #b63057;
+        font-size: 14px;
+        padding: 1.25em 1.5em;
+        line-height: 1.5;
+        border-color: #cf4870;
+        border-style: solid;
+        border-width: 0 0 0 4px;
+        border-radius: 4px
+      }
+      
+      .dw-chart-body-content.svelte-9ysojt {
+        position: relative;
+        z-index: 0
+      }
+
+      .is-static.svelte-ej8jdi a {
+        color: unset;
+        pointer-events: none;
+        text-decoration: inherit
+      }
+      
+      .dir-rtl .outer-container.svelte-ej8jdi {
+        direction: rtl
+      }
+      
+      .outer-container.svelte-ej8jdi {
+        position: relative
+      }
+      
+      .container-afterChart.svelte-ej8jdi {
+        position: absolute;
+        pointer-events: none;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0
+      }
+
+      /* Additional bc missing? */
+     /*  .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;
+      }
+      .datawrapper-llngz-1j8h2cc text:not(.buffer) {
+        fill: currentcolor;
+      }
+      .datawrapper-llngz-umw1i2 {
+        color: rgb(24, 24, 24) !important;
+        font-family: Roboto, sans-serif;
+        font-size: 12px;
+      }
+      /* .datawrapper-llngz-1tjke6r.horizontal g.labels text, .datawrapper-llngz-1tjke6r.horizontal g.labels text tspan {
+        dominant-baseline: hanging;
+      }
+      .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 {
+        position: relative;
+      }
+      .chart.vis-d3-maps-choropleth .annotations, .chart.vis-d3-maps-choropleth .map-outer canvas {
+        left: 0;
+        pointer-events: none;
+        position: absolute;
+        top: 0;
+      }
+      .chart.vis-d3-maps-choropleth rect.background {
+        fill: none;
+        pointer-events: all;
+      }
+      svg rect {
+        shape-rendering: crispEdges;
+      }
+      .datawrapper-llngz-mbp9a6 path.region-outline.has-data:hover, .datawrapper-llngz-mbp9a6 path.region-outline.hover-outline, .datawrapper-llngz-mbp9a6 path.region-outline.sticky {
+        stroke: rgb(0, 0, 0);
+      }
+
+      /* FILTER */
+      .filterable {
+        margin-bottom: 4px;
+        display: none;
+      }
+      .show {
+        display: block;
+      }
+      .noshow{
+        display: none;
+      }
+      
+
+      /* SLICK */
+
+      /* .slider-container{
+        display: grid;
+        align-items: center;
+      } */
+      .slick-slider
+
+{
+
+    position: relative;
+
+
+    display: flex;
+
+    box-sizing: border-box;
+    align-items: center !important;
+
+}
+
+
+.slick-list
+
+{
+
+    position: relative;
+
+
+    display: block;
+
+    overflow: hidden;
+
+
+    margin: 0;
+
+    padding: 0;
+
+}
+
+.slick-list:focus
+
+{
+
+    outline: none;
+
+}
+
+.slick-list.dragging
+
+{
+
+    cursor: pointer;
+
+    cursor: hand;
+
+}
+
+
+
+.slick-slider .slick-list
+
+{
+
+    -webkit-transform: translate3d(0, 0, 0);
+
+       -moz-transform: translate3d(0, 0, 0);
+
+        -ms-transform: translate3d(0, 0, 0);
+
+         -o-transform: translate3d(0, 0, 0);
+
+            transform: translate3d(0, 0, 0);
+
+}
+
+
+
+
+
+
+.slick-slide
+
+{
+
+    display: none;
+
+    float: left;
+
+
+    height: 100%;
+
+    min-height: 1px;
+
+}
+
+[dir='rtl'] .slick-slide
+
+{
+
+    float: right;
+
+}
+
+.slick-slide img
+
+{
+
+    display: inline;
+
+}
+
+.slick-slide.slick-loading img
+
+{
+
+    display: none;
+
+}
+
+.slick-slide.dragging img
+
+{
+
+    pointer-events: none;
+
+}
+
+.slick-initialized .slick-slide
+
+{
+
+    display: block;
+
+}
+
+.slick-loading .slick-slide
+
+{
+
+    visibility: hidden;
+
+}
+
+.slick-vertical .slick-slide
+
+{
+
+    display: block;
+
+
+    height: auto;
+
+
+    border: 1px solid transparent;
+
+}
+
+.slick-arrow.slick-hidden {
+
+    display: none;
+
+}
+
+/* Arrows */
+
+.slick-prev,
+
+.slick-next
+
+{
+
+    font-size: 0;
+
+    line-height: 0;
+
+
+    position: absolute;
+
+    top: 50%;
+
+
+    display: block;
+
+
+    width: 20px;
+
+    height: 20px;
+
+    padding: 0;
+
+    -webkit-transform: translate(0, -50%);
+
+    -ms-transform: translate(0, -50%);
+
+    transform: translate(0, -50%);
+
+
+    cursor: pointer;
+
+
+    color: transparent;
+
+    border: none;
+
+    outline: none;
+
+    background: transparent;
+
+}
+
+.slick-prev:hover,
+
+.slick-prev:focus,
+
+.slick-next:hover,
+
+.slick-next:focus
+
+{
+
+    color: transparent;
+
+    outline: none;
+
+    background: transparent;
+
+}
+
+.slick-prev:hover:before,
+
+.slick-prev:focus:before,
+
+.slick-next:hover:before,
+
+.slick-next:focus:before
+
+{
+
+    opacity: 1;
+
+}
+
+.slick-prev.slick-disabled:before,
+
+.slick-next.slick-disabled:before
+
+{
+
+    opacity: .25;
+
+}
+
+
+.slick-prev:before,
+
+.slick-next:before
+
+{
+
+    font-family: 'slick';
+
+    font-size: 20px;
+
+    line-height: 1;
+
+
+    opacity: .75;
+
+    color: var(--ourbeige);
+
+
+    -webkit-font-smoothing: antialiased;
+
+    -moz-osx-font-smoothing: grayscale;
+
+}
+
+
+.slick-prev
+
+{
+
+    left: -25px;
+
+}
+
+[dir='rtl'] .slick-prev
+
+{
+
+    right: -25px;
+
+    left: auto;
+
+}
+
+.slick-prev:before
+
+{
+
+    content: '←';
+
+}
+
+[dir='rtl'] .slick-prev:before
+
+{
+
+    content: '→';
+
+}
+
+
+.slick-next
+
+{
+
+    right: -25px;
+
+}
+
+[dir='rtl'] .slick-next
+
+{
+
+    right: auto;
+
+    left: -25px;
+
+}
+
+.slick-next:before
+
+{
+
+    content: '→';
+
+}
+
+[dir='rtl'] .slick-next:before
+
+{
+
+    content: '←';
+
+}
+
+
+/* Dots */
+
+.slick-dotted.slick-slider
+
+{
+
+    margin-bottom: 30px;
+
+}
+
+
+.slick-dots
+
+{
+
+    position: absolute;
+
+    bottom: -25px;
+
+
+    display: block;
+
+
+    width: 100%;
+
+    padding: 0;
+
+    margin: 0;
+
+
+    list-style: none;
+
+
+    text-align: center;
+
+}
+
+.slick-dots li
+
+{
+
+    position: relative;
+
+
+    display: inline-block;
+
+
+    width: 20px;
+
+    height: 20px;
+
+    margin: 0 5px;
+
+    padding: 0;
+
+
+    cursor: pointer;
+
+}
+
+.slick-dots li button
+
+{
+
+    font-size: 0;
+
+    line-height: 0;
+
+
+    display: block;
+
+
+    width: 20px;
+
+    height: 20px;
+
+    padding: 5px;
+
+
+    cursor: pointer;
+
+
+    color: transparent;
+
+    border: 0;
+
+    outline: none;
+
+    background: transparent;
+
+}
+
+.slick-dots li button:hover,
+
+.slick-dots li button:focus
+
+{
+
+    outline: none;
+
+}
+
+.slick-dots li button:hover:before,
+
+.slick-dots li button:focus:before
+
+{
+
+    opacity: 1;
+
+}
+
+.slick-dots li button:before
+
+{
+
+    font-family: 'slick';
+
+    font-size: 6px;
+
+    line-height: 20px;
+
+
+    position: absolute;
+
+    top: 0;
+
+    left: 0;
+
+
+    width: 20px;
+
+    height: 20px;
+
+
+    content: '•';
+
+    text-align: center;
+
+
+    opacity: .25;
+
+    color: var(--offblack);
+
+
+    -webkit-font-smoothing: antialiased;
+
+    -moz-osx-font-smoothing: grayscale;
+
+}
+
+.slick-dots li.slick-active button:before
+
+{
+
+    opacity: .75;
+
+    color: var(--offblack);
+
+}
+
+
+.sponsor-container{
+  align-items: center !important;
+  display: flex !important;
+}
+
+#First{
+  display: block;
+}
+.meditabs, .meditabs, .timelinecardtabs, .timelinepersontabs{
+  display: none;
+}
+.timelinepersontabs{
+  margin-bottom: var(--big-margin);
+}
+.timelinecardtabs{
+  max-width: 100% !important;
+}
+
+
+.blockquote-wrapper {
+  display: flex;
+  height: fit-content;
+}
+
+/* Blockquote main style */
+.blockquote {
+   position: relative;
+   font-style: sans-serif;
+   max-width: 80%;
+   margin: 40px auto !important;
+   align-self: center;
+}
+
+/* Blockquote header */
+.blockquote .block-h2 {
+   font-style: italic;
+   position: relative; /* for pseudos */
+   color: var(--offblack);
+   font-size: 2.8rem !important;
+   font-weight: normal;
+   line-height: 1;
+   font-size: larger;
+   margin: 0;
+   border: solid 5px var(--text-primary) !important;
+   border-radius:20px;
+   padding: 25px;
+}
+
+/* Blockquote right double quotes */
+.blockquote .block-h2:after {
+   content:"";
+   position: absolute;
+   border: 5px solid var(--text-primary);
+   border-radius: 0 50px 0 0;
+   width: 60px;
+   height: 60px;
+   bottom: -60px;
+   left: 50px;
+   border-bottom: none;
+   border-left: none;
+   z-index: 3; 
+}
+
+.blockquote .block-h2:before {
+   content:"";
+   position: absolute;
+   width: 80px;
+   border: 5px solid var(--ourbeige);
+   bottom: -5px;
+   left: 50px;
+   z-index: 2;
+}
+
+/* increase header size after 600px */
+@media all and (min-width: 600px) {
+   .blockquote h1 {
+       font-size: 3rem;
+       line-height: 1.2;
+  }
+
+}
+
+/* Blockquote subheader */
+.blockquote .block-h4{
+   position: relative;
+   color: var(--offblack);
+   font-size: 1.3rem !important; 
+   font-weight: 400;
+   line-height: 1.2;
+   font-size: medium;
+   margin: 0;
+   padding-top: 15px;
+   z-index: 1;
+   margin-left:150px;
+   padding-left:12px;
+}
+
+
+.blockquote h4:first-letter {
+ margin-left:-12px;
+}
+
+/* #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);
+  padding:0 10px;
+  font-size:20px;
+  position:relative; 
+  top:-28px;
+} */
+.corner{
+  height:36px;
+  width:36px;
+  border-radius:50%;
+  border:4px solid var(--ourbeige);
+  transform:rotate(-45deg);  
+  position:absolute;
+  background:var(--ourbeige);
+}
+
+#left_top{
+  top:-16px;
+  left:-16px;
+  border-width: 4px;
+  border-color:transparent transparent var(--text-primary) transparent;
+}
+#right_top{
+  top:-16px;
+  right:-16px;
+  border-width: 4px;
+  border-color:transparent transparent transparent var(--text-primary);
+}
+#left_bottom{
+  bottom:-16px;
+  left:-16px;
+  border-width: 4px;
+  border-color:transparent var(--text-primary) transparent transparent ;
+}
+#right_bottom{
+  bottom:-16px;
+  right:-16px;
+  border-width: 4px;
+  border-color:var(--text-primary) transparent transparent transparent;
+}
+
+
+
+
+/* Blockquote main style */
+.blockquotex {
+   position: relative;
+   font-style: sans-serif;
+   font-weight: 800;
+   color: var(--offblack);
+   padding: 30px 0;
+   width: 100%;
+   max-width: 80%;
+   z-index: 1;
+   margin: 80px auto;
+   align-self: center;
+   border-top: solid 1px var(--text-primary);
+   border-bottom: solid 1px var(--text-primary);
+}
+
+/* Blockquote header */
+.blockquotex h1 {
+   position: relative;
+   color: var(--offblack);
+   font-size: 20px !important;
+   font-weight: 800;
+   line-height: 1;
+   margin: 0;
+}
+
+/* Blockquote right double quotes */
+.blockquotex:after {
+   position: absolute;
+   content: "”";
+   color: var(--accent-primary);
+   font-size: 5rem;
+   line-height: 0;
+   bottom: -25px;
+   right: 30px;
+}
+
+/* increase header size after 600px */
+@media all and (min-width: 600px) {
+   .blockquotex h1 {
+       font-size: 60px;
+  }
+
+}
+
+/* Blockquote subheader */
+.blockquotex h4 {
+   position: relative;
+   color: var(--text-primary);
+   font-size: 1rem;
+   font-weight: normal;
+   line-height: 1;
+   margin: 0;
+   padding-top: 20px;
+   z-index: 1;
+}
+
+.figure-img{
+  padding: 30px 10px;
+  border-radius: 10px;
+  margin: 10px 0 !important;
+}
+
+.personalstyleone{
+  padding-left: 10px;
+  padding-top: 40px;
+  padding-bottom: 40px;
+  padding-right: 10px;
+  width: 100%;
+  background-color: var(--text-primary);
+  color: var(--ourbeige);
+  border-radius: 10px;
+  margin-bottom: 50px;
+  margin-top: 50px;
+}
+
+.react-flow__node-mindmap {
+  background: var(--ourbeige);
+  border-radius: 2px;
+  border: 1px solid transparent;
+  padding: 2px 5px;
+  font-weight: 700;
+}
+
+.diagram-hp{
+  height: 300px; 
+  width: 100%;
+}
+
+.markmap-link {
+  fill: none;
+}
+
+.markmap-node > circle {
+  fill: var(--background);
+}
+
+
+.mindmap {
+  position:relative;
+  top: 1vw;
+  left: 0;
+  right: 0;
+  width: auto;
+  height: auto;
+  margin: 0 auto;
+  padding: calc(var(--node-size) / 2);
+  text-align: center;
+  white-space: nowrap;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+ .mindmap:before {
+  content: '';
+  display: inline-block;
+  vertical-align: middle;
+  height: 100%;
+  width: 0;
+}
+
+ .node {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  height: var(--node-size);
+  width: calc(var(--node-size) * 2);
+  margin: 0.25vw 0;
+  text-align: center;
+  line-height: var(--node-size);
+  border: 0.1vw solid var(--text-primary);
+  border-radius: 5%;
+  background: var(--background);
+  cursor: pointer;
+  font-size: small;
+  -webkit-transition: all .2s ease;
+  transition: all .2s ease;
+  z-index: 5;
+}
+
+
+.node_root {
+  height: calc(var(--node-size) * 2);
+  width: calc(var(--node-size) * 2);
+  border: 0;
+  border: 0.1vw solid var(--text-primary);
+  border-radius: 50%;
+  text-align: center;
+  line-height: calc(var(--node-size) * 2);
+  font-size: 1.1em;
+}
+
+
+
+.node_root img{
+  width: calc(var(--node-size) * 1.5);
+  height: calc(var(--node-size) * 1.5);
+  -o-object-fit: cover;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+
+
+
+.children {
+  position: relative;
+  list-style: none;
+  text-align: left;
+  padding: 0 0 0 6px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+
+.children:before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: -2px;
+  width: 8px;
+  border-top: 1px solid var(--text-primary);
+}
+
+.children_item {
+  position: relative;
+  padding: 0 0 0 10px;
+  border-left: 1px solid var(--text-primary);
+}
+
+.children_item:first-child,
+.children_item:last-child {
+  border-left: 1px solid transparent;
+}
+
+.children_item:before {
+  content: '';
+  width: 10px;
+  border-top: 1px solid var(--text-primary);
+  position: absolute;
+  top: 50%;
+  left: 0;
+}
+.node_text {
+  overflow: hidden;
+  z-index: 7; 
+  max-width: inherit;
+}
+.children_item:first-child:before {
+  left: -1px;
+  bottom: 0;
+  width: 11px;
+  border-radius: 4px 0 0 0;
+  border-left: 1px solid var(--text-primary);
+}
+
+.children_item:last-child:before {
+  left: -1px;
+  top: 0;
+  width: 11px;
+  bottom: 50%;
+  border-radius: 0 0 0 4px;
+  border: 0;
+  border-left: 1px solid var(--text-primary);
+  border-bottom: 1px solid var(--text-primary);
+}
+
+.children_item:first-child:last-child:before {
+  top: 50%;
+  bottom: auto;
+  border: 0;
+  border-radius: 0;
+  border-top: 1px solid var(--text-primary);
+}
+
+.children_leftbranch,
+.children_leftbranch .children {
+  direction: rtl;
+  text-align: right;
+  padding: 0 6px 0 0;
+}
+
+.children_leftbranch:before,
+.children_leftbranch .children:before {
+  left: auto;
+  right: -2px;
+}
+
+.children_leftbranch .children_item {
+  padding: 0 10px 0 0;
+  border: 0;
+  border-right: 1px solid var(--text-primary);
+}
+
+.children_leftbranch .children_item:first-child,
+.children_leftbranch .children_item:last-child {
+  border-right: 1px solid transparent;
+}
+
+.children_leftbranch .children_item:before {
+  top: 50%;
+  left: auto;
+  right: 0;
+}
+
+
+.children_leftbranch .children_item:first-child:before {
+  right: -1px;
+  border: 0;
+  border-radius: 0 4px 0 0;
+  border-top: 1px solid var(--text-primary);
+  border-right: 1px solid var(--text-primary);
+}
+
+.children_leftbranch .children_item:last-child:before {
+  right: -1px;
+  top: 0;
+  bottom: 50%;
+  border-radius: 0 0 4px 0;
+  border: 0;
+  border-right: 1px solid var(--text-primary);
+  border-bottom: 1px solid var(--text-primary);
+}
+
+.children_leftbranch .children_item:first-child:last-child:before {
+  top: 50%;
+  bottom: auto;
+  border: 0;
+  border-radius: 0;
+  border-top: 1px solid var(--text-primary);
+}
+
+
+
+#L1, #R1{
+  line-height: calc(var(--node-size) / 4);
+  text-align: center;
+  vertical-align: middle;
+  padding-top: 15px;
+}
+
+
+/* #sidebarbox{
+  visibility: visible !important;
+  background-color: red !important;
+  width: 16.66666667% !important
+} */
+
+ div.timeline-item.moretop div div.row.align-items-center div.col p{
+  text-align: left;
+ }
+ 
+
+
+
+/* 
+========================
+      BUTTONS
+========================
+*/
+button span {
+  margin: auto;
+}
+button {
+  margin-top: var(--simple-margin) !important;
+  margin-bottom: var(--simple-margin) !important;
+  border-radius: var(--border-radius) !important;
+  cursor: pointer; 
+  text-align: center;
+}
+ .btn1{
+  padding: var(--button-padding) var(--small-padding) !important;
+} 
+.btn1:hover{
+  filter: brightness(0.7);
+}
+.boxy-1{
+  border-radius: 10px;
+}
+.btn-one {
+  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::before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  opacity: 0;
+  transition: all 0.3s;
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+  border-top-style: solid;
+  border-bottom-style: solid;
+  border-top-color: rgba(255, 255, 255, 0.5);
+  border-bottom-color: rgba(255, 255, 255, 0.5);
+  transform: scale(0.1, 1);
+}
+
+.btn-one::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  transition: all 0.3s;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.btn-one:hover::after {
+  opacity: 0;
+  transform: scale(0.1, 1);
+}
+
+.tabbutton{
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.backtotop {
+  place-self: end; 
+  /* visual styling */
+  text-decoration: none;
+  padding: 10px;
+  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 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

+$background: #E4FFF7;
+
+@function textShadow($precision, $size, $color){
+  $value: null;
+  $offset: 0;
+  $length: $size * calc(1 / $precision) - 1;
+
+  @for $i from 0 through $length {
+    $offset: $offset + $precision;
+    $shadow: $offset + px $offset + px $color;
+    $value: append($value, $shadow, comma);
+  }
+
+  @return $value;
+}
+
+.playful span {
+  position: relative;
+  color: #850F78;
+  text-shadow: textShadow(0.25, 6, #ca17b6);
+  animation: scatter 1.75s infinite;
+}
+
+.playful span:nth-child(2n) {
+  color: #F57D22;
+  text-shadow: textShadow(0.25, 6, #f8a86b);
+  animation-delay: 0.3s;
+}
+
+.playful span:nth-child(3n) {
+  color: #F4CC1E;
+  text-shadow: textShadow(0.25, 6, #f8dd67);
+  animation-delay: 0.15s;
+}
+
+.playful span:nth-child(5n) {
+  color: #5c68ea;
+  text-shadow: textShadow(0.25, 6, #A0A7F3);
+  animation-delay: 0.4s;
+}
+
+.playful span:nth-child(7n), .playful span:nth-child(11n) {
+  color: #bc15aa;
+  text-shadow: textShadow(0.25, 6, #ff1ce4);
+  animation-delay: 0.25s;
+}
+
+@keyframes scatter {
+  0% {
+    top: 0;
+  }
+  50% {
+    top: -10px;
+  }
+  100% {
+    top: 0;
+  }
+}
+
+
+
+.smoke span {
+  display: inline-block;
+  text-shadow: 0 0 0 whitesmoke;
+  animation: smoky 5s 3s both;
+}
+
+.smoke span:nth-child(even){
+  animation-name: smoky-mirror;
+}
+
+@keyframes smoky {
+  60% {
+    text-shadow: 0 0 40px whitesmoke;
+  }
+  to {
+    transform:
+      translate3d(15rem,-8rem,0)
+      rotate(-40deg)
+      skewX(70deg)
+      scale(1.5);
+    text-shadow: 0 0 20px whitesmoke;
+    opacity: 0;
+  }
+}
+
+@keyframes smoky-mirror {
+  60% {
+    text-shadow: 0 0 40px whitesmoke; }
+  to {
+    transform:
+      translate3d(18rem,-8rem,0)
+      rotate(-40deg) 
+      skewX(-70deg)
+      scale(2);
+     text-shadow: 0 0 20px whitesmoke;
+    opacity: 0;
+  }
+}
+
+@for $item from 1 through 21 {
+  span:nth-of-type(#{$item}){ 
+    animation-delay: #{(3 + (calc($item / 10)))}s; 
+  }
+} 
+
+
+
+$size: 6;
+#gallery {
+  display: grid;
+  height: calc(100vh - 10px);
+  grid-template: repeat($size,   1fr) / repeat($size, 1fr);
+  grid-gap: 0.5em;
+  @media (max-width: 800px) {
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    justify-content: center;
+    & > div {
+      width: 48%;
+      margin: 1%;
+      @media (max-width: 350px) {
+        width: 98%;
+      }
+    }
+  }
+  & > div {
+    //Grid Structure
+    &:nth-child(#{$size}n + 1) {
+      grid-column: span 2;
+      grid-row: span 2;
+    }
+    &:nth-child(2) {
+      grid-column: span 3;
+      grid-row: span 3;
+    }
+    &:nth-child(4) {
+      grid-column: span 1;
+      grid-row: span 2;
+    }
+    & > a {
+      opacity: 0;
+      position: absolute;
+      color: var(--offblack);
+      background-color: var(--offblack);
+      font: bold 4em "Helvetica";
+      $shadow: 5px var(--ourbeige);
+      text-shadow: 0 -1px $shadow, -1px 0px $shadow, 0 1px $shadow,
+        1px 0px $shadow;
+      padding: 2rem;
+      mix-blend-mode: difference;
+      width: 100%;
+      height: 100%;
+      transition: all ease 1s;
+    }
+    & > img {
+      width: 100%;
+      min-height: 100%;
+      transition: all ease 1s;
+    }
+
+    
+  }
+  & > div {
+    overflow: hidden;
+    position: relative;
+    box-shadow: 0 2px 8px 0 rgba(var(--offblack), 0.2), 0 3px 20px 0 rgba(var(--offblack), 0.19);
+  }
+  div,
+  a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-decoration: none;
+  }
+}
+//
+// lightbox
+//
+[id^="lightbox-"] {
+  &:target {
+    opacity:1;
+    pointer-events:inherit;
+    img{
+      filter:blur(0);
+    }
+  }
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(black, 0.5);
+  display: flex;
+  opacity:0;
+  transition: opacity 450ms ease-in-out;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  .content {
+    max-width: 90%;
+    position: relative;
+    color: var(--ourbeige);
+    &:hover > a.close {
+      opacity: 1;
+      transform: scale(1, 1);
+    }
+    &:hover > .title {
+      opacity: 1;
+      transform: translateY(-3px); //Fix extra line at end
+      &::after{
+        opacity:1;
+      }
+    }
+    & > * {
+      transition: all 450ms ease-in-out;
+    }
+  }
+  .title {
+    display: block;
+    margin: 0;
+    padding: 1em;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    transform: translateY(50%);
+    font-size:1.5em;
+    opacity:0;
+    &::after{
+      content: ' ';
+      background-color: rgba(black, 0.4);
+      bottom:0;
+      left:0;
+      height:100%;
+      width:100%;
+      position:absolute;
+      transition: all 350ms ease-in-out 250ms;
+      opacity:0;
+      transform-origin:bottom;
+      mix-blend-mode: soft-light;
+    }
+  }
+  img {
+    max-height: 90vh;
+    max-width: 100%;
+    margin: 0;
+    padding: 0;
+    filter: blur(50px);
+  }
+  a.close {
+    width: 2em;
+    height: 2em;
+    position: absolute;
+    right: 0;
+    top: 0;
+    background-color: rgba(black, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transform: scale(0, 0);
+    opacity: 0;
+    transform-origin: right top;
+    text-decoration:none;
+    color:var(--ourbeige);
+    &::after {
+      content: "X";
+    }
+  }
+}
+
+
+.fancy {
+  position: relative;
+  white-space: nowrap;
+  &:after {
+    --deco-height: 0.3125em;
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: calc(var(--deco-height) * -0.625);
+    height: var(--deco-height);
+    background-image: url("../components/data/stroke.svg"); 
+    background-size: auto 100%;
+    background-repeat: round;
+    background-position: 0em;
+  }
+}
+
+.lines {
+  $color: #59c1fe;
+  position: fixed;
+  width: 100vw;
+  height: 4em;
+  background: linear-gradient(rgba($color, 0.2) 20%, $color 40%, $color 60%, rgba($color, 0.2) 80%);
+  background-size: 1px 0.5em;
+  box-shadow: 0 0 1em rgba($color, 0.4);
+  transform: translateY(-1em);
+  left: 0;
+}
+
+/* STROKE TEXT */
+$stroke: #111827;
+$shadow: #bc15aa;
+@mixin stroke-width($property) {
+	-webkit-text-stroke-width: $property;
+	-moz-text-stroke-width: $property;
+}
+
+@mixin stroke-color($property) {
+	-webkit-text-stroke-color: $property;
+	-moz-text-stroke-color: $property;
+}
+.stroke {
+	@include stroke-width(2px);
+	@include stroke-color($stroke);
+	color: transparent;
+  font-size: 5vw;
+}
+.shadow-stroke {
+	text-shadow: 0.25vw 0.25vw $shadow;
+}
+
+
+
+/* Main Styles */
+.button {
+	display: block;
+	background-color: var(--accent-primary);
+	width: 300px;
+	height: 100px;
+	line-height: 100px;
+	margin: auto;
+	color: var(--ourbeige);
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	cursor: pointer;
+	overflow: hidden;
+	border-radius: 5px;
+	box-shadow: 0 0 20px 0 rgba(0,0,0,.3);
+	transition: all #{"0.25s"} cubic-bezier(0.310, -0.105, 0.430, 1.400);
+	
+	.but-span ,
+	.icon {
+		display: block;
+		height: 100%;
+		text-align: center;
+		position: absolute;
+		top: 0;
+	}
+	
+	.but-span {
+		width: 72%;
+		line-height: inherit;
+		font-size: 22px;
+		text-transform: uppercase;
+		left: 0;
+		transition: all #{"0.25s"} cubic-bezier(0.310, -0.105, 0.430, 1.400);
+		
+		&:after {
+			content: '';
+			background-color: var(--text-primary);
+			width: 2px;
+			height: 70%;
+			position: absolute;
+			top: 15%;
+			right: -1px;
+		}
+	}
+	
+	.icon {
+		width: 28%;
+		right: 0;
+		transition: all #{"0.25s"} cubic-bezier(0.310, -0.105, 0.430, 1.400);
+		
+		.fa {
+			font-size: 30px;
+			vertical-align: middle;
+			transition: all #{"0.25s"} cubic-bezier(0.310, -0.105, 0.430, 1.400), height #{"0.25s"} ease;
+		}
+		
+		.fa-remove {
+			height: 36px;
+		}
+		
+		.fa-check {
+			display: none;
+		}
+	}
+	
+	&.success,
+	&:hover {
+		
+		.but-span  {
+			left: -72%;
+			opacity: 0;
+		}
+		
+		.icon {
+			width: 100%;
+			
+			.fa {
+				font-size: 45px;
+			}
+		}
+	}
+	
+	&.success {
+		background-color: #27ae60;
+		
+		.icon {
+			
+			.fa-remove {
+				display: none;
+			}
+			
+			.fa-check {
+				display: inline-block;
+			}
+		}
+	}
+	
+	&:hover {
+		opacity: .9;
+		
+		.icon .fa-remove {
+			height: 46px;
+		}
+	}
+	
+	&:active {
+		opacity: 1;
+	}
+}
+
+.icon{
+	cursor: pointer;
+	position: relative;
+	display: inline-block;
+	width: 60px;
+	height: 60px;
+	margin-left: 60px/5;
+	margin-right: 60px/5;
+	border-radius: 60px*0.5;
+	overflow: hidden;
+	&::before, &::after{
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 100%;
+		width: 100%;
+		transition: all 0.25s ease;
+		border-radius: 60px*0.5;
+	}
+	i{
+		position: relative;
+		color: var(--ourbeige);
+		font-size: 60px/2;
+		margin-top: 60px/4;
+		transition: all 0.25s ease;
+	}
+}
+
+.icon-fill{
+	&::before{
+		transition-duration: 0.5s;
+		box-shadow: inset 0 0 0 1px green;
+	}
+	&:hover::before{
+		box-shadow: inset 0 0 0 60px green;
+	}
+}
+
+.icon-enter{
+	&::after{
+		box-shadow: inset 0 0 0 1px orange;
+	}
+	&::before{
+		border-radius: 0;
+		margin-left: -100%;
+		box-shadow: inset 0 0 0 60px orange;
+	}
+	&:hover::before{
+		margin-left: 0; 
+	}
+}
+
+.icon-expand{
+	&::after{
+		box-shadow: inset 0 0 0 1px red;
+	}
+	&::before{
+		background: red;
+		box-shadow: inset 0 0 0 60px $background;
+	}
+	&:hover::before{
+		box-shadow: inset 0 0 0 1px $background;
+	}
+}
+
+.icon-collapse{
+	&::before{
+		border-radius: 0;
+	}
+	&:hover::before{
+		box-shadow: 
+		inset 0 60px/2 0 0 green,
+		inset 0 60px/-2 0 0 green;
+	}
+	&::after{
+		box-shadow: inset 0 0 0 1px green;
+	}
+}
+
+.icon-rotate{
+	box-shadow: inset 0 0 0 1px purple;
+	&::after, &::before{
+		border: 0px solid transparent;
+	}
+	&:hover::before{
+		transition:
+			border-top-width 0.3s ease,
+			border-top-color 0.3s ease;
+		border-width: 60px;
+		border-top-color: purple;
+	}
+	&:hover::after{
+		transition:
+			border-left-width 0.3s ease,
+			border-left-color 0.3s ease;
+		border-width: 60px;
+		border-left-color: purple;
+	}
+	&:hover{
+		transition: background 0.001s ease 0.3s;
+		background: purple;
+	}
+	i{
+		z-index: 1;
+	}
+}
+
+.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 { 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 { Header } from "../components/Header.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 { useEffect} from "react";
-import Villbuttonrow from "../components/Villagebuttons.tsx";
-import Sidebar from "../components/Sidebar.tsx";
-import "../../utils/highlight.js";
-/* import Sidebar from "../../components/Sidebar.tsx"; */
+import { Villbuttonrow } from "../components/Buttons.tsx";
+import "../utils/Highlight-functions.js";
+import "./LoadingScreen.css";
+import "./calendar.css"
+import { useLoading } from "../utils/LoadingContext.tsx";
+
 
 const App = () => {
-  /* // Dark Mode toggle 
-  const [isDarkMode, setIsDarkMode] = useState(true);
-  useEffect(() => {
-    document.body.className = isDarkMode ? 'dark-mode' : '';
-  }, [isDarkMode]); */
+  const { isLoading, setIsLoading } = useLoading(); // 2. Ladezustand hier verwenden
+
+
+  window.scrollTo(0, 0);
+
+//  const [isLoading, setIsLoading] = useState(true);
 
   const pathMapping = getPathMapping();
   const currentPath =
@@ -34,56 +47,81 @@ 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);
+    }, 1000); // Adjust the delay as needed, Update the loading state after 3 seconds
+
+    return () => {
+      console.log("Cleaning up timer");
+      clearTimeout(timer);  // Clear the timer on component unmount
+    };
+  }, []);
+
   return (
     <>
+    {isLoading ? (
+      <LoadingScreen />
+    ) : (
+
+    <>
+      
       {/* Navigation */}
-      <Navbar /* isDarkMode={isDarkMode} setIsDarkMode={setIsDarkMode} */ />
+      <Navbar />
 
       {/* Header and PageContent */}
       <Routes>
-        {Object.entries(pathMapping).map(
-          ([path, { navlist, title, lead, component: Component}]) => (
-            <Route
-              key={path}
-              path={path}
-              element={
-                <>
-                  <Header title={title || ""} lead={lead || ""} />
-                  {/* Page content */}
-                  <div className="container-fluid">
-                    <div className="row ">
-                      <div className="col-2 d-none d-lg-block"> 
-                        <div className="sticky-top sidebar">
-                           <Sidebar nums={navlist || [""]}></Sidebar>
-                        </div>
-                      </div>
-                      <div className="col">
-                        <Component />
-                        <Villbuttonrow/>
-                      </div>
-                      <div className="col-1 d-none d-lg-block" >
-                        {/* <!-- empty so far --> */}
-                        
-                      </div>
+        {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>
+                    <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>
+            </>
+          }
+        />
 
-                  {/* End page content */}
-                  
-
-                </>
-              }
-            />
-          ),
-        )}
         <Route
           path="*"
           element={
             <>
-              <Header
-                title="Not Found"
-                lead="The requested URL was not found on this server."
-              />
               <NotFound />
             </>
           }
@@ -91,10 +129,11 @@ const App = () => {
       </Routes>
 
       {/* Footer */}
-      {/* MUST mention license AND have a link to team wiki's repository on gitlab.igem.org */}
       <Footer />
+      </>
+      )}
     </>
   );
 };
 
-export default App;
+export default App;
\ No newline at end of file

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

+#LoadingScreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #b5ade6;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+    animation: fadeInOut 5s forwards;
+}
+
+.custom-animation {
+    width: 150px; 
+    height: 150px; 
+    animation: pulse 2s infinite; /* Apply the pulsing animation */
+}
+
+@keyframes pulse {
+    0%, 100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.2);
+    }
+}
+
+@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