body {
    background-color: black;
    margin: 0;
    overflow: hidden;
    line-height: 1.25;
}

canvas {
    display: inline-block;
    opacity: 75%;
}

#backgroundImage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100% auto; /* Adjusted to fit the width of the viewport */
    background-repeat: no-repeat;
    background-position: center center; /* Center the background image */
    z-index: -1;  /* To place it behind the canvas */
    opacity: 0;
    transition: opacity 3s; /* 3 second transition between images */
}

@keyframes rotateEffect {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

@keyframes swayEffect {
    0%, 100% { transform: translateX(-5%); }
    50% { transform: translateX(5%); }
}

@keyframes rippleEffect {
    0%, 100% { background-size: 110% 110%; }
    50% { background-size: 90% 90%; }
}