feat: Add dynamic spacing variables

- Use dynamic spacing for main element and sections
- Fix wonky padding when opening and closing faq answers

css/style.css

@@ -1,5 +1,5 @@
 @font-face {
-/* 
+/*
   Note: The font files are not included in this repository due to legal restrictions.
   For more information, please refer to the README.md file located in the 'fonts' directory.
 */
@@ -10,6 +10,7 @@
     font-style: normal;
     font-display: swap;
 }
+
 :root {
     --cyber-bg-color: #05130f;
     --cyber-font-color: #e8f0f2;
@@ -20,6 +21,10 @@
     --cyber-hero-overlay: rgba(0, 0, 0, 0.7);
     --cyber-shadow: rgba(0, 0, 0, 0.5);
     --cyber-slider-thumb-bg: #fff;
+
+	/* Spacing */
+	--spacing-sm: clamp(0.75rem, 0.4295rem + 1.3675vw, 1.25rem);; /* 12px to 20px */
+	--spacing-md: clamp(1.5rem, 1.1795rem + 1.3675vw, 2rem);; /* 16px to 32px */
 }
 
 /* General Styles */
@@ -79,14 +84,14 @@ h1 {
 
 /* Main content */
 main {
-    padding: 40px 20px;
+    padding-inline: var(--spacing-sm);
     max-width: 1000px;
     margin: 0 auto;
 }
 
 .form-section {
     background-color: #102f2a;
-    padding: 30px;
+    padding: var(--spacing-md);
     border-radius: 10px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
     margin-bottom: 40px;
@@ -208,7 +213,7 @@ button:active {
 /* FAQ Section */
 .faq-section {
     background-color: var(--cyber-faq-bg-color);
-    padding: 30px;
+	padding: var(--spacing-md);
     border-radius: 10px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
     color: var(--cyber-font-color);
@@ -243,12 +248,12 @@ button:active {
     display: block;
     font-weight: bold;
     color: var(--cyber-highlight-color);
-    padding: 15px;
+    padding: var(--spacing-sm);
     background-color: #102f2a;
     border-radius: 8px;
     cursor: pointer;
     position: relative;
-    margin-bottom: 5px;
+    margin-bottom: var(--spacing-sm);
     transition: background-color 0.3s;
     white-space: normal;
     overflow: visible;
@@ -267,9 +272,9 @@ button:active {
 
 .faq-answer {
     max-height: 0;
+	display: none;
     overflow: hidden;
-    transition: max-height 0.5s ease;
+    padding: var(--spacing-sm);
-    padding: 0 15px;
     background-color: var(--cyber-bg-color);
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
     border-radius: 8px;
@@ -278,7 +283,7 @@ button:active {
 
 .faq-checkbox:checked + .faq-question + .faq-answer {
     max-height: 100%;
-    padding: 15px;
+	display: block;
 }
 /* List Styles for FAQ */
 .faq-answer ul,
@@ -308,7 +313,7 @@ button:active {
 /* Credits Section */
 .credits-section {
     background-color: var(--cyber-faq-bg-color);
-    padding: 30px;
+	padding: var(--spacing-md);
     border-radius: 10px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
     color: var(--cyber-font-color);
@@ -540,4 +545,4 @@ a {
 a:hover {
     text-decoration: none;
     color: var(--cyber-secondary-color);
-}
+}