:root {
    --hex-size: 50px;      /* Adjust this to make hexagons bigger or smaller */
    --hex-opacity: 0.05;   /* Background subtlety */
    --hex-stroke: 1px;     /* Thickness of the lines */
    --hex-color: #673de6;  /* Color of the hexagons */
}

.hexagon-bg-container, .hexagon-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    opacity: var(--hex-opacity);
    transition: opacity 0.3s ease;
}

.hexagon-bg-container svg, .hexagon-background svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Optional: Subtle animation for the background */
@keyframes backgroundDrift {
    from { transform: translate(0, 0); }
    to { transform: translate(20px, 20px); }
}

/* Uncomment if you want the background to move slightly */
/*
.hexagon-bg-container rect {
    animation: backgroundDrift 60s linear infinite alternate;
}
*/