Update vpn-implementation-assessment.html

Signed-off-by: Raydo M <[email protected]>

vpn-implementation-assessment.html

@@ -156,7 +156,51 @@
             transform: translateY(-2px);
             box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
         }
+        /* Add these styles to the existing <style> section */
+        button {
+            /* Previous button styles remain */
+            display: block;
+            margin: 2rem auto;  /* Centers the button horizontally */
+            text-align: center;
+            width: auto;
+            min-width: 200px;
+        }
 
+        .footer {
+            text-align: center;
+            padding: 2rem 0;
+            margin-top: 3rem;
+            background: rgba(255, 255, 255, 0.03);
+        }
+
+        .footer-content {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 0 1rem;
+        }
+
+        .footer p {
+            margin: 0.5rem 0;
+            color: var(--text-color);
+            opacity: 0.8;
+        }
+
+        /* Add this to ensure form sections are properly centered */
+        .container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        form {
+            width: 100%;
+            max-width: 1200px;
+        }
+
+        /* Ensure section headings are centered */
+        .section h2 {
+            text-align: center;
+        }
         .tooltip {
             position: relative;
             display: inline-block;
@@ -187,7 +231,62 @@
         .tooltip:hover .tooltip-text {
             visibility: visible;
         }
+        /* Add/update these styles in your existing <style> section */
+        select {
+            width: 100%;
+            padding: 0.8rem;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 8px;
+            background: rgb(28, 37, 54);  /* Darker blue background */
+            color: var(--text-color);
+            font-size: 1rem;
+            transition: all 0.3s ease;
+            cursor: pointer;
+            appearance: none;  /* Removes default browser styling */
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            padding-right: 2.5rem;  /* Space for custom arrow */
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%233498DB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: right 0.8rem center;
+            background-size: 1.2rem;
+        }
+
+        select:hover {
+            background-color: rgb(35, 45, 65);  /* Slightly lighter on hover */
+            border-color: var(--accent-color);
+        }
 
+        select:focus {
+            outline: none;
+            border-color: var(--accent-color);
+            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
+            background-color: rgb(35, 45, 65);
+        }
+
+        /* Style the options within the dropdown */
+        select option {
+            background: rgb(28, 37, 54);  /* Match select background */
+            color: #ffffff;  /* Bright white text for better contrast */
+            padding: 1rem;
+        }
+
+        /* Style for disabled options if needed */
+        select option:disabled {
+            color: rgba(255, 255, 255, 0.5);
+        }
+
+        /* Ensure the placeholder option is styled differently */
+        select option:first-child {
+            font-style: italic;
+            color: rgba(255, 255, 255, 0.7);
+        }
+
+        /* For browsers that support it, style the dropdown when open */
+        select:focus option:checked {
+            background: var(--accent-color);
+            color: white;
+        }
         @media (max-width: 768px) {
             body {
                 padding: 1rem;