:root {
    --bs-primary: #0D0D0D; 
    --bs-secondary: #a200ff; 
    --bs-dark: #1b1b1b; 
    --bs-light: #d9d9d9;
    }
    
    
    .navbar-nav .nav-link:hover {
    background-color: var(--bs-primary); /* Choose a color of your preference */
    }
    
    .bg-navbar{
        background-color: var(--bs-primary);
    }
    
    body {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 100vh; /* This ensures the body takes at least the full height of the viewport */
        background-color: var(--bs-dark);
        color: var(--bs-light);
        /* background: linear-gradient(to bottom right, black, #2E6F7E);  */
        background: linear-gradient(to bottom right, #d10000, rgb(96, 0, 0) ); 
    }
    
    /* h1, h2, h3, h4, h5, h6 {
        background: linear-gradient(to right, var(--bs-primary), var(--bs-secondary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    } */
    h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {
        background: linear-gradient(to right, var(--bs-primary), var(--bs-secondary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        display: inline; /* This ensures the background only takes up the space of the text */
    }
    
    main {
        flex: 1; /* This ensures the main content takes up the remaining space */
    }
    
    footer {
        background-color: #f8f9fa; /* Set the background color for better visibility */
        padding: 20px;
        text-align: center;
    }
    
    
    @keyframes hero-bg-scroll {
        0% {
            background-position: center top;
        }
        100% {
            background-position: center bottom;
        }
    }
    
    .hero-bg-animation {
        animation: hero-bg-scroll 10s linear forwards;
    }
    
    .jumbotron::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.5);
    }
    
    .jumbotron {
        position: relative;
      }
    
    .container {
        flex: 1;
    }
    
    
    .card {
        background-color: var(--bs-primary);
        color: #CDD5D1;
    }
    
    .bg-footer{
        background-color: var(--bs-primary);
        margin-top: auto;
    }
    
    .list-group {
        background: var(--bs-primary);
    }
    
    .list-group-item {
        background: var(--bs-primary);
        color: white; 
    }