/* basic css setup for particles */

body {
    margin: 0;
    overflow: hidden; /* Prevent scrolling */
    background: black;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100vh;
    font-family: 'Nunito', sans-serif; /* Change to Press Start font */
}

#particles-js {
    position: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: gradient(to bottom, #4b0082, #6a0dad, #3333ff, #6666ff, #0000ff);
    z-index: 0;
}

.background-image {
    position: fixed; /* Fix the image to cover the full screen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Place the image behind the canvas */
    opacity: 0; /* Adjust opacity for blending */
    background-image: url('assets/your-image.jpg'); /* Add the URL of your image here */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; /* Ensure the image does not repeat */
    background-attachment: fixed; /* Fix the background image position */
    filter: brightness(0.5); /* Adjust the brightness for better blending */
}