.orb {
    font-family: Orbitron !important;
    text-decoration: none !important;
    /*font-weight: bold;*/
}

.clLogo a {
    font-family: Orbitron !important;
    text-decoration: none !important;
    font-weight: bolder;
    font-size: 2.1rem;
    text-shadow: var(--shadow-offset-x) var(--shadow-offset-y) var(--shadow-blur-radius) rgba(0, 0, 0, 0.7), var(--glow-offset-x) var(--glow-offset-y) calc(var(--glow-blur-radius-1) * 0.8) var(--glow-color-2), var(--glow-offset-x) var(--glow-offset-y) calc(var(--glow-blur-radius-2) * 0.9) var(--glow-color-1), var(--glow-offset-x) var(--glow-offset-y) var(--glow-blur-radius-3) var(--glow-color-2) !important;
}




.podcast-card-description a {
    margin-right: 5px;
    text-decoration: underline;
}
    .podcast-card-description a:hover {
        margin-right: 5px;
        text-decoration: none;
        color: var(--bs-secondary) !important;
    }

.card-button {
    width: 100%;
}

.btn {
    text-transform: none;
}
.btn.active {
    box-shadow: 1px 1px 5px 0 var(--bs-secondary),-1px -1px 3px var(--bs-secondary);
    color: var(--bs-secondary);
    outline: 1px solid var(--bs-secondary); /* Example: Use Bootstrap's primary color */
    outline-offset: 1px; /* Optional: Adds space between the element and the outline */
    /*box-shadow: 0 0 5px var(--bs-light); */ /*Optional: Adds a subtle box shadow */
    /*color: var(--bs-primary) !important;*/
    /*box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;*/
}

:root {
    --youtube-black: #0f0f0f;
    --youtube-dark-gray: #282828;

    /* Add your custom variables */
    --shadow-offset-x: 2px;
    --shadow-offset-y: 2px;
    --shadow-blur-radius: 1px;
    --shadow-color-rgba: rgba(0, 0, 0, 0.3);
    --glow-offset-x: 0;
    --glow-offset-y: 0;
    --glow-blur-radius-1: 15px;
    --glow-blur-radius-2: 10px;
    --glow-blur-radius-3: 50px;
    /* Extended options for glow colors using Bootstrap variables */
    --glow-color-1: var(--bs-body-bg); /* Body background */
    --glow-color-2: var(--bs-primary); /* Primary color */
    --glow-color-3: var(--bs-secondary); /* Secondary */
    --glow-color-4: var(--bs-success); /* Success color */
    --glow-color-5: var(--bs-info); /* Info color */
    --glow-color-6: var(--bs-warning); /* Warning color */
    --glow-color-7: var(--bs-danger); /* Danger color */
    --glow-color-8: var(--bs-light); /* Light color */
    --glow-color-9: var(--bs-dark); /* Dark color */
    --glow-color-10: var(--bs-white); /* White color */
    --glow-color-11: var(--bs-gray); /* Gray color */
    --glow-color-12: var(--bs-gray-100); /* Gray 100 */
    --glow-color-13: var(--bs-gray-200); /* Gray 200 */
    --glow-color-14: var(--bs-gray-300); /* Gray 300 */
    --glow-color-15: var(--bs-gray-400); /* Gray 400 */
    --glow-color-16: var(--bs-gray-500); /* Gray 500 */
    --glow-color-17: var(--bs-gray-600); /* Gray 600 */
    --glow-color-18: var(--bs-gray-700); /* Gray 700 */
    --glow-color-19: var(--bs-gray-800); /* Gray 800 */
    --glow-color-20: var(--bs-gray-900); /* Gray 900 */
    /* Custom colors */
    --custom-glow-color-1: rgba(255, 165, 0, 0.7); /* Orange with some transparency */
    --custom-glow-color-2: rgba(128, 0, 128, 0.5); /* Purple with some transparency */
    --custom-glow-color-3: rgba(0, 255, 255, 0.6); /* Cyan with some transparency */
    --custom-glow-color-4: rgba(255, 0, 255, 0.6); /* magenta with some transparency */
}

.rounded {
    border-radius: .55rem !important;
}

.shadow-inset {
    box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 5px #fff !important;
}

.shadow-soft {
    box-shadow: 1px 1px 5px 0 var(--bs-secondary), -1px -1px 5px 0 var(--bs-light);
}

.cool-shadow {
    /*color: var(--bs-dark) !important;*/
    text-shadow: var(--shadow-offset-x) var(--shadow-offset-y) var(--shadow-blur-radius) rgba(0, 0, 0, 0.1), var(--glow-offset-x) var(--glow-offset-y) calc(var(--glow-blur-radius-1) * 0.3) var(--glow-color-2), var(--glow-offset-x) var(--glow-offset-y) calc(var(--glow-blur-radius-2) * 0.2) var(--glow-color-1), var(--glow-offset-x) var(--glow-offset-y) var(--glow-blur-radius-3) var(--glow-color-2) !important;
    /* text-shadow: var(--shadow-offset-x) var(--shadow-offset-y) var(--shadow-blur-radius) var(--shadow-color-rgba), var(--glow-offset-x) var(--glow-offset-y) var(--glow-blur-radius-1) var(--glow-color-1), var(--glow-offset-x) var(--glow-offset-y) var(--glow-blur-radius-2) var(--glow-color-2), var(--glow-offset-x) var(--glow-offset-y) var(--glow-blur-radius-3) var(--glow-color-8);*/
    /* text-shadow: var(--shadow-offset-x) var(--shadow-offset-y) var(--shadow-blur-radius) rgba(0, 0, 0, 0.7), var(--glow-offset-x) var(--glow-offset-y) calc(var(--glow-blur-radius-1) * 0.8) var(--glow-color-2), var(--glow-offset-x) var(--glow-offset-y) calc(var(--glow-blur-radius-2) * 0.9) var(--glow-color-1), var(--glow-offset-x) var(--glow-offset-y) var(--glow-blur-radius-3) var(--glow-color-2) !important;*/
}

    .cool-shadow:hover {
        /*color: var(--bs-primary);*/
        /*text-shadow: var(--shadow-offset-x) var(--shadow-offset-y) var(--shadow-blur-radius) rgba(0, 0, 0, 0.7), var(--glow-offset-x) var(--glow-offset-y) calc(var(--glow-blur-radius-1) * 0.8) var(--glow-color-2), var(--glow-offset-x) var(--glow-offset-y) calc(var(--glow-blur-radius-2) * 0.9) var(--glow-color-1), var(--glow-offset-x) var(--glow-offset-y) var(--glow-blur-radius-3) var(--glow-color-2) !important;*/
    }

    .cool-shadow:active {
        color: var(--bs-primary);
        text-shadow: var(--shadow-offset-x) var(--shadow-offset-y) var(--shadow-blur-radius) rgba(0, 0, 0, 0.7), 
            var(--glow-offset-x) var(--glow-offset-y) calc(var(--glow-blur-radius-1) * 0.8) var(--glow-color-2), 
            var(--glow-offset-x) var(--glow-offset-y) calc(var(--glow-blur-radius-2) * 0.9) var(--glow-color-1), 
            var(--glow-offset-x) var(--glow-offset-y) var(--glow-blur-radius-3) var(--glow-color-2) !important;
    }

    .cool-shadow.bright {
        text-shadow: var(--shadow-offset-x) var(--shadow-offset-y) var(--shadow-blur-radius) var(--shadow-color-rgba), 
            var(--glow-offset-x) var(--glow-offset-y) var(--glow-blur-radius-1) var(--glow-color-2), 
            var(--glow-offset-x) var(--glow-offset-y) var(--glow-blur-radius-2) var(--glow-color-3), 
            var(--glow-offset-x) var(--glow-offset-y) var(--glow-blur-radius-3) var(--glow-color-4) !important;
    }

    .cool-shadow.dim {
        text-shadow: calc(var(--shadow-offset-x) * 0.5) calc(var(--shadow-offset-y) * 0.5) calc(var(--shadow-blur-radius) * 0.5) rgba(0, 0, 0, 0.2), 
            var(--glow-offset-x) var(--glow-offset-y) calc(var(--glow-blur-radius-1) * 0.5) var(--glow-color-1), 
            var(--glow-offset-x) var(--glow-offset-y) calc(var(--glow-blur-radius-2) * 0.6) var(--glow-color-1), 
            var(--glow-offset-x) var(--glow-offset-y) calc(var(--glow-blur-radius-3) * 0.4) var(--glow-color-1) !important;
    }

    .cool-shadow.pulse {
        animation: pulseShadow 2s infinite ease-in-out;
    }

@keyframes pulseShadow {
    0%, 100% {
        text-shadow: var(--shadow-offset-x) var(--shadow-offset-y) var(--shadow-blur-radius) var(--shadow-color-rgba), var(--glow-offset-x) var(--glow-offset-y) var(--glow-blur-radius-1) var(--glow-color-1), var(--glow-offset-x) var(--glow-offset-y) var(--glow-blur-radius-2) var(--glow-color-2), var(--glow-offset-x) var(--glow-offset-y) var(--glow-blur-radius-3) var(--glow-color-2) !important;
    }

    50% {
        text-shadow: calc(var(--shadow-offset-x) * 1.2) calc(var(--shadow-offset-y) * 1.2) calc(var(--shadow-blur-radius) * 1.5) rgba(0, 0, 0, 0.4), var(--glow-offset-x) var(--glow-offset-y) calc(var(--glow-blur-radius-1) * 1.1) var(--glow-color-3), var(--glow-offset-x) var(--glow-offset-y) calc(var(--glow-blur-radius-2) * 1.3) var(--glow-color-4), var(--glow-offset-x) var(--glow-offset-y) calc(var(--glow-blur-radius-3) * 1.05) var(--glow-color-2) !important;
    }
}

/* Base styles for all variations */
.link-container {
    /*color: var(--bg-primary);*/
    display: inline-flex;
    position: relative;
    margin: 10px 0;
    font-family: Orbitron;
    text-align: center;
    z-index: 10;
    /*border-radius: 20px !important;*/
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.2), -1px -1px 3px 0 rgba(255, 255, 255, 0.5);
}
    .link-container:hover {
        /*box-shadow: 1px 1px 3px 0 var(--bs-info), -1px -1px 3px 0 var(--bs-info);*/
        box-shadow: 1px 1px 5px 0 var(--bs-secondary),-1px -1px 3px var(--bs-secondary);
    }



/* Podcast chip styles */
.podcast-chip {
    flex: 0 0 auto; /* Don't grow or shrink */
    width: 190px; /* Fixed width */
    height: 525px; /* Adjusted height */
    margin: 10px 0 10px 0px; /* Remove margin that was causing inconsistency */
    /* cursor: pointer; */
}
/* game chip styles */
.game-chip {
    flex: 0 0 auto; /* Don't grow or shrink */
    width: 190px; /* Fixed width */
    height: 525px; /* Adjusted height */
    margin: 10px 0 10px 0px; /* Remove margin that was causing inconsistency */
    /* cursor: pointer; */
}

.podcast-card {
    display: flex;
    flex-direction: column;
    width: 100%; /* Take full width of the chip */
    height: 100%; /* Take full height of the chip */
    /*background-color: #282828;*/
    /* background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.1)); */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    box-shadow: 1px 1px 5px 0 var(--bs-secondary), -1px -1px 5px 0 var(--bs-light);
    /*box-shadow: 0 0 10px rgba(56, 238, 255, 0.7), 0 0 6px rgba(56, 238, 255, 0.4);*/
    transition: box-shadow 0.3s ease;
    /* color: aliceblue;*/
    /* font-family: 'Audiowide'; */
    overflow: hidden; /* Ensure content doesn't overflow */
}

    .podcast-card:hover {
        /*transform: translateY(-5px);*/
        box-shadow: 1px 1px 5px 0 var(--bs-light),-1px -1px 5px var(--bs-secondary);
    }

/* Card header */
.podcast-card-header {
    height: 180px; /* Fixed height */
    /*background: rgba(255, 255, 255, 0.05);*/
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Ensure images don't overflow */

    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.5), rgba(30, 30, 30, 0.5));
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
}

    .podcast-card-header img {
        width: 100%;
        height: 100%;
        object-fit: fill; 
        padding: 0px;
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
    }

/* Card body */
.podcast-card-body {
    flex: 1; /* Take remaining space */
    display: flex;
    flex-direction: column;
    padding: 10px;
    padding-bottom: 0px;
    overflow: hidden; /* Prevent content overflow */
}

.podcast-card-title {
    flex: 0 0 auto; /* Don't grow or shrink */
    font-size: .8rem;
    white-space: normal; /* Allow text to wrap */
    font-weight: bolder;
    font-family: Orbitron;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .podcast-card-title a {
        /*color: aliceblue;*/ /* Change to Bootstrap primary color on hover */
        /* text-shadow: 2px 2px 1px rgba(0,0,0,0.3), 0 0px 15px #fff, 0 0 10px #38eeff, 0 0 50px #38eeff; */
        text-decoration: none;
    }

        .podcast-card-title a:hover {
           /* color: skyblue;*/ /* Change to Bootstrap primary color on hover */
            /* text-shadow: 2px 2px 1px rgba(0,0,0,0.3), 0 0px 15px #fff, 0 0 10px #38eeff, 0 0 50px #38eeff; */
            text-decoration: none;
        }

.podcast-card-subtitle {
    font-size: 0.7rem;
    color: var(--bs-light);
    margin-bottom: 0.5rem;
    white-space: normal;
    font-family: Orbitron;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--bg-primary);
}

.podcast-card-text {
    font-size: 0.6rem;
    /*color: lemonchiffon;*/
    margin-bottom: 0.5rem;
}

.podcast-card-description {
    font-family: Orbitron;
    position: relative;
    overflow: hidden;
    /*font-size: 0.8rem;*/
    margin-bottom: 0.5rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    margin-bottom: 0;
    padding-bottom: 0; /* Removed padding that could interfere */
}

/* Card footer */
.podcast-card-footer {
    /*     font-family: Audiowide; */
    background: rgba(25, 25, 25, 0.95);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px;
    min-height: 60px;
    max-height: auto;
    position: relative; /* Required for absolute positioning of pseudo-element */
}

    .podcast-card-footer::before {
        content: '';
        position: absolute;
        top: -60px; /* Position the gradient above the footer */
        left: 0;
        width: 100%;
        height: 60px;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(20, 20, 20, 0.7) 70%, rgba(25, 25, 25, 0.9) 100%);
        pointer-events: none; /* Make sure the gradient doesn't block clicks */
    }

.podcast-categories-container a {
    /*color: aliceblue;*/ /* Change to Bootstrap primary color on hover */
   /* text-shadow: 2px 2px 1px rgba(0,0,0,0.3), 0 0px 15px #fff, 0 0 10px #38eeff, 0 0 50px #38eeff;*/
    text-decoration: none;
}

    .podcast-categories-container a:hover {
        /*color: skyblue;*/ /* Change to Bootstrap primary color on hover */
        /*text-shadow: 2px 2px 1px rgba(0,0,0,0.3), 0 0px 15px #fff, 0 0 10px #38eeff, 0 0 50px #38eeff;*/
        text-decoration: none;
    }

/* Categories container */
.podcast-categories-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    justify-content: center;
}

.podcast-category-chip {
    font-size: 0.8rem !important;
    text-align: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

    .podcast-category-chip:hover {
    }









/* Variation 1: top menu */
.link-container.cyber a {
    padding: 8px 16px;
    font-size: 1.0rem;
    background: rgba(56, 238, 255, 0.2);
    box-shadow: 0 0 10px rgba(56, 238, 255, 0.7);
    color: aliceblue;
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3), 0 0px 15px #fff, 0 0 10px #38eeff, 0 0 50px #38eeff !important;
}

    .link-container.cyber a:hover {
        background: rgba(0, 0, 0, 0.3);
        box-shadow: 0 0 10px rgba(56, 238, 255, 0.7);
        color: rgba(56, 238, 255);
        text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3), 0 0px 15px #fff, 0 0 10px #38eeff, 0 0 50px #38eeff !important;
    }
/* Variation 2: pod card */
.link-container.pod a {
    min-width: 100%;
    white-space: normal; /* Allow text to wrap */
    display: flex;
    font-size: 0.9rem;
    font-weight: 200;
    background: rgba(56, 238, 255, 0.2);
    box-shadow: 0 0 10px rgba(56, 238, 255, 0.7);
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3), 0 0px 15px #fff, 0 0 10px #38eeff, 0 0 50px #38eeff !important;
}

    .link-container.pod a:hover {
        background: rgba(0, 0, 0, 0.3);
        box-shadow: 0 0 10px rgba(56, 238, 255, 0.7);
        color: rgba(56, 238, 255);
        text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3), 0 0px 15px #fff, 0 0 10px #38eeff, 0 0 50px #38eeff !important;
    }
/* Variation 2.1: pod2 card */
.link-container.pod2 a {
    white-space: normal; /* Allow text to wrap */
    display: flex;
    font-size: 0.7rem;
    font-weight: 100;
    /*background: rgba(56, 238, 255, 0.2);*/
    box-shadow: 0 0 10px rgba(56, 238, 255, 0.7);
    /*color: aliceblue;*/
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3), 0 0px 15px #fff, 0 0 10px #38eeff, 0 0 50px #38eeff !important;
}

    .link-container.pod2 a:hover {
       /* background: rgba(0, 0, 0, 0.3);*/
        box-shadow: 0 0 10px rgba(56, 238, 255, 0.7);
        /*color: rgba(56, 238, 255);*/
        text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3), 0 0px 15px #fff, 0 0 10px #38eeff, 0 0 50px #38eeff !important;
    }

/* Variation 3: Electric Pulse */
.link-container.pulse a {
    background: rgba(20, 60, 80, 0.3);
    border: 1px solid rgba(56, 238, 255, 0.3);
    color: #d8f8ff;
    box-shadow: 0 0 5px rgba(56, 238, 255, 0.5);
    text-shadow: 0 0 2px #fff, 0 0 4px #38eeff;
    /* animation: pulse 2s infinite alternate; */
}

@keyframes pulse {
    0% {
        text-shadow: 0 0 2px #fff, 0 0 4px #38eeff;
    }

    100% {
        text-shadow: 0 0 1px #fff, 0 0 6px #38eeff, 0 0 8px #38eeff;
    }
}

.link-container.pulse a:hover {
    background: rgba(0, 0, 0, 0.4);
    animation: none;
    color: #38eeff;
    text-shadow: none;
}

/* Variation 4: Frost Edge */
.link-container.frost a {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(56, 238, 255, 0.2);
    color: white;
    box-shadow: 0 0 6px rgba(56, 238, 255, 0.3);
    text-shadow: 0 0 1px #fff, 0 0 3px rgba(56, 238, 255, 0.7);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

    .link-container.frost a:hover {
        background: rgba(0, 0, 0, 0.2);
        border-color: rgba(56, 238, 255, 0.4);
        box-shadow: none;
        color: #38eeff;
        text-shadow: none;
    }

/* Variation 5: Gradient Glow */
.link-container.gradient a {
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.3), rgba(56, 238, 255, 0.1));
    border: 1px solid rgba(56, 238, 255, 0.3);
    color: white;
    box-shadow: 0 0 8px rgba(56, 238, 255, 0.4);
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.7), 0 0 4px rgba(56, 238, 255, 0.8);
}

    .link-container.gradient a:hover {
        background: linear-gradient(45deg, rgba(56, 238, 255, 0.1), rgba(0, 0, 0, 0.3));
        color: skyblue;
        box-shadow: none;
        text-shadow: none;
    }

/* Variation 6: Holographic */
.link-container.holo a {
    background: rgba(30, 50, 70, 0.3);
    border: 1px solid rgba(56, 238, 255, 0.4);
    color: #e0f8ff;
    box-shadow: 0 0 5px rgba(56, 238, 255, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.1);
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.8), 1px 1px 1px rgba(56, 238, 255, 0.5);
    position: relative;
    overflow: hidden;
}

    .link-container.holo a::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient( to bottom right, transparent, transparent, transparent, rgba(56, 238, 255, 0.1), transparent, transparent, transparent );
        transform: rotate(30deg);
        animation: holographic 3s infinite linear;
        pointer-events: none;
    }

@keyframes holographic {
    0% {
        transform: translateX(-50%) translateY(-50%) rotate(0deg);
    }

    100% {
        transform: translateX(-50%) translateY(-50%) rotate(360deg);
    }
}

.link-container.holo a:hover {
    background: rgba(0, 0, 0, 0.4);
    box-shadow: none;
    text-shadow: none;
    color: #38eeff;
}