From d06f7e2bb930cd3be5805bdf43bb7091c8889201 Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <liliana.sanfilippo@uni-bielefeld.de>
Date: Sun, 29 Sep 2024 18:32:34 +0200
Subject: [PATCH] var(--offblack)

---
 src/App/App.css                              |  48 ++--
 src/App/App.scss                             |   8 +-
 src/App/LandingPage.css                      |   4 +-
 src/App/Timelines.css                        |   8 +-
 src/App/mediarules.css                       |   2 +-
 src/components/Svgs.tsx                      |  54 ++--
 src/components/test.css                      |   4 +-
 src/contents/Contribution/BFH/bfh-menu.tsx   |   4 +-
 src/contents/Human Practices/HP svgs/hp3.tsx | 268 +++++++++----------
 src/contents/engineering.tsx                 |  10 +-
 src/contents/example.css                     |   2 +-
 src/data/legend.html                         |   2 +-
 12 files changed, 207 insertions(+), 207 deletions(-)

diff --git a/src/App/App.css b/src/App/App.css
index 06880909..fae8b5aa 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -177,7 +177,7 @@ a {
 
 
 code{
-  color:black !important;
+  color:var(--offblack) !important;
 }
 
 .doi{
@@ -208,7 +208,7 @@ code{
   padding: 0px 0px;
 }
 .sidebar>div>a>span:hover{
-  text-shadow: 5px 5px 15px black;
+  text-shadow: 5px 5px 15px var(--offblack) var(--offblack);
   transition: all 0.1s linear;
 }
 .sideitem{
@@ -333,7 +333,7 @@ table {
 }
 
 td, th {
-  border: 1px solid black;
+  border: 1px solid var(--offblack);
   text-align: left;
   padding: 8px;
 }
@@ -559,14 +559,14 @@ h2{
 .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;
 } 
 
@@ -586,7 +586,7 @@ h2{
   background-image: linear-gradient(#a0aec0, #a0aec0);
 }
 .v3:hover p {
-  color: #000;
+  color: var(--offblack);
   background-size: 0% 100%;
 }
 
@@ -700,13 +700,13 @@ footer a:hover {
   margin: auto; 
 }
 .village-style-button:hover{
-  box-shadow: 5px 5px 15px black !important;
+  box-shadow: 5px 5px 15px var(--offblack) !important;
 }
 .village-style-button h3{
   text-align: center !important;
   font-size: 10px;
   font-weight: bold;
-  color: #000;
+  color: var(--offblack);
 }
 .village-style-button img{
   max-width: 70% !important;
@@ -964,7 +964,7 @@ svg{
 }
 .spacer {
   height: 50vh;
-  background-color: #000;
+  background-color: var(--offblack);
 }
 
 .hello:hover {
@@ -977,12 +977,12 @@ svg{
   animation-iteration-count: infinite;
   animation-timing-function: ease-in-out;
   -webkit-text-stroke-width: 3px;
-  -webkit-text-stroke-color: black;
+  -webkit-text-stroke-color: var(--offblack);
 }
 .terminal-box{
   margin-top: 10px;
   margin-bottom: 10px;
-  background-color: black;
+  background-color: var(--offblack);
   border-radius: 10px;
   color: var(--ourbeige);
   padding-left: 30px;
@@ -1009,7 +1009,7 @@ svg{
   display: inline-flex;
   margin-top: 10px;
   margin-bottom: 10px;
-  background-color: black;
+  background-color: var(--offblack);
   border-radius: 10px;
   color: var(--ourbeige);
   padding-left: 30px;
@@ -1130,7 +1130,7 @@ svg{
   color: var(--ourbeige);
   height: 10vw;
   background-color: var(--text-primary) !important;
-  box-shadow: 3px 3px 10px black !important;
+  box-shadow: 3px 3px 10px var(--offblack) !important;
   border-radius: 50%;
   margin: 1vw;
 } 
@@ -1356,7 +1356,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
 }
 .tl-butt img:hover{
   cursor: pointer;
-  box-shadow: 3px 3px 10px black;
+  box-shadow: 3px 3px 10px var(--offblack);
 }
 /* Add animation (fade in the popup) */
 @-webkit-keyframes fadeIn {
@@ -1663,7 +1663,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
 			}
 			
 			.chart.vis-d3-maps-choropleth .map-key.mobile {
-				background: #0000;
+				background: var(--offblack)0;
 				position: static!important
 			}
 			
@@ -1683,7 +1683,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
 			.chart.vis-d3-maps-choropleth .map-key.map-key-mb,
 			.chart.vis-d3-maps-choropleth .map-key.map-key-mt,
 			.chart.vis-d3-maps-choropleth .map-key.mobile {
-				background: #0000;
+				background: var(--offblack)0;
 				padding: 0;
 				position: static!important
 			}
@@ -1716,7 +1716,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
 			.chart.vis-d3-maps-choropleth .dw-tooltip {
 				background: #fff;
 				border: 1px solid #f5f5f5;
-				box-shadow: 3px 3px 3px #0000001a;
+				box-shadow: 3px 3px 3px var(--offblack)0001a;
 				font-size: 11px;
 				max-width: 200px;
 				padding: 10px;
@@ -2607,7 +2607,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
 
     opacity: .25;
 
-    color: black;
+    color: var(--offblack);
 
 
     -webkit-font-smoothing: antialiased;
@@ -2622,7 +2622,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
 
     opacity: .75;
 
-    color: black;
+    color: var(--offblack);
 
 }
 
@@ -2670,7 +2670,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
 .blockquote .block-h2 {
    font-style: italic;
    position: relative; /* for pseudos */
-   color: black;
+   color: var(--offblack);
    font-size: 2.8rem !important;
    font-weight: normal;
    line-height: 1;
@@ -2718,7 +2718,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
 /* Blockquote subheader */
 .blockquote .block-h4{
    position: relative;
-   color: black;
+   color: var(--offblack);
    font-size: 1.3rem !important; 
    font-weight: 400;
    line-height: 1.2;
@@ -2787,7 +2787,7 @@ span{
    position: relative;
    font-style: sans-serif;
    font-weight: 800;
-   color: black;
+   color: var(--offblack);
    padding: 30px 0;
    width: 100%;
    max-width: 80%;
@@ -2801,7 +2801,7 @@ span{
 /* Blockquote header */
 .blockquotex h1 {
    position: relative;
-   color: black;
+   color: var(--offblack);
    font-size: 20px !important;
    font-weight: 800;
    line-height: 1;
@@ -3314,7 +3314,7 @@ div[class*="boxy"] {
   text-align: right;
 }
 .backtotop:hover{
-  box-shadow: 5px 5px 15px black;
+  box-shadow: 5px 5px 15px var(--offblack);
   color: var(--ourbeige) !important;
   transition: all 0.1s linear;
 }
diff --git a/src/App/App.scss b/src/App/App.scss
index 2555b64d..9b88352a 100644
--- a/src/App/App.scss
+++ b/src/App/App.scss
@@ -142,8 +142,8 @@ $size: 6;
     & > a {
       opacity: 0;
       position: absolute;
-      color: #000;
-      background-color: #000;
+      color: var(--offblack);
+      background-color: var(--offblack);
       font: bold 4em "Helvetica";
       $shadow: 5px #fff;
       text-shadow: 0 -1px $shadow, -1px 0px $shadow, 0 1px $shadow,
@@ -165,7 +165,7 @@ $size: 6;
   & > div {
     overflow: hidden;
     position: relative;
-    box-shadow: 0 2px 8px 0 rgba(#000, 0.2), 0 3px 20px 0 rgba(#000, 0.19);
+    box-shadow: 0 2px 8px 0 rgba(var(--offblack), 0.2), 0 3px 20px 0 rgba(var(--offblack), 0.19);
   }
   div,
   a {
@@ -623,7 +623,7 @@ figure.snip1113 figcaption {
 
 figure.snip1113 h3 {
   background-color: #ffffff;
-  color: #000000;
+  color: var(--offblack);
   font-size: 1.7em;
   width: 100%;
   padding: 5px 12px;
diff --git a/src/App/LandingPage.css b/src/App/LandingPage.css
index 70a51484..37f890a3 100644
--- a/src/App/LandingPage.css
+++ b/src/App/LandingPage.css
@@ -6,14 +6,14 @@
   transition: opacity 1200ms ease-out, transform 600ms ease-out,
   visibility 1200ms ease-out;
   will-change: opacity, visibility;
-  background-color: black;
+  background-color: var(--offblack);
 }
 
 .content-block.is-visible {
     opacity: 1;
     transform: none;
     visibility: visible;
-    background-color: black;
+    background-color: var(--offblack);
 }
 
 .landing-page-header .row .col{
diff --git a/src/App/Timelines.css b/src/App/Timelines.css
index 99951f4a..7cc898c6 100644
--- a/src/App/Timelines.css
+++ b/src/App/Timelines.css
@@ -127,7 +127,7 @@ background-size: 65% 120%;
   padding: 15px;
   font-size: 0.9rem;
   white-space: normal;
-  color: black;
+  color: var(--offblack);
   background: white; /* Soll white bleiben! */
 }
 
@@ -152,7 +152,7 @@ background-size: 65% 120%;
 button.tabbutton.Patient.active, button.tabbutton.All.active, 
 button.tabbutton.Industry.active, button.tabbutton.Academia.active, 
 button.tabbutton.Medical.active, .modulators.active, .inhalations.active{
-  border-color: black;
+  border-color: var(--offblack);
 }
 
 .colour-meta-tag{
@@ -258,7 +258,7 @@ button.tabbutton:nth-child(1), button.tabbutton:nth-child(6){
 }  
 /* Title design */  
 .timeline-item-content time {
-  color: black;
+  color: var(--offblack);
   font-size: 16px;
   font-weight: bold;
 }
@@ -382,7 +382,7 @@ position: relative;
   background-color: #fff ;
   padding: 10px;
   width: 10%;
-  border-right: #000;
+  border-right: var(--offblack);
   border-right-width: 2px;
 }
   .imageAtom{
diff --git a/src/App/mediarules.css b/src/App/mediarules.css
index b916dcf7..79f85686 100644
--- a/src/App/mediarules.css
+++ b/src/App/mediarules.css
@@ -209,7 +209,7 @@ svg text{
 .village-style-button{
     box-shadow: 1px 1px 1px gray;
     border-radius: 10px;
-    border-color: black;
+    border-color: var(--offblack);
     padding: 10px; 
 
 }
diff --git a/src/components/Svgs.tsx b/src/components/Svgs.tsx
index e4312037..b66f3a0d 100644
--- a/src/components/Svgs.tsx
+++ b/src/components/Svgs.tsx
@@ -692,13 +692,13 @@ export function Complex(){
      cy="641.6452"
      r="9" />
   <path
-     style={{fill:"none",fillOpacity:"1",stroke:"#000000",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
+     style={{fill:"none",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
      d="M 525.09492,662.08075 C 375.66161,714.42751 375.66161,714.42751 375.66161,714.42751"
      id="path89" />
      <ScrollLinkWithChild targetId="riboswitch">
   <text
      
-     style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",fill:"none",fillOpacity:"1",stroke:"#000000",strokeWidth:"0.326363",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
+     style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",fill:"none",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:"0.326363",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
      x="24.838236"
      y="650.23364"
      id="ribotext"
@@ -706,36 +706,36 @@ export function Complex(){
        x="24.838236"
        y="650.23364"
        id="ribotext"><tspan
-         style={{fill:"#000000"}}
+         style={{fill:"var(--offblack)"}}
          id="ribotext">Riboswitch</tspan></tspan></text>
          </ScrollLinkWithChild>
   <path
-     style={{fill:"#000000",fillOpacity:"1",stroke:"#000000",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
+     style={{fill:"var(--offblack)",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
      d="M 714.57654,286.73782 C 603.08853,373.95263 603.08853,373.95263 603.08853,373.95263"
      id="path90" />
   <path
-     style={{fill:"#000000",fillOpacity:"1",stroke:"#000000",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
+     style={{fill:"var(--offblack)",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
      d="M 1103.7358,196.5664 C 1273.6985,45.590255 1273.6985,45.590255 1273.6985,45.590255"
      id="path91" />
   <path
-     style={{fill:"#000000",fillOpacity:"1",stroke:"#000000",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
+     style={{fill:"var(--offblack)",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
      d="m 1379.6899,405.17969 c 155.4063,-8.16843 155.4063,-8.16843 155.4063,-8.16843"
      id="path92" />
   <path
-     style={{fill:"#000000",fillOpacity:"1",stroke:"#000000",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
+     style={{fill:"var(--offblack)",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
      d="m 1047.3061,690.69055 c 108.107,155.37789 108.107,155.37789 108.107,155.37789"
      id="path93" />
   <path
-     style={{fill:"#000000",fillOpacity:"1",stroke:"#000000",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
+     style={{fill:"var(--offblack)",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
      d="m 440.96587,225.1945 c -203.4394,37.82614 -203.4394,37.82614 -203.4394,37.82614"
      id="path94" />
   <path
-     style={{fill:"#000000",fillOpacity:"1",stroke:"#000000",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
+     style={{fill:"var(--offblack)",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
      d="M 372.73265,118.88705 C 234.25926,81.796787 234.25926,81.796787 234.25926,81.796787"
      id="path95" />
   <text
      
-     style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"none",fillOpacity:"1",stroke:"#000000",strokeWidth:"0.326363",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
+     style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"none",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:"0.326363",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
      x="24.838236"
      y="650.23364"
      id="stemlooptext"
@@ -743,11 +743,11 @@ export function Complex(){
        x="24.838236"
        y="650.23364"
        id="stemlooptext"><tspan
-         style={{fill:"#000000"}}
+         style={{fill:"var(--offblack)"}}
          id="stemlooptext">Stem Loop</tspan></tspan></text>
       <a onClick={() => goToPagesAndOpenTab('InvWesthoff', '/engineering?tab=')}>
             <text  
-         style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"#000000",fillOpacity:"1",stroke:"#000000",strokeWidth:"0.326363",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
+         style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"var(--offblack)",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:"0.326363",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
          x="24.838236"
          y="650.23364"
          id="rnabindingtext"
@@ -763,7 +763,7 @@ export function Complex(){
    {/* pegRNA Text */}
    <a onClick={() => goToPagesAndOpenTab('tab-pegrna', '/engineering?tab=')}>
   <text
-     style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial", whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"none",fillOpacity:"1",stroke:"#000000",strokeWidth:"0.326363",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
+     style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial", whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"none",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:"0.326363",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
      x="24.838236"
      y="650.23364"
      id="pegrnatext"
@@ -771,7 +771,7 @@ export function Complex(){
        x="24.838236"
        y="650.23364"
        id="pegrnatext"><tspan
-         style={{fill:"#000000"}}
+         style={{fill:"var(--offblack)"}}
          id="pegrnatext">pegRNA</tspan></tspan></text>
          </a>
   <g
@@ -780,7 +780,7 @@ export function Complex(){
       <a onClick={() => goToPagesAndOpenTab('tab-nikase', '/engineering?tab=')}>
     <text
        
-       style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"#000000",fillOpacity:"1",stroke:"#000000",strokeWidth:0.326363,strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
+       style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"var(--offblack)",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:0.326363,strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
        x="24.838236"
        y="650.23364"
        id="nikasetext"
@@ -792,7 +792,7 @@ export function Complex(){
   </g>
   <text
      
-     style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"#000000",fillOpacity:"1",stroke:"#000000",strokeWidth:0.326363,strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
+     style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"var(--offblack)",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:0.326363,strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
      x="24.838236"
      y="650.23364"
      id="linkertext"
@@ -802,7 +802,7 @@ export function Complex(){
        id="tspan12">Linker</tspan></text>
   <text
      
-     style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"none",fillOpacity:"1",stroke:"#000000",strokeWidth:"0.326363",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
+     style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"none",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:"0.326363",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
      x="24.838236"
      y="650.23364"
      id="text89-49"
@@ -810,11 +810,11 @@ export function Complex(){
        x="24.838236"
        y="650.23364"
        id="PEtext"><tspan
-         style={{fill:"#000000"}}
+         style={{fill:"var(--offblack)"}}
          id="PEtext">PE</tspan><tspan
          style={{fontSize:"65%",baselineShift:"super"}}
          id="PEtextlow">CO</tspan><tspan
-         style={{fill:"#000000"}}
+         style={{fill:"var(--offblack)"}}
          id="PEtext">-Mini RT</tspan></tspan></text>
 </svg>
       </>
@@ -865,7 +865,7 @@ export function EngineeringCycle(){
             id="path25"
            style={{strokeWidth:"15",strokeDasharray:"none",stroke:"#850f78",strokeOpacity:"1"}} />
         <text
-           style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
+           style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"var(--offblack)",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
            id="text31"
            transform="translate(5.6902194,-0.11551883)"><textPath
             xlinkHref="#path25"
@@ -891,7 +891,7 @@ export function EngineeringCycle(){
            style={{stroke:"#a0a7f3",strokeWidth:"15",strokeDasharray:"none",strokeOpacity:"1"}} />
         <text
            
-           style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"6",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
+           style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"var(--offblack)",fillOpacity:"1",stroke:"none",strokeWidth:"6",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
            id="text28"
            
            transform="translate(-0.03023506,-5.9602336)"><textPath
@@ -915,7 +915,7 @@ export function EngineeringCycle(){
            style={{strokeWidth:"15",strokeDasharray:"none",stroke:"#f57d22",strokeOpacity:"1"}} />
         <text
            
-           style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
+           style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"var(--offblack)",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
            id="text32"
            transform="translate(-5.7110315,1.7453243)"><textPath
             xlinkHref="#path24"
@@ -930,7 +930,7 @@ export function EngineeringCycle(){
          transform="matrix(2.8248588,0,0,2.8248588,-67.797781,-207.96977)" />
       <text
          
-         style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
+         style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"var(--offblack)",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
          id="text29"
          transform="translate(8.4052921,8.8553334)"><textPath
          xlinkHref="#path22"
@@ -985,7 +985,7 @@ export function EngineeringCycleZwei(){
        style={{strokeWidth:"15",strokeDasharray:"none",stroke:"#850f78",strokeOpacity:"1"}} />
     <text
       
-      style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
+      style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"var(--offblack)",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
       id="text31"
        transform="translate(5.6902194,-0.11551883)"><textPath
          id="textPath33">Learn<tspan
@@ -1010,7 +1010,7 @@ export function EngineeringCycleZwei(){
        style={{stroke:"#a0a7f3",strokeWidth:"15",strokeDasharray:"none",strokeOpacity:"1"}} />
     <text
       
-      style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"6",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
+      style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"var(--offblack)",fillOpacity:"1",stroke:"none",strokeWidth:"6",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
       id="text28"
        transform="translate(-0.03023506,-5.9602336)"><textPath
          id="textPath28">Test</textPath></text>
@@ -1032,7 +1032,7 @@ export function EngineeringCycleZwei(){
        style={{strokeWidth:"15",strokeDasharray:"none",stroke:"#f57d22",strokeOpacity:"1"}} />
     <text
       
-      style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
+      style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"var(--offblack)",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
       id="text32"
        transform="translate(-5.7110315,1.7453243)"><textPath
          id="textPath32">Build<tspan
@@ -1046,7 +1046,7 @@ export function EngineeringCycleZwei(){
      transform="matrix(2.8248588,0,0,2.8248588,876.19464,131.34384)" />
   <text
     
-    style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
+    style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"var(--offblack)",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
     id="text29"
      transform="translate(952.39772,348.16894)"><textPath
        id="textPath34">Design<tspan
diff --git a/src/components/test.css b/src/components/test.css
index 84750cf2..019364ee 100644
--- a/src/components/test.css
+++ b/src/components/test.css
@@ -18,7 +18,7 @@
   }
 
   .line {
-    stroke: black;
+    stroke: bvar(--offblack)lack;
   }
   
   .theLine {
@@ -78,7 +78,7 @@
   }
   
   #thirdCircle {
-    background-color: black;
+    background-color: var(--offblack);
     border-radius: 50%;
     height: 100px;
     width: 100px;
diff --git a/src/contents/Contribution/BFH/bfh-menu.tsx b/src/contents/Contribution/BFH/bfh-menu.tsx
index 5f5d1954..356ffaf5 100644
--- a/src/contents/Contribution/BFH/bfh-menu.tsx
+++ b/src/contents/Contribution/BFH/bfh-menu.tsx
@@ -2171,7 +2171,7 @@ export function MenuSVG(){
         style={{
           fill: "#850f78",
           fillOpacity: 1,
-          stroke: "#000000",
+          stroke: "var(--offblack)",
           strokeWidth: "32.6244",
           strokeDasharray: "none",
           strokeOpacity: 1
@@ -2225,7 +2225,7 @@ export function MenuSVG(){
           style={{
             fill: "#850f78",
             fillOpacity: 1,
-            stroke: "#000000",
+            stroke: "var(--offblack)",
             strokeWidth: "32.6244",
             strokeDasharray: "none",
             strokeOpacity: 1
diff --git a/src/contents/Human Practices/HP svgs/hp3.tsx b/src/contents/Human Practices/HP svgs/hp3.tsx
index 5f6dff36..6d634b4d 100644
--- a/src/contents/Human Practices/HP svgs/hp3.tsx	
+++ b/src/contents/Human Practices/HP svgs/hp3.tsx	
@@ -1394,7 +1394,7 @@ export const HP3new = () => (
         <path
           id="path64"
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -1404,7 +1404,7 @@ export const HP3new = () => (
         <path
           id="path66"
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -1414,7 +1414,7 @@ export const HP3new = () => (
         <path
           id="path68"
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -1426,7 +1426,7 @@ export const HP3new = () => (
             <path
               id="path78"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -1440,7 +1440,7 @@ export const HP3new = () => (
             <path
               id="path88"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -1454,7 +1454,7 @@ export const HP3new = () => (
             <path
               id="path98"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -1468,7 +1468,7 @@ export const HP3new = () => (
             <path
               id="path108"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -1482,7 +1482,7 @@ export const HP3new = () => (
             <path
               id="path118"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -1496,7 +1496,7 @@ export const HP3new = () => (
             <path
               id="path128"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -1510,7 +1510,7 @@ export const HP3new = () => (
             <path
               id="path138"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -1524,7 +1524,7 @@ export const HP3new = () => (
             <path
               id="path148"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -1538,7 +1538,7 @@ export const HP3new = () => (
             <path
               id="path158"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -1552,7 +1552,7 @@ export const HP3new = () => (
             <path
               id="path168"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -1566,7 +1566,7 @@ export const HP3new = () => (
             <path
               id="path178"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -1580,7 +1580,7 @@ export const HP3new = () => (
             <path
               id="path188"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -1594,7 +1594,7 @@ export const HP3new = () => (
             <path
               id="path198"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -1608,7 +1608,7 @@ export const HP3new = () => (
             <path
               id="path208"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -1622,7 +1622,7 @@ export const HP3new = () => (
             <path
               id="path218"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -1636,7 +1636,7 @@ export const HP3new = () => (
             <path
               id="path228"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -1664,7 +1664,7 @@ export const HP3new = () => (
         <path
           id="path354"
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -1674,7 +1674,7 @@ export const HP3new = () => (
         <path
           id="path356"
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -1684,7 +1684,7 @@ export const HP3new = () => (
         <path
           id="path358"
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -1694,7 +1694,7 @@ export const HP3new = () => (
         <path
           id="path360"
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -1704,7 +1704,7 @@ export const HP3new = () => (
         <path
           id="path362"
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -1714,7 +1714,7 @@ export const HP3new = () => (
         <path
           id="path364"
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -1724,7 +1724,7 @@ export const HP3new = () => (
         <path
           id="path366"
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -1792,7 +1792,7 @@ export const HP3new = () => (
                   fontFamily: "ArialMT",
                    
                   
-                  fill: "#000000",
+                  fill: "var(--offblack)",
                   fillOpacity: 1,
                   fillRule: "nonzero",
                   stroke: "none",
@@ -1825,7 +1825,7 @@ export const HP3new = () => (
                   fontFamily: "ArialMT",
                    
                   
-                  fill: "#000000",
+                  fill: "var(--offblack)",
                   fillOpacity: 1,
                   fillRule: "nonzero",
                   stroke: "none",
@@ -1858,7 +1858,7 @@ export const HP3new = () => (
                   fontFamily: "ArialMT",
                    
                   
-                  fill: "#000000",
+                  fill: "var(--offblack)",
                   fillOpacity: 1,
                   fillRule: "nonzero",
                   stroke: "none",
@@ -1891,7 +1891,7 @@ export const HP3new = () => (
                   fontFamily: "ArialMT",
                    
                   
-                  fill: "#000000",
+                  fill: "var(--offblack)",
                   fillOpacity: 1,
                   fillRule: "nonzero",
                   stroke: "none",
@@ -1924,7 +1924,7 @@ export const HP3new = () => (
                   fontFamily: "ArialMT",
                    
                   
-                  fill: "#000000",
+                  fill: "var(--offblack)",
                   fillOpacity: 1,
                   fillRule: "nonzero",
                   stroke: "none",
@@ -1957,7 +1957,7 @@ export const HP3new = () => (
                   fontFamily: "ArialMT",
                    
                   
-                  fill: "#000000",
+                  fill: "var(--offblack)",
                   fillOpacity: 1,
                   fillRule: "nonzero",
                   stroke: "none",
@@ -1990,7 +1990,7 @@ export const HP3new = () => (
                   fontFamily: "ArialMT",
                    
                   
-                  fill: "#000000",
+                  fill: "var(--offblack)",
                   fillOpacity: 1,
                   fillRule: "nonzero",
                   stroke: "none",
@@ -2023,7 +2023,7 @@ export const HP3new = () => (
                   fontFamily: "ArialMT",
                    
                   
-                  fill: "#000000",
+                  fill: "var(--offblack)",
                   fillOpacity: 1,
                   fillRule: "nonzero",
                   stroke: "none",
@@ -2056,7 +2056,7 @@ export const HP3new = () => (
                   fontFamily: "ArialMT",
                    
                   
-                  fill: "#000000",
+                  fill: "var(--offblack)",
                   fillOpacity: 1,
                   fillRule: "nonzero",
                   stroke: "none",
@@ -2089,7 +2089,7 @@ export const HP3new = () => (
                   fontFamily: "ArialMT",
                    
                   
-                  fill: "#000000",
+                  fill: "var(--offblack)",
                   fillOpacity: 1,
                   fillRule: "nonzero",
                   stroke: "none",
@@ -2164,7 +2164,7 @@ export const HP3new = () => (
         <path
           id="path64-44"
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -2174,7 +2174,7 @@ export const HP3new = () => (
         <path
           id="path66-4"
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -2184,7 +2184,7 @@ export const HP3new = () => (
         <path
           id="path68-4"
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -2196,7 +2196,7 @@ export const HP3new = () => (
             <path
               id="path78-17"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -2210,7 +2210,7 @@ export const HP3new = () => (
             <path
               id="path88-6"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -2224,7 +2224,7 @@ export const HP3new = () => (
             <path
               id="path98-8"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -2238,7 +2238,7 @@ export const HP3new = () => (
             <path
               id="path108-4"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -2252,7 +2252,7 @@ export const HP3new = () => (
             <path
               id="path118-5"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -2266,7 +2266,7 @@ export const HP3new = () => (
             <path
               id="path128-5"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -2280,7 +2280,7 @@ export const HP3new = () => (
             <path
               id="path138-3"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -2294,7 +2294,7 @@ export const HP3new = () => (
             <path
               id="path148-9"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -2308,7 +2308,7 @@ export const HP3new = () => (
             <path
               id="path158-3"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -2322,7 +2322,7 @@ export const HP3new = () => (
             <path
               id="path168-6"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -2336,7 +2336,7 @@ export const HP3new = () => (
             <path
               id="path178-8"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -2350,7 +2350,7 @@ export const HP3new = () => (
             <path
               id="path188-7"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -2364,7 +2364,7 @@ export const HP3new = () => (
             <path
               id="path198-43"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -2378,7 +2378,7 @@ export const HP3new = () => (
             <path
               id="path208-09"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -2392,7 +2392,7 @@ export const HP3new = () => (
             <path
               id="path218-4"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -2406,7 +2406,7 @@ export const HP3new = () => (
             <path
               id="path228-9"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -2433,7 +2433,7 @@ export const HP3new = () => (
         <path
           id="path354-2"
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -2443,7 +2443,7 @@ export const HP3new = () => (
         <path
           id="path356-4"
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -2453,7 +2453,7 @@ export const HP3new = () => (
         <path
           id="path358-77"
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -2463,7 +2463,7 @@ export const HP3new = () => (
         <path
           id="path360-5"
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -2473,7 +2473,7 @@ export const HP3new = () => (
         <path
           id="path362-4"
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -2483,7 +2483,7 @@ export const HP3new = () => (
         <path
           id="path364-8"
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -2493,7 +2493,7 @@ export const HP3new = () => (
         <path
           id="path366-1"
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -2532,7 +2532,7 @@ export const HP3new = () => (
                   fontFamily: "ArialMT",
                    
                   
-                  fill: "#000000",
+                  fill: "var(--offblack)",
                   fillOpacity: 1,
                   fillRule: "nonzero",
                   stroke: "none",
@@ -2566,7 +2566,7 @@ export const HP3new = () => (
                   fontFamily: "ArialMT",
                    
                   
-                  fill: "#000000",
+                  fill: "var(--offblack)",
                   fillOpacity: 1,
                   fillRule: "nonzero",
                   stroke: "none",
@@ -2600,7 +2600,7 @@ export const HP3new = () => (
                   fontFamily: "ArialMT",
                    
                   
-                  fill: "#000000",
+                  fill: "var(--offblack)",
                   fillOpacity: 1,
                   fillRule: "nonzero",
                   stroke: "none",
@@ -2634,7 +2634,7 @@ export const HP3new = () => (
                   fontFamily: "ArialMT",
                    
                   
-                  fill: "#000000",
+                  fill: "var(--offblack)",
                   fillOpacity: 1,
                   fillRule: "nonzero",
                   stroke: "none",
@@ -2668,7 +2668,7 @@ export const HP3new = () => (
                   fontFamily: "ArialMT",
                    
                   
-                  fill: "#000000",
+                  fill: "var(--offblack)",
                   fillOpacity: 1,
                   fillRule: "nonzero",
                   stroke: "none",
@@ -2702,7 +2702,7 @@ export const HP3new = () => (
                   fontFamily: "ArialMT",
                    
                   
-                  fill: "#000000",
+                  fill: "var(--offblack)",
                   fillOpacity: 1,
                   fillRule: "nonzero",
                   stroke: "none",
@@ -2736,7 +2736,7 @@ export const HP3new = () => (
                   fontFamily: "ArialMT",
                    
                   
-                  fill: "#000000",
+                  fill: "var(--offblack)",
                   fillOpacity: 1,
                   fillRule: "nonzero",
                   stroke: "none",
@@ -2766,7 +2766,7 @@ export const HP3new = () => (
                   fontFamily: "ArialMT",
                    
                   
-                  fill: "#000000",
+                  fill: "var(--offblack)",
                   fillOpacity: 1,
                   fillRule: "nonzero",
                   stroke: "none",
@@ -2800,7 +2800,7 @@ export const HP3new = () => (
                   fontFamily: "ArialMT",
                    
                   
-                  fill: "#000000",
+                  fill: "var(--offblack)",
                   fillOpacity: 1,
                   fillRule: "nonzero",
                   stroke: "none",
@@ -2834,7 +2834,7 @@ export const HP3new = () => (
                   fontFamily: "ArialMT",
                    
                   
-                  fill: "#000000",
+                  fill: "var(--offblack)",
                   fillOpacity: 1,
                   fillRule: "nonzero",
                   stroke: "none",
@@ -2908,7 +2908,7 @@ export const HP3new = () => (
         <path
           id="path64-44-1"
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -2918,7 +2918,7 @@ export const HP3new = () => (
         <path
           id="path66-4-9"
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -2928,7 +2928,7 @@ export const HP3new = () => (
         <path
           id="path68-4-6"
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -2940,7 +2940,7 @@ export const HP3new = () => (
             <path
               id="path78-17-3"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -2954,7 +2954,7 @@ export const HP3new = () => (
             <path
               id="path88-6-5"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -2968,7 +2968,7 @@ export const HP3new = () => (
             <path
               id="path98-8-4"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -2982,7 +2982,7 @@ export const HP3new = () => (
             <path
               id="path108-4-4"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -2996,7 +2996,7 @@ export const HP3new = () => (
             <path
               id="path118-5-6"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -3010,7 +3010,7 @@ export const HP3new = () => (
             <path
               id="path128-5-6"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -3024,7 +3024,7 @@ export const HP3new = () => (
             <path
               id="path138-3-7"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -3038,7 +3038,7 @@ export const HP3new = () => (
             <path
               id="path148-9-2"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -3052,7 +3052,7 @@ export const HP3new = () => (
             <path
               id="path158-3-6"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -3066,7 +3066,7 @@ export const HP3new = () => (
             <path
               id="path168-6-7"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -3080,7 +3080,7 @@ export const HP3new = () => (
             <path
               id="path178-8-3"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -3094,7 +3094,7 @@ export const HP3new = () => (
             <path
               id="path188-7-5"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -3108,7 +3108,7 @@ export const HP3new = () => (
             <path
               id="path198-43-1"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -3122,7 +3122,7 @@ export const HP3new = () => (
             <path
               id="path208-09-1"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -3136,7 +3136,7 @@ export const HP3new = () => (
             <path
               id="path218-4-5"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -3150,7 +3150,7 @@ export const HP3new = () => (
             <path
               id="path228-9-0"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -3162,7 +3162,7 @@ export const HP3new = () => (
         <path
           id="path354-2-4"
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -3172,7 +3172,7 @@ export const HP3new = () => (
         <path
           id="path356-4-8"
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -3182,7 +3182,7 @@ export const HP3new = () => (
         <path
           id="path358-77-0"
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -3192,7 +3192,7 @@ export const HP3new = () => (
         <path
           id="path360-5-4"
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -3202,7 +3202,7 @@ export const HP3new = () => (
         <path
           id="path362-4-2"
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -3212,7 +3212,7 @@ export const HP3new = () => (
         <path
           id="path364-8-9"
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -3222,7 +3222,7 @@ export const HP3new = () => (
         <path
           id="path366-1-6"
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -3261,7 +3261,7 @@ export const HP3new = () => (
                   fontFamily: "ArialMT",
                    
                   
-                  fill: "#000000",
+                  fill: "var(--offblack)",
                   fillOpacity: 1,
                   fillRule: "nonzero",
                   stroke: "none",
@@ -3295,7 +3295,7 @@ export const HP3new = () => (
                   fontFamily: "ArialMT",
                    
                   
-                  fill: "#000000",
+                  fill: "var(--offblack)",
                   fillOpacity: 1,
                   fillRule: "nonzero",
                   stroke: "none",
@@ -3329,7 +3329,7 @@ export const HP3new = () => (
                   fontFamily: "ArialMT",
                    
                   
-                  fill: "#000000",
+                  fill: "var(--offblack)",
                   fillOpacity: 1,
                   fillRule: "nonzero",
                   stroke: "none",
@@ -3363,7 +3363,7 @@ export const HP3new = () => (
                   fontFamily: "ArialMT",
                    
                   
-                  fill: "#000000",
+                  fill: "var(--offblack)",
                   fillOpacity: 1,
                   fillRule: "nonzero",
                   stroke: "none",
@@ -3393,7 +3393,7 @@ export const HP3new = () => (
                   fontFamily: "ArialMT",
                    
                   
-                  fill: "#000000",
+                  fill: "var(--offblack)",
                   fillOpacity: 1,
                   fillRule: "nonzero",
                   stroke: "none",
@@ -3427,7 +3427,7 @@ export const HP3new = () => (
                   fontFamily: "ArialMT",
                    
                   
-                  fill: "#000000",
+                  fill: "var(--offblack)",
                   fillOpacity: 1,
                   fillRule: "nonzero",
                   stroke: "none",
@@ -3461,7 +3461,7 @@ export const HP3new = () => (
                   fontFamily: "ArialMT",
                    
                   
-                  fill: "#000000",
+                  fill: "var(--offblack)",
                   fillOpacity: 1,
                   fillRule: "nonzero",
                   stroke: "none",
@@ -3495,7 +3495,7 @@ export const HP3new = () => (
                   fontFamily: "ArialMT",
                    
                   
-                  fill: "#000000",
+                  fill: "var(--offblack)",
                   fillOpacity: 1,
                   fillRule: "nonzero",
                   stroke: "none",
@@ -3529,7 +3529,7 @@ export const HP3new = () => (
                   fontFamily: "ArialMT",
                    
                   
-                  fill: "#000000",
+                  fill: "var(--offblack)",
                   fillOpacity: 1,
                   fillRule: "nonzero",
                   stroke: "none",
@@ -3563,7 +3563,7 @@ export const HP3new = () => (
                   fontFamily: "ArialMT",
                    
                   
-                  fill: "#000000",
+                  fill: "var(--offblack)",
                   fillOpacity: 1,
                   fillRule: "nonzero",
                   stroke: "none",
@@ -3661,7 +3661,7 @@ export const HP3new = () => (
           id="path64-4"
           
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -3672,7 +3672,7 @@ export const HP3new = () => (
           id="path66-5"
           
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -3683,7 +3683,7 @@ export const HP3new = () => (
           id="path68-0"
           
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -3696,7 +3696,7 @@ export const HP3new = () => (
             
               id="path78-1"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -3711,7 +3711,7 @@ export const HP3new = () => (
             
               id="path88-3"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -3726,7 +3726,7 @@ export const HP3new = () => (
             
               id="path98-6"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -3741,7 +3741,7 @@ export const HP3new = () => (
               id="path108-5"
               
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -3756,7 +3756,7 @@ export const HP3new = () => (
               id="path118-6"
               
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -3771,7 +3771,7 @@ export const HP3new = () => (
               id="path128-9"
               
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -3786,7 +3786,7 @@ export const HP3new = () => (
               id="path138-4"
               
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -3801,7 +3801,7 @@ export const HP3new = () => (
               id="path148-5"
               
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -3816,7 +3816,7 @@ export const HP3new = () => (
               id="path158-4"
               
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -3830,7 +3830,7 @@ export const HP3new = () => (
             <path
               id="path168-0"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -3844,7 +3844,7 @@ export const HP3new = () => (
             <path
               id="path178-6"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -3858,7 +3858,7 @@ export const HP3new = () => (
             <path
               id="path188-4"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -3872,7 +3872,7 @@ export const HP3new = () => (
             <path
               id="path198-4"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -3886,7 +3886,7 @@ export const HP3new = () => (
             <path
               id="path208-0"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -3900,7 +3900,7 @@ export const HP3new = () => (
             <path
               id="path218-9"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -3914,7 +3914,7 @@ export const HP3new = () => (
             <path
               id="path228-6"
               style={{
-                fill: "#000000",
+                fill: "var(--offblack)",
                 fillOpacity: 1,
                 fillRule: "evenodd",
                 stroke: "none",
@@ -3926,7 +3926,7 @@ export const HP3new = () => (
         <path
           id="path354-4"
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -3936,7 +3936,7 @@ export const HP3new = () => (
         <path
           id="path356-8"
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -3946,7 +3946,7 @@ export const HP3new = () => (
         <path
           id="path358-7"
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -3956,7 +3956,7 @@ export const HP3new = () => (
         <path
           id="path360-1"
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -3966,7 +3966,7 @@ export const HP3new = () => (
         <path
           id="path362-7"
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -3976,7 +3976,7 @@ export const HP3new = () => (
         <path
           id="path364-2"
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
@@ -3986,7 +3986,7 @@ export const HP3new = () => (
         <path
           id="path366-7"
           style={{
-            fill: "#000000",
+            fill: "var(--offblack)",
             fillOpacity: 1,
             fillRule: "evenodd",
             stroke: "none",
diff --git a/src/contents/engineering.tsx b/src/contents/engineering.tsx
index 4d75177c..e1352f4e 100644
--- a/src/contents/engineering.tsx
+++ b/src/contents/engineering.tsx
@@ -665,7 +665,7 @@ export function EngineeringCycleTab(){
               style={{strokeWidth:"15",strokeDasharray:"none",stroke:"#850f78",strokeOpacity:"1"}} /> 
            
          <text
-            style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
+            style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"var(--offblack)",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
             id="text31"
             transform="translate(5.6902194,-0.11551883)"><textPath
              xlinkHref="#path25"
@@ -692,7 +692,7 @@ export function EngineeringCycleTab(){
             style={{stroke:"#a0a7f3",strokeWidth:"15",strokeDasharray:"none",strokeOpacity:"1"}} />
          <text
             
-            style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"6",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
+            style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"var(--offblack)",fillOpacity:"1",stroke:"none",strokeWidth:"6",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
             id="text28"
             
             transform="translate(-0.03023506,-5.9602336)"><textPath
@@ -717,7 +717,7 @@ export function EngineeringCycleTab(){
             style={{strokeWidth:"15",strokeDasharray:"none",stroke:"#f57d22",strokeOpacity:"1"}} />
          <text
             
-            style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
+            style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"var(--offblack)",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
             id="text32"
             transform="translate(-5.7110315,1.7453243)"><textPath
              xlinkHref="#path24"
@@ -733,7 +733,7 @@ export function EngineeringCycleTab(){
           <a  typeof="button" className="svg-button" onClick={openElement({elementToOpen: "designing", classToHide: "cycletab"})}>
        <text
           
-          style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
+          style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"var(--offblack)",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
           id="text29"
           transform="translate(8.4052921,8.8553334)"><textPath
           xlinkHref="#path22"
@@ -749,7 +749,7 @@ export function EngineeringCycleTab(){
      cy="63.214005"
      r="20" />
   <text
-     style={{fontSize:"8px",lineHeight:"0",fontFamily:"Arial",opacity:"0.85",fill:"#000000",fillOpacity:"1",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",paintOrder:"fill markers stroke"}}
+     style={{fontSize:"8px",lineHeight:"0",fontFamily:"Arial",opacity:"0.85",fill:"var(--offblack)",fillOpacity:"1",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",paintOrder:"fill markers stroke"}}
      x="50.929825"
      y="66.676674"
      id="text1">
diff --git a/src/contents/example.css b/src/contents/example.css
index d15fb77f..e5866a38 100644
--- a/src/contents/example.css
+++ b/src/contents/example.css
@@ -19,7 +19,7 @@
 }
 
 
-.st196{fill:none;stroke:black;stroke-miterlimit:10;}
+.st196{fill:none;stroke:var(--offblack);stroke-miterlimit:10;}
 .st455{font-size:auto;}
 
 /* .{
diff --git a/src/data/legend.html b/src/data/legend.html
index e0f3c17d..7111ef7d 100644
--- a/src/data/legend.html
+++ b/src/data/legend.html
@@ -3,7 +3,7 @@
 		<rect width="170" height="13" style="fill: url(&quot;#g-gdqp&quot;); shape-rendering: crispEdges;">
 		</rect>
 		<g class="labels" aria-hidden="true" transform="translate(0,16)">
-			<text class="min" transform="translate(0,0)" style="text-anchor: start; dominant-baseline: hanging; fill: black; ">
+			<text class="min" transform="translate(0,0)" style="text-anchor: start; dominant-baseline: hanging; fill: var(--offblack); ">
 				<tspan x="0" dy="0">0</tspan>
 			</text>
 			<text class="max" transform="translate(170,0)">
-- 
GitLab