:root {
            --dark-bg: #121212;
            --dark-card: #1e1e1e;
            --dark-text: #e4e4e4;
            --dark-text-secondary: #a0a0a0;
            --dark-border: #333333;
            --dark-hover: #2c2c2c;
            --dark-primary: #4a4a4a;
            --dark-primary-hover: #5a5a5a;
            --dark-green: #1a472a;
            --light-green: #2e8b57;
        }
        
        body {
            position: relative;
            background-color: #000000;
            color: var(--dark-text);
            padding-top: 52px; /* Navbar height to prevent content overlap */
        }
        
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('images/background.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            opacity: 0.35;
            filter: grayscale(100%);
            pointer-events: none;
        }
        
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            background:
                linear-gradient(
                    to bottom,
                    transparent 85%,
                    #1e1e1e 100%
                ),
                linear-gradient(
                    to right,
                    var(--dark-green),
                    var(--light-green)
                );
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }
        
        .navbar-item, .navbar-link {
            color: var(--dark-text);
        }
        
        .navbar-item:hover, .navbar-link:hover {
            background-color: rgba(255, 255, 255, 0.1) !important;
            color: white !important;
            transition: all 0.3s ease;
        }

        .navbar-burger span {
            color: white;
            height: 2px;
            width: 20px;
            background-color: white;
        }
        
        .navbar-burger:hover {
            background-color: rgba(255, 255, 255, 0.1) !important;
        }

        .navbar-menu.is-active {
            background-color: rgba(30, 30, 30, 0.5);
            border-bottom: 1px solid var(--dark-border);
        }
        
        .navbar-menu.is-active .navbar-item,
        .navbar-menu.is-active .navbar-link {
            color: var(--dark-text);
        }

        .hero, .section {
            background-color: rgba(30, 30, 30, 0.5) !important;
        }

        .card, .box {
            background-color: rgba(30, 30, 30, 0.6) !important;
            color: var(--dark-text);
            border: 1px solid var(--dark-border);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }
        
        .title, .subtitle {
            color: var(--dark-text);
        }
        
        .button.is-primary {
            background-color: var(--dark-primary);
        }
        
        .button.is-primary:hover {
            background-color: var(--dark-primary-hover);
        }
        
        .footer {
            background-color: rgba(18, 18, 18, 0.6);
            color: var(--dark-text-secondary);
        }
        
        .section {
            padding: 3rem 1.5rem;
        }

        pre {
            background-color: black !important;
            color: lawngreen !important;
            font-family: monospace;
            padding: 1rem;
            border-radius: 4px;
            overflow-x: auto;
            margin-bottom: 1rem;
        }

        strong { color:rgb(153, 252, 187); font-weight:bold;}


        .tabs.is-boxed a:hover {
            background-color: green;
            color: white !important;
        }
        .tabs a {
            color: limegreen;
            font-weight: bold;
            border-bottom: 2px solid transparent;
        }
        .tabs.is-boxed li.is-active a {
            background-color:greenyellow;   
        }

        .table {
            background-color:darkgrey;
        }
        .table thead {
            background-color: slategrey;
            color: white;
        }

        .label {
            color: skyblue;
        }

        .input {
            background-color:darkslategrey;
            color:white;
        }

        .select select {
            background-color: darkslategrey;
            color: white;
        }

        .textarea {
            background-color: darkslategrey;
            color: white;
        }