From c6559e478d552f3bf216f0802f961ac0c046ebe8 Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Mon, 4 May 2026 19:44:15 +0200
Subject: [PATCH] Make CSS border-radius and padding properties values dynamic

---
 src/static/css/main.css | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/static/css/main.css b/src/static/css/main.css
index b4b14de..ddc3751 100644
--- a/src/static/css/main.css
+++ b/src/static/css/main.css
@@ -1,6 +1,7 @@
 body {
     margin: 0;
     background-color: #ffffff;
+    font-size: 16px;
 }
 .hero {
     background: 
@@ -37,12 +38,16 @@ form {
 }
 
 .search-wrapper {
+    --submit-button-padding-y: 8px;
+    --submit-button-content-height: 18px;
+    --padding: 4px;
     display: flex;
     align-items: center;
     width: 80%;
     border: 1.5px solid #ccc;
-    border-radius: 999px;
-    padding: 4px 4px 4px 16px;
+    border-radius: calc(var(--submit-button-content-height) + var(--padding));
+    padding: var(--padding);
+    padding-left: calc(var(--submit-button-content-height) + var(--padding));
 }
 
 .search-wrapper input {
@@ -54,9 +59,11 @@ form {
 }
 
 .search-wrapper button {
-    border-radius: 999px;
+    font-size: 1rem;
+    height: calc(var(--submit-button-content-height) + 2 * var(--submit-button-padding-y));
+    border-radius: calc(var(--submit-button-content-height) * 0.5 + var(--submit-button-padding-y));
     border: none;
-    padding: 8px 20px;
+    padding: var(--submit-button-padding-y) 20px;
     background: #4562BE;
     color: white;
     cursor: pointer;