/* Custom styles */
body {
    margin: 0;
	padding:0;
    font-family: Arial, sans-serif;
    height: 100%;
	width: 100%
   
}

/* Ensure album cover fits and is covered by the overlay */
img.object-fit-cover {
    object-fit: cover;
}

.overlay {
    z-index: 1;
}

/* Ensure the container is positioned correctly */
.container {
    z-index: 2;
}

/* Footer always at the bottom */
.footer {
    position: relative;
    bottom: 0;
    width: 100%;
}

/* Table rounded corners */
.table {
    border-radius: 10px;
    overflow: hidden;
}
.bg {
  box-sizing: border-box; /*Not necessary in this situation*/
  display: block; /*Not necessary, but we do want it this way*/
  width: 100vh;  
  height: 100%;
 
  padding: 0; /* No padding */
  margin: 0; /* No margins */
  background: url('/static/images/cover.jpg') no-repeat center center;  
  /* Shorthand: image, repeat, X align, Y align. */
  background-size: cover; /* Cover all available space*/
}

    .button-image {
        width: 50px; /* Default size */
        height: auto;
    }

    /* Medium screens (tablets) */
    @media (max-width: 768px) {
        .button-image {
            width: 40px;
        }
    }

    /* Small screens (phones) */
    @media (max-width: 576px) {
        .button-image {
            width: 30px;
        }
    }
.image-container {
        min-height: 500px; /* Set your desired height */
    }
 .wide-image {
        width: 100%;
        min-height: 150px;
        object-fit: cover;
    }
.wide-image-1 {
        width: 100%;
        min-height: 75px;
        object-fit: cover;
    }
 .custom-border {
        border-top: 5px solid var(--bs-primary); /* Bootstrap primary color */
        border-bottom: 5px solid var(--bs-warning); /* Bootstrap warning color */
        border-left: none;
        border-right: none;
    }
	
	.top-line {
        width: 100%;
        height: 4px; /* Thickness of the line */
        background-color: var(--bs-primary); /* Bootstrap primary color */
		margin: 0 auto;
    }
	.bottom-line {
        width: 100%;
        height: 4px; /* Thickness of the line */
        background-color: var(--bs-warning); /* Bootstrap primary color */
		margin: 0 auto;
    }
    .image-with-particles {
        position: relative;
        display: inline-block;
    }
    
    #particles-js {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none; /* Makes sure the image can still be clicked */
    }
/* Semi-transparent modal content */
.semi-transparent-modal {
    background-color: rgba(0, 0, 0, 0.7); /* Adjust opacity and color as needed */
    color: white; /* Ensure text is readable */
    border: none; /* Optional: remove border for a cleaner look */
}

/* Semi-transparent backdrop */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5) !important; /* Adjust opacity for the backdrop */
}
  /* #particle-container {
            position: relative;
            display: inline-block;
        }

        .sparkle-image {
            display: block;
            vertical-align: bottom;
        }

        #particles-js {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none; 
        } */

        .album-cover {
            transition: transform 0.3s ease, filter 0.3s ease;
        }
        .album-cover:hover {
            transform: scale(1.1); /* Slightly increase size */
            filter: brightness(1.3); /* Increase brightness */
        }
        .overlay-text {
            position: absolute;
            top: 10px;               /* Adjust as needed */
            left: 10px;              /* Adjust as needed */
            background-color: rgba(255, 255, 255, 0.7);  /* Semi-transparent background */
            padding: 10px;
            border-radius: 8px;
            color: #333;             /* Text color */
            font-size: 14px;         /* Adjust font size as needed */
            max-width: 90%;          /* Fit within the image */
        }
        .overlay-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px; /* Adjust spacing as needed */
        }
        
  
        .responsive-text {
            font-size: 0.75rem; /* Default font size for smaller screens */
        }
        
        @media (min-width: 576px) { /* Small devices */
            .responsive-text {
                font-size: 0.75rem;
            }
        }
        
        @media (min-width: 768px) { /* Medium devices */
            .responsive-text {
                font-size: 0.75rem;
            }
        }
        
        @media (min-width: 992px) { /* Large devices */
            .responsive-text {
                font-size: 1rem;
            }
        }