/* Sidebar Container */ .sidebar-nav-vertical { display: flex; flex-direction: column; /* vertical column */ gap: 15px; /* space between buttons */ width: 220px; /* fixed width for all buttons */ padding: 20px; background-color: transparent; /* transparent background */ align-items: center; /* center buttons in container */ } /* Buttons */ .sidebar-nav-vertical .nav-btn { display: block; width: 100%; /* make all buttons same width */ padding: 12px 20px; background-color: rgba(17,17,17,0.8); /* slightly dark semi-transparent button */ color: #fff; text-decoration: none; font-weight: 600; text-align: center; text-transform: uppercase; border-radius: 8px; border: 2px solid #ff00ff; /* neon pink border */ transition: all 0.3s ease; } /* Hover Effect */ .sidebar-nav-vertical .nav-btn:hover { background-color: #ff00ff; /* neon pink fill */ color: #0a0a0a; /* dark text */ transform: translateX(5px); box-shadow: 0 4px 15px rgba(255,0,255,0.3); } /* Responsive (stack smaller width on mobile) */ @media (max-width: 768px) { .sidebar-nav-vertical { width: 80%; /* shrink on mobile */ margin: 0 auto; } }