feat: Optimize the cyber score slider to fit better on mobile

- The labels aren't cut off anymore
- Instead of trying to fit four buttons next to each other they're now one each line when not enough room is there

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;
@@ -100,7 +105,9 @@ main {
 
 input[type="text"] {
     font-family: 'Departure Mono';
-    width: calc(100% - 20px);
+	font-size: inherit;
+	line-height: 1.35;
+    width: 100%;
     padding: 10px;
     border: 2px solid var(--cyber-primary-color);
     border-radius: 5px;
@@ -117,9 +124,14 @@ input[type="text"]:focus {
 /* Radio Buttons */
 .radio-group {
     display: flex;
-    justify-content: space-around;
+	flex-direction: column;
+    justify-content: space-between;
     flex-wrap: wrap;
+	gap: var(--spacing-sm);
 
+	@media (width > 768px) {
+		flex-direction: row;
+	}
 }
 
 .radio-group input[type="radio"] {
@@ -127,8 +139,7 @@ input[type="text"]:focus {
 }
 
 .radio-group label {
-    width: calc(25% - 10px);
-    margin: 5px;
+	flex: 1;
     padding: 10px;
     text-align: center;
     cursor: pointer;
@@ -152,11 +163,12 @@ input[type="text"]:focus {
 /* Buttons */
 button {
     font-family: 'Departure Mono';
+	font-size: inherit;
+	line-height: 1.35;
     padding: 10px 20px;
     border-radius: 5px;
     background-color: var(--cyber-bg-color);
     color: var(--cyber-font-color);
-    font-size: 1rem;
     cursor: pointer;
     border: 2px solid transparent;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
@@ -208,7 +220,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 +255,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 +279,9 @@ button:active {
 
 .faq-answer {
     max-height: 0;
+	display: none;
     overflow: hidden;
-    transition: max-height 0.5s ease;
-    padding: 0 15px;
+    padding: var(--spacing-sm);
     background-color: var(--cyber-bg-color);
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
     border-radius: 8px;
@@ -278,7 +290,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 +320,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);
@@ -431,21 +443,25 @@ button:active {
 /* Slider */
 .slider-container {
     margin: 20px 0;
-    text-align: center;
     color: var(--cyber-font-color);
     display: flex;
+	flex-wrap: wrap;
     align-items: center;
-    justify-content: center;
-    gap: 15px;
+	text-align: center;
+    gap: var(--spacing-sm) var(--spacing-md);
 }
 
 .slider-container label {
     font-size: 1.2rem;
+
+	@media (width < 568px) {
+		width: 100%;
+	}
 }
 
 input[type="range"] {
     -webkit-appearance: none;
-    width: 70%;
+    flex: 1;
     margin: 10.5px 0;
     background-color: var(--cyber-faq-bg-color);
 }
@@ -527,7 +543,6 @@ input[type="range"]::-ms-thumb {
 
 #sliderValueDisplay {
     font-size: 1.1rem;
-    margin-left: 10px;
     color: var(--cyber-primary-color);
     font-weight: bold;
 }
@@ -540,4 +555,4 @@ a {
 a:hover {
     text-decoration: none;
     color: var(--cyber-secondary-color);
-}
+}