body {
    /*position: relative;*/
    /*overflow: hidden;*/
}

.document-background-container {
    z-index: -1;
    position: fixed;
    overflow: hidden;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(135deg, #0d7377 0%, #14919b 50%, #17a2b8 100%);
}

/* Animated document elements */
.document {
    position: absolute;
    opacity: 0.15;
    animation: floatDocument 20s ease-in-out infinite;
    pointer-events: none; /* Prevents interfering with clicks */
    z-index: 0; /* Keeps documents behind content */
}

.document svg {
    fill: white;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.doc1 {
    top: 10%;
    left: 5%;
    animation-delay: 0s;
}

.doc2 {
    top: 60%;
    left: 8%;
    animation-delay: -5s;
}

.doc3 {
    top: 25%;
    right: 10%;
    animation-delay: -10s;
}

.doc4 {
    bottom: 15%;
    right: 8%;
    animation-delay: -15s;
}

.doc5 {
    top: 45%;
    left: 15%;
    animation-delay: -7s;
}

.doc6 {
    top: 75%;
    right: 20%;
    animation-delay: -12s;
}

@keyframes floatDocument {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-30px) rotate(5deg);
    }
    50% {
        transform: translateY(-50px) rotate(-3deg);
    }
    75% {
        transform: translateY(-20px) rotate(4deg);
    }
}

/* Paper sheets floating across */
.paper-sheet {
    position: absolute;
    opacity: 0.1;
    animation: flyAcross 25s linear infinite;
    pointer-events: none; /* Prevents interfering with clicks */
    z-index: 0; /* Keeps papers behind content */
}

.paper1 {
    top: 20%;
    animation-delay: 0s;
}

.paper2 {
    top: 50%;
    animation-delay: -8s;
}

.paper3 {
    top: 80%;
    animation-delay: -16s;
}

@keyframes flyAcross {
    from {
        left: -100px;
        transform: rotate(-10deg);
    }
    to {
        left: calc(100% + 100px);
        transform: rotate(10deg);
    }
}