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,7 +10,6 @@
     font-style: normal;
     font-display: swap;
 }
-
 :root {
     --cyber-bg-color: #05130f;
     --cyber-font-color: #e8f0f2;
@@ -21,10 +20,6 @@
     --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 */
@@ -84,14 +79,14 @@ h1 {
 
 /* Main content */
 main {
-    padding-inline: var(--spacing-sm);
+    padding: 40px 20px;
     max-width: 1000px;
     margin: 0 auto;
 }
 
 .form-section {
     background-color: #102f2a;
-    padding: var(--spacing-md);
+    padding: 30px;
     border-radius: 10px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
     margin-bottom: 40px;
@@ -105,9 +100,7 @@ main {
 
 input[type="text"] {
     font-family: 'Departure Mono';
-	font-size: inherit;
-	line-height: 1.35;
-    width: 100%;
+    width: calc(100% - 20px);
     padding: 10px;
     border: 2px solid var(--cyber-primary-color);
     border-radius: 5px;
@@ -124,14 +117,9 @@ input[type="text"]:focus {
 /* Radio Buttons */
 .radio-group {
     display: flex;
-	flex-direction: column;
-    justify-content: space-between;
+    justify-content: space-around;
     flex-wrap: wrap;
-	gap: var(--spacing-sm);
 
-	@media (width > 768px) {
-		flex-direction: row;
-	}
 }
 
 .radio-group input[type="radio"] {
@@ -139,7 +127,8 @@ input[type="text"]:focus {
 }
 
 .radio-group label {
-	flex: 1;
+    width: calc(25% - 10px);
+    margin: 5px;
     padding: 10px;
     text-align: center;
     cursor: pointer;
@@ -163,12 +152,11 @@ 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);
@@ -220,7 +208,7 @@ button:active {
 /* FAQ Section */
 .faq-section {
     background-color: var(--cyber-faq-bg-color);
-	padding: var(--spacing-md);
+    padding: 30px;
     border-radius: 10px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
     color: var(--cyber-font-color);
@@ -255,12 +243,12 @@ button:active {
     display: block;
     font-weight: bold;
     color: var(--cyber-highlight-color);
-    padding: var(--spacing-sm);
+    padding: 15px;
     background-color: #102f2a;
     border-radius: 8px;
     cursor: pointer;
     position: relative;
-    margin-bottom: var(--spacing-sm);
+    margin-bottom: 5px;
     transition: background-color 0.3s;
     white-space: normal;
     overflow: visible;
@@ -279,9 +267,9 @@ button:active {
 
 .faq-answer {
     max-height: 0;
-	display: none;
     overflow: hidden;
-    padding: var(--spacing-sm);
+    transition: max-height 0.5s ease;
+    padding: 0 15px;
     background-color: var(--cyber-bg-color);
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
     border-radius: 8px;
@@ -290,7 +278,7 @@ button:active {
 
 .faq-checkbox:checked + .faq-question + .faq-answer {
     max-height: 100%;
-	display: block;
+    padding: 15px;
 }
 /* List Styles for FAQ */
 .faq-answer ul,
@@ -320,7 +308,7 @@ button:active {
 /* Credits Section */
 .credits-section {
     background-color: var(--cyber-faq-bg-color);
-	padding: var(--spacing-md);
+    padding: 30px;
     border-radius: 10px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
     color: var(--cyber-font-color);
@@ -443,25 +431,21 @@ button:active {
 /* Slider */
 .slider-container {
     margin: 20px 0;
+    text-align: center;
     color: var(--cyber-font-color);
     display: flex;
-	flex-wrap: wrap;
     align-items: center;
-	text-align: center;
-    gap: var(--spacing-sm) var(--spacing-md);
+    justify-content: center;
+    gap: 15px;
 }
 
 .slider-container label {
     font-size: 1.2rem;
-
-	@media (width < 568px) {
-		width: 100%;
-	}
 }
 
 input[type="range"] {
     -webkit-appearance: none;
-    flex: 1;
+    width: 70%;
     margin: 10.5px 0;
     background-color: var(--cyber-faq-bg-color);
 }
@@ -543,6 +527,7 @@ input[type="range"]::-ms-thumb {
 
 #sliderValueDisplay {
     font-size: 1.1rem;
+    margin-left: 10px;
     color: var(--cyber-primary-color);
     font-weight: bold;
 }
@@ -555,4 +540,4 @@ a {
 a:hover {
     text-decoration: none;
     color: var(--cyber-secondary-color);
-}
+}