fix(cv): trim PL contact fields and center captcha container in sidebar

Remove DevOps Blog and Education entries from PL generalTitleSegment to
match EN structure. Set captcha container to fixed 245px width centered
in the sidebar for consistent alignment with the photo.

Made-with: Cursor

src/content/kamil.js

@@ -29,15 +29,13 @@ export const content_pl = [
       type: "generalTitleSegment",
       title: "Kamil Żuk",
       description_title: "O Mnie",
-      description: "Inżynier DevOps & Backend specjalizujący się w skalowalnych systemach, automatyzacji i architekturach rozproszonych (Kubernetes, CI/CD, Python). Doświadczony w budowaniu systemów produkcyjnych i platform wewnętrznych.",
+      description: "Inżynier DevOps & Backend z ponad 4-letnim doświadczeniem zawodowym w projektowaniu, automatyzacji i utrzymaniu infrastruktury produkcyjnej oraz pipeline'ów CI/CD w środowiskach enterprise i startupowych. Biegły w Kubernetes (bare metal i chmura), Terraform, Ansible, Jenkins, GitLab CI i Github Actions. Buduje serwisy backendowe w Pythonie (FastAPI, Django) z asynchronicznymi warstwami bazodanowymi, kolejkami zadań i integracjami z zewnętrznymi API. Doświadczony w praktykach SRE — analiza incydentów, obserwowalność (Splunk, Grafana, New Relic) i poprawa niezawodności. Prowadzi własny klaster K8S na Hetzner hostujący projekty poboczne, w tym pełnostackową platformę do analizy kryptowalut & giełdy akcji i rozproszony system obliczeniowy GPU.",
       image: MePng,
       content_language: "pl",
       content: {
         "E-mail": "zukkamil.44@gmail.com",
         "Telefon": "+48 570 688 112",
         "Git": "git.00x097.com/tbs093a",
-        "DevOps Blog": "blog.00x097.com/",
-        "Wykształcenie": "Wyższe / Inżynier",
       }
     },
     {
@@ -59,7 +57,7 @@ export const content_pl = [
       title: "Aptiv PLC - DevOps Engineer - od 11.02.2025",
       description: "Utrzymuję i rozwijam pipeline'y CI/CD (Jenkins, Wind River Studio, Github Actions) wspierające systemy oparte na mikroserwisach. Automatyzuję powtarzalne zadania inżynierskie w Pythonie i Bashu, ograniczając pracę manualną i zwiększając niezawodność wdrożeń. Pracuję z konteneryzacją (Docker, Kubernetes), zarządzaniem artefaktami (JFrog) oraz migracją repozytoriów i procesów CI/CD do środowiska Enterprise (Github).",
       image: WorkAptivLogo,
-      branchBorderColor: "#000000",
+      branchBorderColor: "#f84019",
       mainBorderColor: "#0464a8",
       content: [
         "Konserwacja & Ulepszanie pipeline'ów & job'ów CI/CD (Jenkins / Wind River Studio / Github Actions / Python / Bash / GitGerrit / Github)",
@@ -69,11 +67,17 @@ export const content_pl = [
         "Migracja repozytoriów Git (GitGerrit -> Github)",
         "Migracja procesów CI/CD do środowiska Enterprise (Wind River Studio -> Github Actions)"
       ],
+      contentGoals: [
+        "Przygotowanie skryptu cron do utrzymania JFrog Artifactory & Registry (Usuwanie przestarzałych pakietów, releaseów, synchronizacja pakietów, itp.)",
+        "Przygotowanie pipeline'ów utrzymaniowych do czyszczenia storage'ów w Wind River Studio (Likwidacja problemów z przepełnieniem storage'u)",
+        "Przygotowanie skryptów opartych na regex do automatycznej zamiany zasobów we wszystkich taskach pipeline'u w pojedynczym pipeline'ie (Likwidacja problemów z right-sizingiem w Wind River Studio)",
+        "Przygotowanie przydatnych modułów Python (auto-instalacja pakietów podczas wykonywania skryptu, operacje git (pull z submodułami), itp.)"
+      ],
     },
     {
       type: "mergeBranchSegment",
       tabs: 1,
-      branchBorderColor: "#000000",
+      branchBorderColor: "#f84019",
       mainBorderColor: "#0464a8",
     },
     {
@@ -97,6 +101,12 @@ export const content_pl = [
         "Automatyzacja konfiguracji serwerów (Ansible / Kubespray / Bash / Python)",
         "Ulepszanie / konserwacja job'ów (Jenkins)",
       ],
+      contentGoals: [
+        "Przygotowanie skryptów automatyzacji na Jenkinsie do utrzymania baz danych — czyszczenie, tworzenie, usuwanie baz zabezpieczonych hasłem admina (Jenkins + Bash & Python -> MariaDB & PostgreSQL)",
+        "Ulepszanie skryptów Ansible do auto-integracji Linuxa dla gotowego środowiska (Linux dot files + Ansible)",
+        "Przygotowanie manifestów Terraform dla infrastruktury jako kodu (Terraform + Azure)",
+        "Utrzymanie klastra Kubernetes na serwerach bare metal (Azure + Kubespray) — aktualizacja certyfikatów kubefile itp.",
+      ],
     },
     {
       type: "mergeBranchSegment",
@@ -126,6 +136,10 @@ export const content_pl = [
         "Automatyzacja Analizy & Rutynowych Zadań (Bash / Python)",
         "Analiza Zachowania Infrastruktury & Serwisów (Kubernetes / Linux / AEM)",
       ],
+      contentGoals: [
+        "Przygotowanie skryptu Python do filtrowania thread dumpów z wielu plików w celu lepszej analizy (Likwidacja problemów z analizą thread dumpów — thread dumpy grupowane i zliczane wg czasu / typów / statusów / nazw / itp. — na podstawie wielu plików thread dumpów w pojedynczym środowisku klienta)",
+        "Przygotowanie dashboardów Splunk do monitorowania zachowania infrastruktury i serwisów (Splunk)",
+      ],
     },
     {
       type: "mergeBranchSegment",
@@ -143,7 +157,7 @@ export const content_pl = [
       type: "workSubSegment",
       tabs: 1,
       title: "Techem GmbH - DevOps Engineer - od 30.05.2023 do 30.11.2023",
-      description: "Projektowałem i automatyzowałem workflow CI/CD dla testów powiązanych ze sprzętem, w tym procesy regresji i walidacji urządzeń IrDA. Budowałem pipeline'y do dostarczania reużywalnych pakietów Pythona wraz z prywatną dystrybucją paczek. Automatyzowałem raportowanie testów i walidację jakości kodu, zwiększając spójność wydań i ograniczając problemy integracyjne w procesie developmentu.",
+      description: "Projektowałem i automatyzowałem workflow CI/CD dla testów powiązanych ze sprzętem, w tym procesy regresji i walidacji urządzeń IrDA. Budowałem pipeline'y do dostarczania reużywalnych pakietów Pythona wraz z prywatną dystrybucją paczek. Automatyzowałem raportowanie testów i walidację jakości kodu, zwiększając spójność wydań i ograniczając problemy integracyjne w procesie developmentu. Przygotowanie aplikacji frontendowej do łatwiejszej kontroli Jenkinsa przez REST backdoor.",
       image: WorkTechemLogo,
       branchBorderColor: "#f87479",
       mainBorderColor: "#0464a8",
@@ -151,10 +165,19 @@ export const content_pl = [
         "Utrzymywanie Infrastruktury mikroserwisów (Docker / Docker Compose)",
         "Utrzymywanie Infrastruktury serwerów (Jenkins Agent - Windows / Jenkins Master - Linux)",
         "Automatyzacja konfiguracji serwerów (Ansible / Bash / Powershell)",
-        "Automatyzacja uruchamiania testów urządzeń IrDA na środowisku CI/CD (Regresja, Merge Request, Commit) (Jenkins CI/CD / Bash / Powershell / Python - TOX)",
+        "Automatyzacja uruchamiania testów urządzeń IrDA na środowisku CI/CD (Regresja, Merge Request, Commit) (Jenkins CI/CD / Bash / Powershell / Python - TOX -> https://tox.wiki/)",
-        "Automatyzacja bodwania i kolekcjonowania reużywalnych pakietów języka python (Jenkins CI/CD / Private PyPI / Python)",
+        "Automatyzacja budowania i kolekcjonowania reużywalnych pakietów języka Python (Jenkins CI/CD / Private PyPI / Python)",
         "Automatyzacja raportowania testów (Jenkins CI/CD / Test-Result-Analyzer / Jira Xray)",
-        "Automatyzacja procesów walidujących kod (Pre-commit / Black Formatter / Flake8 / MyPY / etc.)"
+        "Automatyzacja procesów walidujących kod (Pre-commit / Black Formatter / Flake8 / MyPY / etc.)",
+        "Pair programming przy przygotowaniu aplikacji frontendowej (Python + pakiet Dash -> https://dash.plotly.com)"
+      ],
+      contentGoals: [
+        "Przygotowanie pipeline'ów do testowania urządzeń IrDA podłączonych do grupy zdalnych serwerów Windows przez C++ SDK (Jenkins CI/CD + Jenkins Agents + Powershell & Python)",
+        "Przygotowanie pipeline'ów do lintowania kodu Python w testach jednostkowych i integracyjnych (Jenkins CI/CD + Python + Black Formatter / Flake8 / MyPY / etc.)",
+        "Przygotowanie REST backdoor w Jenkinsie (Generic Webhook Trigger) do wywoływania jobów Jenkins przez API z niestandardowej aplikacji frontendowej (Jenkins + Python)",
+        "Pair programming z developerem przy przygotowaniu aplikacji frontendowej (pakiet Dash -> https://dash.plotly.com) — moja część to przygotowanie modułu callbacków (Python + pakiet Dash) do integracji z REST backdoor Jenkinsa",
+        "Odpowiedzialność za część dostosowań UI w tej aplikacji",
+        "Dostarczenie w pełni przygotowanej aplikacji dla klienta Techem GmbH w 5 miesięcy pracy"
       ],
     },
     {
@@ -184,6 +207,12 @@ export const content_pl = [
         "Ulepszanie / Utrzymywanie procesów zautomatyzowanych (Gitlab-CI)",
         "Automatyzacja raportowania przebiegu wdrożenia CI/CD (Gitlab-CI / SonarQube)",
       ],
+      contentGoals: [
+        "Przygotowanie skryptów Ansible do auto-integracji Linuxa dla gotowego środowiska (Linux dot files + Ansible)",
+        "Przygotowanie klastra Kubernetes na serwerach bare metal (Hetzner + Kubespray)",
+        "Wdrażanie i utrzymanie manifestów definiujących bazy danych i aplikacje (Jenkins, SonarQube, Gitea, Gitlab-CI itp.) na klastrze Kubernetes (Helm / Kubectl)",
+        "Przygotowanie Gitlab Runner i pipeline'ów CI do testowania i budowania aplikacji embedded (Gitlab-CI / Bash / Python)",
+      ],
     },
     {
       type: "mergeBranchSegment",
@@ -257,6 +286,15 @@ export const content_pl = [
         "Programowanie narzędzi MerchTech (Python / Django / Django REST Framework)",
         "Implementacja, konfiguracja oraz administracja baz danych do obsługi narzędzi MerchTech (Big Data) (MongoDb / Elasticsearch / MariaDb / MySQL / Redis / AWS SQS)"
       ],
+      contentGoals: [
+        "Przygotowanie aplikacji mikroserwisowej do monitorowania feedów Google (integracja DataForSEO API) do śledzenia konkurencji na rynku",
+        "Migracja Elasticsearch z AWS na OVH na serwery bare metal hostujące Elasticsearch jako klaster węzłów (oparty na kontenerach Docker — zarządzany przez Docker Compose) w ramach reimplementacji wzorca CQRS — klaster utrzymywany przez zadania cron (sprawdzanie statusu węzłów — automatyczny restart w przypadku awarii). Remigracja przeprowadzona pomyślnie — koszty zredukowane",
+        "Przygotowanie monitoringu wspomnianego klastra Elasticsearch (przy użyciu Netdata) i jego utrzymanie",
+        "Przygotowanie aplikacji Wordpress do użytku wewnętrznego (niestandardowe oprogramowanie) — aplikacje hostowane na serwerach bare metal (Linux) i utrzymywane przez zadania cron",
+        "Unikanie blacklistowania IP serwerów używanych do usług SMTP (e-mail) przy użyciu konfiguracji IPv6 — rozwiązanie wyeliminowało możliwość wysyłania spamu z naszej strony",
+        "Przygotowanie poprawnej konfiguracji DNS i FQDN dla naszych domen (SPF / DKIM / DMARC / rekordy MX) dla lepszego dostarczania e-maili",
+        "Przygotowanie niestandardowych skryptów do auto-aktualizacji certyfikatów dla naszych domen (Let's Encrypt) wywoływanych przez zadania cron",
+      ],
     },
     {
       type: "mergeBranchSegment",
@@ -311,7 +349,6 @@ export const content_pl = [
       title: "Zespół Szkół Elektronicznych w Rzeszowie / Technikum nr 6 - Technik Informatyk - od 2013 do 2017",
       image: WorkZSELogo,
       branchBorderColor: "#2e8cb1",
-      firstElement: true,
       noElements: true,
       content: [],
     },
@@ -325,6 +362,7 @@ export const content_pl = [
       title: "DevOps",
       image: "",
       branchBorderColor: "#04009b",
+      mainBorderColor: null,
       firstElement: true,
       content: [],
     },
@@ -430,7 +468,7 @@ export const content_pl = [
         "Frontend oparty na ReactJS i frameworku Gatsby",
         "Konteneryzacja oparta na manifestach Docker (lokalnie)",
         "Konteneryzacja oparta na manifestach K8S (serwery Bare Metal - Hetzner) (Ingress / Cert-Manager / Deployments / PV & PVC / etc.)",
-        "Praca z narzędziami AI Agents (Cursor AI / Claude)",
+        "Praca z narzędziami AI Agents (Cursor AI / Copilot)",
       ],
     },
     {
@@ -486,7 +524,6 @@ export const content_pl = [
       title: "DevOps",
       image: "",
       branchBorderColor: "#04009b",
-      mainBorderColor: null,
       firstElement: true,
       content: [],
     },
@@ -650,7 +687,7 @@ export const content_pl = [
     {
       type: "workSubSegment",
       tabs: 1,
-      title: "Monitoring",
+      title: "Niezawodność & Monitoring",
       image: "",
       branchBorderColor: "#000000",
       mainBorderColor: "#2e8cb1",
@@ -676,7 +713,7 @@ export const content_pl = [
       tabs: 0,
       title: "Konfiguracja i administracja bazami danych",
       image: "", //SkillsDatabasesLogo,
-      mainBorderColor: null,
+      branchBorderColor: "#1038a7",
       content: [],
     },
     {
@@ -718,15 +755,15 @@ export const content_pl = [
       branchBorderColor: "#047900",
       mainBorderColor: "#1038a7",
     },
-    {
+    //{
-      type: "workSubSegment",
+    //  type: "workSubSegment",
-      tabs: 0,
+    //  tabs: 0,
-      title: "Angielski - Poziom B2",
+    //  title: "Angielski - Poziom B2",
-      image: "", //SkillsEnglishLogo,
+    //  image: "", //SkillsEnglishLogo,
-      mainBorderColor: null,
+    //  mainBorderColor: null,
-      lastElement: true,
+    //  lastElement: true,
-      content: [],
+    //  content: [],
-    },
+    //},
     {
       type: "titleSegment",
       title: "Zainteresowania",
@@ -770,15 +807,13 @@ export const content_en = [
       type: "generalTitleSegment",
       title: "Kamil Żuk",
       description_title: "About Me",
-      description: "DevOps & Backend Engineer specializing in scalable systems, automation and distributed architectures (Kubernetes, CI/CD, Python). Experienced in building production-grade systems and internal platforms.",
+      description: "DevOps & Backend Engineer with 4+ years of professional experience in designing, automating and maintaining production infrastructure and CI/CD pipelines across enterprise and startup environments. Skilled in Kubernetes (bare metal and cloud), Terraform, Ansible, Jenkins, GitLab CI and Github Actions. Builds backend services in Python (FastAPI, Django) with async database layers, task queues and external API integrations. Experienced in SRE practices — incident analysis, observability (Splunk, Grafana, New Relic) and reliability improvements. Runs a personal K8S cluster on Hetzner hosting side projects including a full-stack crypto & stock market analysis platform and distributed GPU computing system.",
       image: MePng,
       content_language: "en",
       content: {
         "E-mail": "zukkamil.44@gmail.com",
         "Phone": "+48 570 688 112",
         "Git": "git.00x097.com/tbs093a",
-        "DevOps Blog": "blog.00x097.com/",
-        "Education": "Higher / Engineer",
       }
     },
     {
@@ -1506,15 +1541,15 @@ export const content_en = [
       branchBorderColor: "#047900",
       mainBorderColor: "#1038a7",
     },
-    {
+    //{
-      type: "workSubSegment",
+    //  type: "workSubSegment",
-      tabs: 0,
+    //  tabs: 0,
-      title: "English - B2 Level",
+    //  title: "English - B2 Level",
-      image: "", //SkillsEnglishLogo,
+    //  image: "", //SkillsEnglishLogo,
-      mainBorderColor: null,
+    //  mainBorderColor: null,
-      lastElement: true,
+    //  lastElement: true,
-      content: [],
+    //  content: [],
-    },
+    //},
     {
       type: "titleSegment",
       title: "Interests",

src/pages/index.js

@@ -389,6 +389,16 @@ const SegmentGeneral = ({ segment }) => {
         className="segment_image cover"
         alt={segment.title}
       />
+      <div className="segment_header_middle">
+        <div className="segment_title segment_title_image">
+          {segment.description_title}
+        </div>
+        {segment.description && (
+          <div className="segment_description segment_description_general">
+            {segment.description}
+          </div>
+        )}
+      </div>
       {!isVerified ? (
         <SimpleCaptchaWrapper 
           onVerified={setIsVerified} 
@@ -418,16 +428,6 @@ const SegmentGeneral = ({ segment }) => {
           )}
         </div>
       )}
-      <div className="segment_header_middle">
-        <div className="segment_title segment_title_image">
-          {segment.description_title}
-        </div>
-        {segment.description && (
-          <div className="segment_description segment_description_general">
-            {segment.description}
-          </div>
-        )}
-      </div>
     </div>
   );
 };
@@ -521,6 +521,12 @@ const IndexPage = () => {
 
   const [content_swapper, set_content_swap] = React.useState(pol_);
   const [content, set_content] = React.useState(content_en);
+  const [isDark, setIsDark] = React.useState(true);
+
+  const toggleTheme = () => {
+    setIsDark(!isDark);
+    document.documentElement.classList.toggle("light-theme");
+  };
 
   const swap_content = (event) => {
     event.preventDefault()
@@ -534,8 +540,9 @@ const IndexPage = () => {
   }
 
   return (
-    <>
+    <div className="page_layout">
-      <div className="global_segment">
+      <aside className="sidebar">
+        <div className="sidebar_header">
           <div className="title_bar">
             {content[0]["title"]}
           </div>
@@ -544,20 +551,28 @@ const IndexPage = () => {
               {content_swapper}
             </div>
           </div>
+          <div className="theme_toggle" onClick={toggleTheme}>
+            {isDark ? "☀️" : "🌙"}
+          </div>
+        </div>
+        <SegmentGeneral
+          key="general_sidebar"
+          segment={content[0]}
+        />
+      </aside>
+      <main className="main_content">
         {
-          content.map((value, index) => (
+          content.slice(1).map((value, index) => (
             <Segment
-              key={`segment_${index}`}
+              key={`segment_${index + 1}`}
-              index={index}
+              index={index + 1}
               segment={value}
             />
           ))
         }
+        <div className="foot"></div>
+      </main>
     </div>
-      <div className="foot">
-
-      </div>
-    </>
   )
 }
 

src/styles/general.scss

@@ -15,9 +15,36 @@ $regular_image_font_size: 10.5pt;
 
 $foot_font_size: 9.8pt;
 
+:root {
+    --bg-color: #{$background_color};
+    --text-color: #{$color};
+    --text-visited: #{$color_visited};
+    --text-hover: #{$color_hover};
+    --text-active: #{$color_active};
+    --div-bg-color: #{$div_background_color};
+    --sidebar-bg: #1e1e1e;
+    --sidebar-border: rgba(166, 166, 166, 0.1);
+    --segment-bg: #{$background_color};
+    --on-accent-color: #{$color};
+}
+
+.light-theme {
+    --bg-color: #f5f5f5;
+    --text-color: #333333;
+    --text-visited: #555555;
+    --text-hover: #111111;
+    --text-active: #333333;
+    --div-bg-color: #1a56db;
+    --sidebar-bg: #e8e8e8;
+    --sidebar-border: rgba(0, 0, 0, 0.1);
+    --segment-bg: #f5f5f5;
+    --on-accent-color: #ffffff;
+}
+
 body {
-    background-color: $background_color;
+    background-color: var(--bg-color);
-    color: $color;
+    color: var(--text-color);
+    transition: background-color 0.3s, color 0.3s;
 }
 
 @font-face {
@@ -30,7 +57,182 @@ body {
     src: url("../images/Lato-Regular.ttf");
 }
 
-.global_segment {
+.page_layout {
+    display: flex;
+    flex-direction: row;
+    min-height: 100vh;
+    padding-left: 280px;
+}
+
+.sidebar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 280px;
+    overflow-y: auto;
+    background-color: var(--sidebar-bg);
+    padding: 20px 15px;
+    box-sizing: border-box;
+    z-index: 10;
+    border-right: 1px solid var(--sidebar-border);
+    transition: background-color 0.3s, border-color 0.3s;
+    display: flex;
+    flex-direction: column;
+
+    &::-webkit-scrollbar {
+        width: 4px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: rgba($color, 0.2);
+        border-radius: 2px;
+    }
+
+    .sidebar_header {
+        display: flex;
+        align-items: center;
+        margin-bottom: 20px;
+    }
+
+    .title_bar {
+        flex: 1;
+        text-align: left;
+        font-family: $title_font_family;
+        font-size: 18pt;
+        color: var(--text-color);
+    }
+
+    .language_bar {
+        text-align: right;
+        font-size: 18pt;
+        cursor: pointer;
+    }
+
+    .theme_toggle {
+        font-size: 16pt;
+        cursor: pointer;
+        margin-left: 10px;
+        user-select: none;
+    }
+
+    .segment_general {
+        float: none;
+        margin-top: 0;
+        width: 100%;
+        position: static;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .segment_image {
+            float: none;
+            width: 245px;
+            height: 245px;
+            object-fit: cover;
+            object-position: top;
+            background-color: transparent;
+        }
+
+        .segment_header_middle {
+            position: static;
+            left: auto;
+            right: auto;
+            width: 100%;
+            margin-top: 12px;
+        }
+
+        .segment_title_image {
+            float: none;
+            margin-right: auto;
+            margin-left: auto;
+            width: 245px;
+            padding-top: 12px;
+            height: 55px;
+            color: var(--on-accent-color);
+            font-family: $title_font_family;
+            font-size: $title_font_size;
+            text-align: center;
+            background-color: var(--div-bg-color);
+            box-sizing: border-box;
+        }
+
+        .segment_description_general {
+            clear: none;
+            float: none;
+            width: auto;
+            overflow: visible;
+            margin: 10px 0 0 0;
+            padding: 0;
+            font-size: 8.5pt;
+            font-family: $regular_font_family;
+            font-style: italic;
+            color: var(--text-color);
+            opacity: 0.75;
+            text-align: justify;
+        }
+    }
+
+    .captcha-container {
+        float: none;
+        width: 245px;
+        margin-left: auto;
+        margin-right: auto;
+        margin-top: 15px;
+
+        .captcha-form {
+            width: 100%;
+            height: auto;
+            padding: 12px 10px;
+            box-sizing: border-box;
+
+            p {
+                margin-top: 10px;
+                margin-bottom: 10px;
+                font-size: 9pt;
+            }
+
+            form {
+                margin-top: 10px;
+            }
+        }
+    }
+
+    .segment_content_image {
+        float: none;
+        width: 245px;
+        height: auto;
+        margin-top: 15px;
+        margin-left: 0 auto;
+        margin-right: 0 auto;
+        padding: 12px 10px;
+        box-sizing: border-box;
+        font-size: $regular_image_font_size;
+        font-family: $regular_font_family;
+        font-weight: bold;
+        background-color: var(--div-bg-color);
+        color: var(--on-accent-color);
+
+        .segment_image_item {
+            margin-top: 5px;
+        }
+
+        .subitem {
+            margin-left: 5px;
+        }
+
+        a:link, a:visited, a:hover, a:active {
+            color: var(--on-accent-color);
+            opacity: 0.8;
+        }
+    }
+}
+
+.main_content {
     margin-left: auto;
     margin-right: auto;
     max-width: 21cm;
@@ -39,19 +241,19 @@ body {
     box-sizing: border-box;
 
     a:link {
-        color: $background_color;
+        color: var(--bg-color);
     }
 
     a:visited {
-        color: $color_visited;
+        color: var(--text-visited);
     }
 
     a:hover {
-        color: $color_hover;
+        color: var(--text-hover);
     }
 
     a:active {
-        color: $color_active;
+        color: var(--text-active);
     }
 
     ul {
@@ -63,23 +265,6 @@ body {
         padding-top: 15px;
     }
 
-    .title_bar {
-        margin-top: 20px;
-        width: 80%;
-        float: left;
-        text-align: left;
-        font-family: $title_font_family;
-        font-size: 24pt;
-    }
-
-    .language_bar {
-        margin-top: 20px;
-        width: 20%;
-        float: left;
-        text-align: right;
-        font-size: 24pt;
-    }
-
     .segment_general {
         float: left;
         margin-top: 30px;
@@ -90,9 +275,9 @@ body {
             float: left;
             width: 210px;
             height:250px;
-            color: $color;
+            color: var(--text-color);
             font-weight: bold;
-            background-color: $div_background_color;
+            background-color: var(--div-bg-color);
         }
 
         .cover {
@@ -109,11 +294,11 @@ body {
             padding: 15px;
             width: 180px;
             height:220px;
-            color: $color;
+            color: var(--on-accent-color);
             font-size: $regular_image_font_size;
             font-family: $regular_font_family;
             font-weight: bold;
-            background-color: $div_background_color;
+            background-color: var(--div-bg-color);
 
             .segment_image_item {
                 margin-top: 5px;
@@ -142,11 +327,11 @@ body {
         width: 250px;
         padding-top: 12px;
         height: 45px;
-        color: $color;
+        color: var(--on-accent-color);
         font-family: $title_font_family;
         font-size: $title_font_size;
         text-align: center;
-        background-color: $div_background_color;
+        background-color: var(--div-bg-color);
     }
 
     .segment_content_normal {
@@ -165,7 +350,7 @@ body {
 
         ul li::before {
             content: ">> ";
-            color: $div_background_color;
+            color: var(--div-bg-color);
             font-weight: bold;
             display: inline-block;
             width: 2em;
@@ -200,7 +385,7 @@ body {
         ul li::before {
             content: "+ >";
             color: inherit;
-            background-color: $background_color;
+            background-color: var(--bg-color);
             font-weight: bold;
             display: inline-block;
             width: 2em;
@@ -236,7 +421,8 @@ body {
         font-family: $regular_font_family;
         font-size: 10pt;
         font-style: italic;
-        color: darken($color, 15%);
+        color: var(--text-color);
+        opacity: 0.75;
         text-align: justify;
         margin: 4px 0 10px 18px;
     }
@@ -254,7 +440,7 @@ body {
 
 
     .subitem {
-        margin-left: 15px;
+        margin-left: 5px;
     }
 }
 
@@ -268,7 +454,7 @@ body {
   float: right;
   
   .captcha-form {
-    background-color: $div_background_color;
+    background-color: var(--div-bg-color);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -281,6 +467,7 @@ body {
         text-align: center;
         margin-top: 15px;
         margin-bottom: 15px;
+        color: var(--on-accent-color);
     }
 
     form {
@@ -292,7 +479,7 @@ body {
     }
 
     a {
-      color: $color;
+      color: var(--text-color);
       cursor: pointer;
       padding-top: 20px;
       padding-bottom: 5px;
@@ -304,9 +491,9 @@ body {
       width: 100%;
       padding: 8px;
       margin-bottom: 10px;
-      border: 1px solid $color;
+      border: 1px solid var(--text-color);
-      background-color: $background_color;
+      background-color: var(--bg-color);
-      color: $color;
+      color: var(--text-color);
       font-size: 9pt;
       box-sizing: border-box;
     }
@@ -314,15 +501,15 @@ body {
     .captcha-button {
       width: 100%;
       padding: 8px;
-      background-color: $background_color;
+      background-color: var(--bg-color);
-      color: $color;
+      color: var(--text-color);
-      border: 1px solid $color;
+      border: 1px solid var(--text-color);
       box-sizing: border-box;
       cursor: pointer;
       font-size: 9pt;
       
       &:hover {
-        background-color: darken($background_color, 5%);
+        opacity: 0.85;
       }
     }
     
@@ -341,48 +528,23 @@ body {
 }
 
 @media (max-width: 768px) {
-    .global_segment {
+    .page_layout {
-        padding: 0 10px;
+        flex-direction: column;
-
+        padding-left: 0;
-        .title_bar {
-            font-size: 18pt;
-            width: 75%;
     }
 
-        .language_bar {
+    .sidebar {
-            width: 25%;
+        position: static;
-            font-size: 18pt;
+        width: 100%;
-        }
+        height: auto;
-
+        overflow: visible;
-        .segment_general {
+        border-right: none;
-            .segment_image {
-                width: 140px;
-                height: 170px;
-            }
-
-            .segment_content_image {
-                width: 120px;
-                height: 150px;
         padding: 10px;
-                font-size: 6pt;
     }
 
-            .segment_header_middle {
+    .main_content {
-                left: 140px;
+        margin-left: 0;
-                right: 150px;
+        padding: 0 10px;
-            }
-
-            .segment_title_image {
-                margin-left: -20px;
-                padding-top: 12.5px;
-                padding-bottom: 7.5px;
-                height: 30px;
-            }
-
-            .segment_description_general {
-                font-size: 8pt;
-            }
-        }
 
         .segment_title {
             width: 200px;
@@ -424,36 +586,10 @@ body {
             margin: 6px 0 6px 14px;
         }
     }
-
-    .captcha-container .captcha-form {
-        width: 140px;
-        height: 170px;
-        font-size: 8pt;
-        padding: 0 8px;
-
-        p {
-            margin-top: 8px;
-            margin-bottom: 8px;
-            font-size: 8pt;
-        }
-
-        form {
-            margin-top: 8px;
-        }
-
-        .captcha-input {
-            margin-bottom: 8px;
-        }
-
-        .captcha-input, .captcha-button {
-            padding: 5px;
-            font-size: 7pt;
-        }
-    }
 }
 
 @media (max-width: 500px) {
-    .global_segment {
+    .sidebar {
         .title_bar {
             font-size: 15pt;
         }
@@ -461,38 +597,9 @@ body {
         .language_bar {
             font-size: 15pt;
         }
-
-        .segment_general {
-            .segment_image {
-                width: 100px;
-                height: 125px;
-            }
-
-            .segment_content_image {
-                width: 90px;
-                height: 110px;
-                padding: 8px;
-                font-size: 4pt;
-            }
-
-            .segment_header_middle {
-                left: 95px;
-                right: 108px;
-            }
-
-            .segment_title_image {
-                margin-left: -10px;
-                padding-top: 10px;
-                padding-bottom: 0px;
-                height: 33px;
-            }
-
-            .segment_description_general {
-                font-size: 6.5pt;
-                margin: 6px 6px 6px 14px;
-            }
     }
 
+    .main_content {
         .segment_title {
             width: 160px;
             font-size: 13pt;
@@ -531,44 +638,12 @@ body {
             font-size: 7.5pt;
             margin: 6px 0 6px 14px;
         }
-
-        .captcha-container .captcha-form {
-            width: 100px;
-            height: 125px;
-            font-size: 7pt;
-            padding: 0 6px;
-
-            p {
-                margin-top: 5px;
-                margin-bottom: 5px;
-                font-size: 6.25pt;
-            }
-
-            a {
-                padding-left: 22px;
-                padding-right: 22px;
-                font-size: 6pt;
-            }
-
-            form {
-                margin-top: 2px;
-            }
-
-            .captcha-input {
-                margin-bottom: 2px;
-            }
-
-            .captcha-input, .captcha-button {
-                padding: 4px;
-                font-size: 6pt;
-            }
-        }
     }
 }
 
 @media (max-width: 415px) {
-    .global_segment {
+    .sidebar {
-        padding: 0 6px;
+        padding: 6px;
 
         .title_bar {
             font-size: 11pt;
@@ -577,36 +652,10 @@ body {
         .language_bar {
             font-size: 11pt;
         }
-
-        .segment_general {
-            .segment_image {
-                width: 80px;
-                height: 100px;
     }
 
-            .segment_content_image {
+    .main_content {
-                width: 75px;
+        padding: 0 6px;
-                height: 95px;
-                padding: 6px;
-                font-size: 2.5pt;
-            }
-
-            .segment_header_middle {
-                left: 75px;
-                right: 90px;
-            }
-
-            .segment_title_image {
-                margin-left: -8px;
-                height: 26px;
-                font-size: 10pt;
-            }
-
-            .segment_description_general {
-                font-size: 4.5pt;
-                margin: 4px 4px 4px 10px;
-            }
-        }
 
         .segment_title {
             width: 130px;
@@ -655,37 +704,5 @@ body {
             font-size: 4.5pt;
             margin: 4px 0 4px 10px;
         }
-
-        .captcha-container .captcha-form {
-            width: 85px;
-            height: 105px;
-            font-size: 2.5pt;
-            padding: 0 5px;
-
-            p {
-                margin-top: 4px;
-                margin-bottom: 4px;
-                font-size: 4pt;
-            }
-
-            a {
-                padding-left: 24.25px;
-                padding-right: 24.25px;
-                font-size: 4pt;
-            }
-
-            form {
-                margin-top: 2px;
-            }
-
-            .captcha-input {
-                margin-bottom: 2px;
-            }
-
-            .captcha-input, .captcha-button {
-                padding: 3px;
-                font-size: 5pt;
-            }
-        }
     }
 }