From d12fbeef23abf2daf9061ed053e378e867b37448 Mon Sep 17 00:00:00 2001
From: dvorakmortonxd <lolmanikyt@gmail.com>
Date: Sun, 23 Aug 2026 03:27:52 +0200
Subject: [PATCH] color redesign, white = less important, yellow = more
 important

---
 src/app/components/ContributionHeatmap.tsx |  6 +-
 src/app/components/ServiceButton.tsx       |  6 +-
 src/app/page.css                           | 30 +++----
 src/app/page.tsx                           | 94 +++++++++++-----------
 4 files changed, 67 insertions(+), 69 deletions(-)

diff --git a/src/app/components/ContributionHeatmap.tsx b/src/app/components/ContributionHeatmap.tsx
index da09c0b..ba9eb50 100644
--- a/src/app/components/ContributionHeatmap.tsx
+++ b/src/app/components/ContributionHeatmap.tsx
@@ -125,11 +125,11 @@ export default function ContributionHeatmap() {
     <div className="contribution-heatmap">
       <div className="contribution-command-row">
         <div className="contribution-command">
-          <span style={{ color: "var(--green)" }}>martin@git.dvorakmortonxd.dev</span>:<span style={{ color: "var(--gray)" }}>~</span>$ echo &#34;<span style={{ color: "var(--aqua)" }}>{totalContribs}</span> contributions in the last year&#34;
+          <span style={{ color: "var(--green)" }}>martin@git.dvorakmortonxd.dev</span>:<span style={{ color: "var(--gray)" }}>~</span>$ echo &#34;<span style={{ color: "var(--accent)" }}>{totalContribs}</span> contributions in the last year&#34;
         </div>
       </div>
       <div className="contribution-total-title">
-        <span style={{ color: "var(--aqua)" }}>{totalContribs}</span> contributions in the last year
+        <span style={{ color: "var(--accent)" }}>{totalContribs}</span> contributions in the last year
       </div>
       <div className="heatmap-container">
         {weeks.map((week, wIdx) => (
@@ -151,7 +151,7 @@ export default function ContributionHeatmap() {
       <div className="heatmap-status-row">
         <div className="heatmap-status-text">
           {hoveredCell ? (
-            <span><strong style={{ color: "var(--aqua)" }}>{hoveredCell.contribs}</strong> contributions on {hoveredCell.date}</span>
+            <span><strong style={{ color: "var(--accent)" }}>{hoveredCell.contribs}</strong> contributions on {hoveredCell.date}</span>
           ) : (
             <span>Hover over a day to see contributions</span>
           )}
diff --git a/src/app/components/ServiceButton.tsx b/src/app/components/ServiceButton.tsx
index 93f3da2..b6ea856 100644
--- a/src/app/components/ServiceButton.tsx
+++ b/src/app/components/ServiceButton.tsx
@@ -36,9 +36,9 @@ export default function ServiceButton({ url, checkUrl, className, icon, name, de
             <span className="service-text">
                 <span className="service-name">
                     {name}
-                    {access === 'public' && <span style={{ color: '#4ade80', fontSize: '0.7em', marginLeft: '6px' }}>(public)</span>}
-                    {access === 'private' && <span style={{ color: '#ef4444', fontSize: '0.7em', marginLeft: '6px' }}>(private)</span>}
-                    {access === 'on_request' && <span style={{ color: '#f97316', fontSize: '0.7em', marginLeft: '6px' }}>(on request)</span>}
+                    {access === 'public' && <span style={{ color: 'var(--accent)', fontSize: '0.7em', marginLeft: '6px' }}>(public)</span>}
+                    {access === 'private' && <span style={{ color: 'var(--red)', fontSize: '0.7em', marginLeft: '6px' }}>(private)</span>}
+                    {access === 'on_request' && <span style={{ color: 'var(--accent2)', fontSize: '0.7em', marginLeft: '6px' }}>(on request)</span>}
                 </span>
                 <span className="service-desc">{desc}</span>
             </span>
diff --git a/src/app/page.css b/src/app/page.css
index a99a39d..7f9a09a 100644
--- a/src/app/page.css
+++ b/src/app/page.css
@@ -193,7 +193,7 @@ body {
 }
 
 .mail-contact a {
-  color: var(--blue);
+  color: var(--accent2);
   text-decoration: none;
 }
 
@@ -521,7 +521,7 @@ body {
 }
 
 .subsection-panel.friends-panel .subsection-panel-label {
-  color: var(--aqua);
+  color: var(--white);
 }
 
 /* Project grid & cards */
@@ -695,11 +695,11 @@ body {
   right: 16px;
   transform: translateY(-50%);
   background: var(--bg);
-  color: white;
+  color: var(--accent);
   padding: 2px 6px;
   border-radius: 0;
-  border: 1px solid var(--tui-border);
-  font-size: 0.7rem;
+  border: 1px solid var(--accent3);
+  font-size: 0.72rem;
   font-weight: bold;
   letter-spacing: 0.05em;
   text-transform: uppercase;
@@ -1117,9 +1117,9 @@ body {
   overflow-x: auto;
   gap: 2px;
   padding: 4px;
-  border: 1px solid var(--aqua);
+  border: 1px solid var(--accent);
   scrollbar-width: none;
-  scrollbar-color: var(--green) transparent;
+  scrollbar-color: var(--accent) transparent;
 }
 
 .heatmap-status-row {
@@ -1166,10 +1166,10 @@ body {
   box-shadow: 0 0 6px var(--color-white);
 }
 
-.heatmap-cell[data-level="1"] { background-color: rgba(130,180,19, 0.4); }
-.heatmap-cell[data-level="2"] { background-color: rgba(130,180,19, 0.6); }
-.heatmap-cell[data-level="3"] { background-color: rgba(130,180,19, 0.8); }
-.heatmap-cell[data-level="4"] { background-color: rgba(130,180,19, 1); }
+.heatmap-cell[data-level="1"] { background-color: rgba(255,255,0, 0.2); }
+.heatmap-cell[data-level="2"] { background-color: rgba(255,255,0, 0.4); }
+.heatmap-cell[data-level="3"] { background-color: rgba(255,255,0, 0.7); }
+.heatmap-cell[data-level="4"] { background-color: rgba(255,255,0, 1); }
 
 .heatmap-legend-cell {
   width: 11px;
@@ -1179,10 +1179,10 @@ body {
   flex-shrink: 0;
 }
 
-.heatmap-legend-cell[data-level="1"] { background-color: rgba(130,180,19, 0.4); }
-.heatmap-legend-cell[data-level="2"] { background-color: rgba(130,180,19, 0.6); }
-.heatmap-legend-cell[data-level="3"] { background-color: rgba(130,180,19, 0.8); }
-.heatmap-legend-cell[data-level="4"] { background-color: rgba(130,180,19, 1); }
+.heatmap-legend-cell[data-level="1"] { background-color: rgba(255,255,0, 0.3); }
+.heatmap-legend-cell[data-level="2"] { background-color: rgba(255,255,0, 0.5); }
+.heatmap-legend-cell[data-level="3"] { background-color: rgba(255,255,0, 0.7); }
+.heatmap-legend-cell[data-level="4"] { background-color: rgba(255,255,0, 1); }
 
 @media (max-width: 520px) {
   .contribution-command {
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 098bacb..e85f417 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -283,8 +283,8 @@ export default function Home() {
 
         {/* Search Panel */}
         <div className="search-section">
-          <div className="tui-panel" style={panelStyle('var(--red)')}>
-            <span className="tui-panel-label" style={{ color: 'var(--red)', borderColor: 'var(--red)' }}>SEARXNG.C</span>
+          <div className="tui-panel" style={panelStyle('var(--white)')}>
+            <span className="tui-panel-label" style={{ color: 'var(--white)', borderColor: 'var(--white)' }}>SEARXNG.C</span>
             <form action="https://search.dvorakmortonxd.dev/search" method="GET" target="_blank" rel="noopener noreferrer" className="search-form">
               <input type="text" name="q" placeholder="Search... (only works for those who are whitelisted)" className="search-bar" />
             </form>
@@ -293,8 +293,8 @@ export default function Home() {
 
         {/* Social Links Panel */}
         <div className="social-section">
-          <div className="tui-panel" style={panelStyle('var(--blue)')}>
-            <span className="tui-panel-label" style={{ color: 'var(--blue)', borderColor: 'var(--blue)' }}>SOCIALS.JS</span>
+          <div className="tui-panel" style={panelStyle('var(--accent)')}>
+            <span className="tui-panel-label" style={{ color: 'var(--accent)', borderColor: 'var(--accent)' }}>SOCIALS.JS</span>
             <div className="social-buttons">
               {socials.map((s) => (
                   <a
@@ -317,8 +317,8 @@ export default function Home() {
 
         {/* Gym SBD Panel */}
         <div className="gym-section">
-          <div className="tui-panel" style={panelStyle('#929292')}>
-            <span className="tui-panel-label" style={{ color: '#929292', borderColor: '#929292' }}>GYM_SBD_AT_73KG_BW.DB</span>
+          <div className="tui-panel" style={panelStyle('var(--white)')}>
+            <span className="tui-panel-label" style={{ color: 'var(--white)', borderColor: 'var(--white)' }}>GYM_SBD_AT_73KG_BW.DB</span>
             <div className="gym-grid">
               <div className="gym-item">
                 <Image src="/squat.svg" alt="Squat" width={48} height={48} className="gym-icon" />
@@ -344,8 +344,8 @@ export default function Home() {
 
         {/* Now Panel */}
         <div className="about-section">
-          <div className="tui-panel" style={panelStyle('#eab308')}>
-            <span className="tui-panel-label" style={{ color: '#eab308', borderColor: '#eab308' }}>NOW.TXT</span>
+          <div className="tui-panel" style={panelStyle('var(--white)')}>
+            <span className="tui-panel-label" style={{ color: 'var(--white)', borderColor: 'var(--white)' }}>NOW.TXT</span>
             <div className="about-content">
               <p>
                 <span style={{ color: 'var(--green)' }}>martin@dvorakmortonxd</span>:<span className="text-blue">~</span>$ cat now.txt
@@ -361,8 +361,8 @@ export default function Home() {
 
         {/* About Me Panel */}
         <div className="about-section">
-          <div className="tui-panel" style={panelStyle('var(--green)')}>
-            <span className="tui-panel-label" style={{ color: 'var(--green)', borderColor: 'var(--green)' }}>README.MD</span>
+          <div className="tui-panel" style={panelStyle('var(--accent)')}>
+            <span className="tui-panel-label" style={{ color: 'var(--accent)', borderColor: 'var(--accent)' }}>README.MD</span>
             <div className="about-content">
               <p>
                 <span className="text-green">martin@dvorakmortonxd</span>:<span className="text-blue">~</span>$ cat about_me.md
@@ -459,12 +459,12 @@ export default function Home() {
 
         {/* GitDXD Panel */}
         <div className="gitdxd-section" style={{ marginTop: '20px' }}>
-          <div className="tui-panel" style={panelStyle('#0ea5e9')}>
-            <span className="tui-panel-label" style={{ color: '#0ea5e9', borderColor: '#0ea5e9' }}>GITDXD.GIT</span>
+          <div className="tui-panel" style={panelStyle('var(--white)')}>
+            <span className="tui-panel-label" style={{ color: 'var(--white)', borderColor: 'var(--white)' }}>GITDXD.GIT</span>
             <div style={{ padding: '24px 16px 16px' }}>
-              <h2 style={{ fontSize: '2.4rem', fontWeight: 'bold', color: '#0ea5e9', marginBottom: '16px', textAlign: 'center' }}>GitDXD</h2>
-              <p style={{ fontSize: '1.8rem', color: '#0ea5e9', fontWeight: '500', textAlign: 'center' }}>My Self-hosted Git Instance</p>
-              <div style={{ marginTop: '16px', marginBottom: '16px', borderRadius: '8px', overflow: 'hidden', border: '1px solid rgba(14, 165, 233, 0.4)', boxShadow: '0 0 30px rgba(14, 165, 233, 0.15)' }}>
+              <h2 style={{ fontSize: '2.4rem', fontWeight: 'bold', color: 'var(--white)', marginBottom: '16px', textAlign: 'center' }}>GitDXD</h2>
+              <p style={{ fontSize: '1.8rem', color: 'var(--white)', fontWeight: '500', textAlign: 'center' }}>My Self-hosted Git Instance</p>
+              <div style={{ marginTop: '16px', marginBottom: '16px', borderRadius: '8px', overflow: 'hidden', border: '1px solid rgba(255, 255, 255, 0.4)', boxShadow: '0 0 30px rgba(180, 255, 125, 0.15)' }}>
                 <Image
                   src="/gitdxd.webp"
                   alt="GitDXD Preview"
@@ -473,7 +473,7 @@ export default function Home() {
                   style={{ width: '100%', height: 'auto', display: 'block' }}
                 />
               </div>
-              <div style={{ color: '#a3a3a3', marginTop: '12px', lineHeight: '1.6', textAlign: 'center' }}>
+              <div style={{ color: 'var(--gray)', marginTop: '12px', lineHeight: '1.6', textAlign: 'center' }}>
                 <p>My very own forgejo git instance, originally started as a private git instance for me and my friends to boycott GitHub but I&#39;ve made it public now so. Join at <span className="text-purple-500"><a href="https://git.dvorakmortonxd.dev">git.dvorakmortonxd.dev</a></span>.<span className="cursor-blink"></span></p>
               </div>
             </div>
@@ -482,8 +482,8 @@ export default function Home() {
 
         {/* Commits Panel */}
         <div className="commits-section" style={{ marginTop: '20px' }}>
-          <div className="tui-panel" style={panelStyle('var(--green)')}>
-            <span className="tui-panel-label" style={{ color: 'var(--green)', borderColor: 'var(--green)' }}>CONTRIBUTIONS@GITDXD.GIT</span>
+          <div className="tui-panel" style={panelStyle('var(--accent)')}>
+            <span className="tui-panel-label" style={{ color: 'var(--accent)', borderColor: 'var(--accent)' }}>CONTRIBUTIONS@GITDXD.GIT</span>
             <div className="commits-content" style={{ padding: '24px 12px 16px' }}>
               <ContributionHeatmap />
             </div>
@@ -492,11 +492,11 @@ export default function Home() {
 
         {/* REVIVAL INC Panel */}
         <div className="revival-section" style={{ marginTop: '20px' }}>
-          <div className="tui-panel" style={panelStyle('#444444')}>
-            <span className="tui-panel-label" style={{ color: '#999999', borderColor: '#444444' }}>REVIVAL.INC</span>
+          <div className="tui-panel" style={panelStyle('var(--white)')}>
+            <span className="tui-panel-label" style={{ color: 'var(--white)', borderColor: 'var(--white)' }}>REVIVAL.INC</span>
             <div style={{ padding: '24px 16px 16px' }}>
-              <h2 style={{ fontSize: '2.4rem', fontWeight: 'bold', color: '#999999', marginBottom: '32px', textAlign: 'center' }}>Revival inc.</h2>
-              <div style={{ marginTop: '12px', marginBottom: '12px', borderRadius: '8px', overflow: 'hidden', border: '1px solid rgba(0, 0, 0, 0.4)', boxShadow: '0 0 30px rgba(255, 255, 255, 0.15)', width: '80%', margin: '12px auto'  }}>
+              <h2 style={{ fontSize: '2.4rem', fontWeight: 'bold', color: 'var(--white)', marginBottom: '32px', textAlign: 'center' }}>Revival inc.</h2>
+              <div style={{ marginTop: '12px', marginBottom: '12px', borderRadius: '8px', overflow: 'hidden', border: '1px solid rgba(0, 0, 0, 0.4)', boxShadow: '0 0 30px rgba(255, 255, 255, 0.35)', width: '80%', margin: '12px auto'  }}>
                 <Image
                     src="/revivalinc.webp"
                     alt="revival inc thumbnail"
@@ -505,8 +505,8 @@ export default function Home() {
                     style={{ width: '100%', height: 'auto', display: 'block' }}
                 />
               </div>
-              <p style={{ fontSize: '1.8rem', color: '#999999', fontWeight: '500', textAlign: 'center' }}>What is it?</p>
-              <div style={{ color: '#a3a3a3', marginTop: '12px', lineHeight: '1.6' }}>
+              <p style={{ fontSize: '1.8rem', color: 'var(--white)', fontWeight: '500', textAlign: 'center' }}>What is it?</p>
+              <div style={{ color: 'var(--gray)', marginTop: '12px', lineHeight: '1.6' }}>
                 <p>It&#39;s a game I made for the game jam &#34;Mini Jame Gam #55&#34;, the theme was Necromancy and the special item was Milk, the game also includes a tutorial so if you wanna try it do it. Check it out at <span className="text-purple-500"><a href="https://martin-dv.itch.io/revival-inc">itch.io</a></span> or play <span className="text-purple-500"><a href="https://dvorakmortonxd.dev/revival-inc">here</a></span>.<span className="cursor-blink"></span></p>
               </div>
             </div>
@@ -515,11 +515,11 @@ export default function Home() {
 
         {/* RustyWolf Panel */}
         <div className="rustywolf-section" style={{ marginTop: '20px' }}>
-          <div className="tui-panel" style={panelStyle('#f74c00')}>
-            <span className="tui-panel-label" style={{ color: '#f74c00', borderColor: '#f74c00' }}>RUSTYWOLF.RS</span>
+          <div className="tui-panel" style={panelStyle('var(--white)')}>
+            <span className="tui-panel-label" style={{ color: 'var(--white)', borderColor: 'var(--white)' }}>RUSTYWOLF.RS</span>
             <div style={{ padding: '24px 16px 16px' }}>
-              <h2 style={{ fontSize: '2.4rem', fontWeight: 'bold', color: '#f74c00', marginBottom: '32px', textAlign: 'center' }}>Introducing RustyWolf</h2>
-              <div style={{ marginTop: '12px', marginBottom: '12px', borderRadius: '8px', overflow: 'hidden', border: '1px solid rgba(255, 255, 255, 0.4)', boxShadow: '0 0 30px rgba(255, 255, 255, 0.15)' }}>
+              <h2 style={{ fontSize: '2.4rem', fontWeight: 'bold', color: 'var(--white)', marginBottom: '32px', textAlign: 'center' }}>Introducing RustyWolf</h2>
+              <div style={{ marginTop: '12px', marginBottom: '12px', borderRadius: '8px', overflow: 'hidden', border: '1px solid rgba(255, 255, 255, 0.4)', boxShadow: '0 0 30px rgba(255, 255, 255, 0.2)' }}>
                 <Image
                   src="/RustyWolfPreview.webp"
                   alt="RustyWolf Browser Preview"
@@ -528,8 +528,8 @@ export default function Home() {
                   style={{ width: '100%', height: 'auto', display: 'block' }}
                 />
               </div>
-              <p style={{ fontSize: '1.8rem', color: '#f74c00', fontWeight: '500', textAlign: 'center' }}>What makes it so cool???</p>
-              <div style={{ color: '#a3a3a3', marginTop: '12px', lineHeight: '1.6' }}>
+              <p style={{ fontSize: '1.8rem', color: 'var(--white)', fontWeight: '500', textAlign: 'center' }}>What makes it so cool???</p>
+              <div style={{ color: 'var(--gray)', marginTop: '12px', lineHeight: '1.6' }}>
                 <p>A lightweight browser made in Rust with WebKitGTK. It&#39;s the successor to my previous project Venturesome, aiming to provide a fast and minimalist browsing experience. It&#39;s a perfect browser for old machines that struggle with modern browsers. Check it out at <span className="text-purple-500"><a href="https://git.dvorakmortonxd.dev/dvorakmortonxd/RustyWolf">GitDXD</a></span>.<span className="cursor-blink"></span></p>
               </div>
             </div>
@@ -541,9 +541,9 @@ export default function Home() {
       <section className="projects">
         {/* Tech Section */}
         <div className="subsection-wrapper">
-          <div className="subsection-panel" style={panelStyle('var(--accent2)')}>
-            <span className="subsection-panel-label" style={{ color: 'var(--accent2)', borderColor: 'var(--accent2)' }}>TECH_LIST.JSON</span>
-            <h2 style={{ fontSize: '2rem', fontWeight: 'bold', textAlign: 'center', margin: '4px 0 20px', color: 'darkorange' }}>All my hardware equipment :)</h2>
+          <div className="subsection-panel" style={panelStyle('var(--white)')}>
+            <span className="subsection-panel-label" style={{ color: 'var(--white)', borderColor: 'var(--white)' }}>TECH_LIST.JSON</span>
+            <h2 style={{ fontSize: '2rem', fontWeight: 'bold', textAlign: 'center', margin: '4px 0 20px', color: 'var(--white)' }}>All my hardware equipment :)</h2>
             <div className="project-grid">
               {techProjects.map((project) => (
                   <div key={project.title} className="project-card">
@@ -561,9 +561,9 @@ export default function Home() {
 
         {/* Coding Section */}
         <div className="subsection-wrapper">
-          <div className="subsection-panel coding-panel" style={panelStyle('var(--purple)')}>
-            <span className="subsection-panel-label" style={{ color: 'var(--purple)', borderColor: 'var(--purple)' }}>PROJECTS.DOCX</span>
-            <h2 style={{ fontSize: '2rem', fontWeight: 'bold', textAlign: 'center', margin: '4px 0 20px', color: 'pink' }}>All the stuff I&#39;ve worked on :))</h2>
+          <div className="subsection-panel coding-panel" style={panelStyle('var(--accent)')}>
+            <span className="subsection-panel-label" style={{ color: 'var(--accent)', borderColor: 'var(--accent)' }}>PROJECTS.DOCX</span>
+            <h2 style={{ fontSize: '2rem', fontWeight: 'bold', textAlign: 'center', margin: '4px 0 20px', color: 'var(--accent)' }}>All the stuff I&#39;ve worked on :))</h2>
             <div className="project-grid">
               {codingProjects.map((project, idx) => (
                   <a
@@ -587,33 +587,31 @@ export default function Home() {
 
         {/* Friends Section */}
         <div className="subsection-wrapper">
-          <div className="subsection-panel friends-panel" style={panelStyle('var(--aqua)', { backgroundColor: 'rgba(50, 205, 50, 0.05)' })}>
-            <span className="subsection-panel-label" style={{ color: 'var(--aqua)', borderColor: 'var(--aqua)' }}>FRIENDS.TSX</span>
-            <h2 style={{ fontSize: '2rem', fontWeight: 'bold', textAlign: 'center', margin: '4px 0 20px', color: 'limegreen' }}>Friend&#39;s websites and projects</h2>
+          <div className="subsection-panel friends-panel" style={panelStyle('var(--white)', { backgroundColor: 'rgba(255, 255, 255, 0.02)' })}>
+            <span className="subsection-panel-label" style={{ color: 'var(--white)', borderColor: 'var(--white)' }}>FRIENDS.TSX</span>
+            <h2 style={{ fontSize: '2rem', fontWeight: 'bold', textAlign: 'center', margin: '4px 0 20px', color: 'var(--white)' }}>Friend&#39;s websites and projects</h2>
             <div className="services-buttons" style={{ gap: '1rem' }}>
               {friends.map((friend, idx) => (
                   <ServiceButton
                       key={idx}
                       url={friend.realUrl || friend.url}
                       className="friend"
-                      icon={<Image src={friend.img} alt={friend.name} width={68} height={68} className="friend-icon" style={{ borderRadius: '50%', filter: 'brightness(0) invert(75%) sepia(100%) hue-rotate(70deg) saturate(300%)' }} />}
+                      icon={<Image src={friend.img} alt={friend.name} width={68} height={68} className="friend-icon" style={{ borderRadius: '50%', filter: 'brightness(0) invert(65%) hue-rotate(70deg) saturate(100%)' }} />}
                       name={friend.name}
                       desc={friend.desc}
                   />
               ))}
             </div>
 
-            <div style={{ width: '160px', height: '4px', backgroundColor: 'limegreen', margin: '16px auto 0', borderRadius: '2px', opacity: 0.8 }} />
-
-            <div style={{ marginTop: '32px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '16px' }}>
-              <h3 style={{ fontSize: '1.5rem', color: 'limegreen', fontWeight: '600' }}>Quipee by Bukovina Filip & Vlk Tomáš</h3>
-              <div style={{ width: '100%', borderRadius: '8px', overflow: 'hidden', border: '1px solid rgba(50, 205, 50, 0.3)', boxShadow: '0 0 20px rgba(50, 205, 50, 0.1)' }}>
+            <div style={{ marginTop: '12px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '16px' }}>
+              <h3 style={{ fontSize: '1.5rem', color: 'var(--accent)', fontWeight: '600' }}>Quipee by Bukovina Filip & Vlk Tomáš</h3>
+              <div style={{ width: '100%', borderRadius: '8px', overflow: 'hidden', border: '1px solid rgba(255, 255, 0, 0.3)', boxShadow: '0 0 20px rgba(255, 255, 0, 0.1)' }}>
                 <Image src="/quipee.webp" alt="Quipee Thumbnail" width={1280} height={720} style={{ width: '100%', height: 'auto', display: 'block' }} />
               </div>
               <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', justifyContent: 'center' }}>
-                <a href="https://quipee.me" target="_blank" rel="noopener noreferrer" style={{ backgroundColor: 'rgba(50, 205, 50, 0.1)', color: 'limegreen', padding: '6px 16px', borderRadius: '6px', fontSize: '1rem', fontWeight: '500', textDecoration: 'none', border: '1px solid rgba(50, 205, 50, 0.3)' }}>Web</a>
-                <a href="https://drive.google.com/drive/folders/1oi76JyWs6J84MUmCGV7GvtLUexXI8Jel?usp=share_link" target="_blank" rel="noopener noreferrer" style={{ backgroundColor: 'rgba(50, 205, 50, 0.1)', color: 'limegreen', padding: '6px 16px', borderRadius: '6px', fontSize: '1rem', fontWeight: '500', textDecoration: 'none', border: '1px solid rgba(50, 205, 50, 0.3)' }}>Android</a>
-                <a href="https://testflight.apple.com/join/hP2a1E5x" target="_blank" rel="noopener noreferrer" style={{ backgroundColor: 'rgba(50, 205, 50, 0.1)', color: 'limegreen', padding: '6px 16px', borderRadius: '6px', fontSize: '1rem', fontWeight: '500', textDecoration: 'none', border: '1px solid rgba(50, 205, 50, 0.3)' }}>IOS</a>
+                <a href="https://quipee.me" target="_blank" rel="noopener noreferrer" style={{ backgroundColor: 'rgba(255, 255, 255, 0.04)', color: 'var(--white)', padding: '6px 16px', borderRadius: '6px', fontSize: '1rem', fontWeight: '500', textDecoration: 'none', border: '1px solid rgba(255, 255, 0, 0.3)' }}>Web</a>
+                <a href="https://drive.google.com/drive/folders/1oi76JyWs6J84MUmCGV7GvtLUexXI8Jel?usp=share_link" target="_blank" rel="noopener noreferrer" style={{ backgroundColor: 'rgba(255, 255, 255, 0.04)', color: 'var(--white)', padding: '6px 16px', borderRadius: '6px', fontSize: '1rem', fontWeight: '500', textDecoration: 'none', border: '1px solid rgba(255, 255, 0, 0.3)' }}>Android</a>
+                <a href="https://testflight.apple.com/join/hP2a1E5x" target="_blank" rel="noopener noreferrer" style={{ backgroundColor: 'rgba(255, 255, 255, 0.04)', color: 'var(--white)', padding: '6px 16px', borderRadius: '6px', fontSize: '1rem', fontWeight: '500', textDecoration: 'none', border: '1px solid rgba(255, 255, 0, 0.3)' }}>IOS</a>
               </div>
             </div>
           </div>