/* Reset and base styles */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #ffffff; 
    font-family: sans-serif;
    overflow-x: hidden; 
}

/* The Background Container */
.scrolling-bg {
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%; 
    height: 200%;
    transform: rotate(-15deg);
    
    /* FIX 1: Set z-index to 0 so it stays above the body background, 
       but add pointer-events: none so it doesn't block you from clicking text */
    z-index: 0;
    pointer-events: none;
    
    /* FIX 2: Properly URL-encoded SVG so all browsers accept it */
    /*background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='black' stroke-width='3' fill='none' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M50 90 L15 50 L15 25 L35 10 L50 25 L65 10 L85 25 L85 50 Z' /%3E%3Cpath d='M50 90 L50 25' /%3E%3Cline x1='15' y1='50' x2='50' y2='60' /%3E%3Cline x1='85' y1='50' x2='50' y2='60' /%3E%3Cline x1='15' y1='25' x2='50' y2='60' /%3E%3Cline x1='85' y1='25' x2='50' y2='60' /%3E%3Cline x1='35' y1='10' x2='50' y2='60' /%3E%3Cline x1='65' y1='10' x2='50' y2='60' /%3E%3C/g%3E%3C/svg%3E");
    */
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' style='max-width: 100%25; max-height: 100%25; width: auto; height: auto; filter: drop-shadow(rgba(0, 0, 0, 0.1) 0px 4px 8px);'%3E%3Cg stroke='black' stroke-width='3' fill='none' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpolygon points='50,95 10,45 25,15 50,30 75,15 90,45'%3E%3C/polygon%3E%3Cline x1='50' y1='95' x2='25' y2='45'%3E%3C/line%3E%3Cline x1='50' y1='95' x2='75' y2='45'%3E%3C/line%3E%3Cline x1='50' y1='95' x2='50' y2='55'%3E%3C/line%3E%3Cline x1='10' y1='45' x2='50' y2='55'%3E%3C/line%3E%3Cline x1='90' y1='45' x2='50' y2='55'%3E%3C/line%3E%3Cline x1='25' y1='15' x2='25' y2='45'%3E%3C/line%3E%3Cline x1='75' y1='15' x2='75' y2='45'%3E%3C/line%3E%3Cline x1='25' y1='45' x2='50' y2='30'%3E%3C/line%3E%3Cline x1='75' y1='45' x2='50' y2='30'%3E%3C/line%3E%3Cline x1='25' y1='45' x2='50' y2='55'%3E%3C/line%3E%3Cline x1='75' y1='45' x2='50' y2='55'%3E%3C/line%3E%3Cline x1='50' y1='30' x2='50' y2='55'%3E%3C/line%3E%3C/g%3E%3C/svg%3E");

    background-size: 140px 140px; 
    background-repeat: repeat;
    
    /* FIX 3: I bumped this up to 0.15 so you can definitely see it working. 
       Lower it back to 0.05 once you confirm it shows up! */
    opacity: 0.15; 
    
    animation: slideBackground 30s linear infinite;
}

/* Seamless looping animation */
@keyframes slideBackground {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 140px 140px;
    }
}

/* Main Content Styling */
.content {
    position: relative;
    /* FIX 4: Higher z-index ensures text stays firmly on top */
    z-index: 10; 
    max-width: 800px;
    margin: 0 auto;
    padding: 100px 20px;
    text-align: center;
}