/* custom.css in the folder */
span.abcd {
    background-color: #fff831;
    padding: 0 4px;
    border-radius: 3px;
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
    font-size: 2rem;
}

:root {
    --vyasa-glow-size: 32px;
    --vyasa-glow-size-hover: 128px;
}

@keyframes vyasa-rainbow-glow {
    0% { box-shadow: 0 0 var(--vyasa-glow-size) rgba(255, 90, 90, 0.95); }
    16% { box-shadow: 0 0 var(--vyasa-glow-size) rgba(255, 170, 80, 0.95); }
    33% { box-shadow: 0 0 var(--vyasa-glow-size) rgba(255, 235, 80, 0.95); }
    50% { box-shadow: 0 0 var(--vyasa-glow-size) rgba(90, 255, 140, 0.95); }
    66% { box-shadow: 0 0 var(--vyasa-glow-size) rgba(90, 200, 255, 0.95); }
    83% { box-shadow: 0 0 var(--vyasa-glow-size) rgba(170, 110, 255, 0.95); }
    100% { box-shadow: 0 0 var(--vyasa-glow-size) rgba(255, 90, 90, 0.95); }
}

@keyframes vyasa-rainbow-glow-hover {
    0% { box-shadow: 0 0 var(--vyasa-glow-size-hover) rgba(255, 90, 90, 0.95); }
    16% { box-shadow: 0 0 var(--vyasa-glow-size-hover) rgba(255, 170, 80, 0.95); }
    33% { box-shadow: 0 0 var(--vyasa-glow-size-hover) rgba(255, 235, 80, 0.95); }
    50% { box-shadow: 0 0 var(--vyasa-glow-size-hover) rgba(90, 255, 140, 0.95); }
    66% { box-shadow: 0 0 var(--vyasa-glow-size-hover) rgba(90, 200, 255, 0.95); }
    83% { box-shadow: 0 0 var(--vyasa-glow-size-hover) rgba(170, 110, 255, 0.95); }
    100% { box-shadow: 0 0 var(--vyasa-glow-size-hover) rgba(255, 90, 90, 0.95); }
}

.vyasa-icon {
    box-shadow: 0 0 18px rgba(238, 115, 115, 0.85);
    transform: scale(0.96);
    transition: transform 200ms ease;
    animation: vyasa-rainbow-glow 60s linear infinite;
    z-index: 10;
    position: relative;
}

.vyasa-icon:hover {
    transform: scale(1.45);
    animation: vyasa-rainbow-glow-hover 10s linear infinite;
}

.vyasa-caption {
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 1.2rem;
    color: #0f172a;
    text-shadow: 0 1px 0 rgba(255, 200, 80, 0.7), 0 -1px 0 rgba(90, 200, 255, 0.7), 0 0 10px rgba(255, 180, 90, 0.35);
    position: relative;
    z-index: 5;
}

/* Global background + text color */
html, body {
    background-color: #f6f3ee !important;
    color: #1f2937 !important;
}

#page-container,
#main-content,
main.layout-container,
body > .layout-container {
    background-color: transparent !important;
    color: inherit;
}