main.css

/* General Page Style */
body {
    margin: 0;
    color: #e6f7ff;
    background-color: #000;}



/* Navbar */
.navbar {
    background-color: #000 !important; /* Explicit black background */
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000; /* Ensures it stays above overlays */
    background-image: url('images/bg_navbar_IMG_5178.jpg');
}

.navbar-brand, .nav-link {
    color: #296bd6 !important;}

.nav-link:hover, .navbar-brand:hover {
    color: #185cc9 !important;}

.logo-image {
    width: 200px;
    margin: 20px 0;}



/* Section Styles */
.section {
    position: relative;
    padding: 60px 0;
    background-size: cover;
    background-position: center;
    overflow: hidden;}

.section .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
    padding-top: 80px;}

.section .content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;}



/* Section Backgrounds */
#chaoticnoise {background-image: url('images/bg_about_IMG_0310.jpg');
    padding-top: 0;}

#chaoticnoise .content {
    width: 80%;					/* Set content width to 80% */
    max-width: 1200px;			/* Set a max width for larger screens */
    margin: 0 auto;				/* Center the content */
    padding-top: 80px;			/* Padding for better readability */
    text-align: center;			/* Center-align text within the container */}

#events {background-image: url('images/bg_events_IMG_8397.jpg');}
#music {background-image: url('images/bg_music_SDIM7112.jpg');}
#media {background-image: url('images/bg_media_IMG_1654.jpg');}
#shop {background-image: url('images/bg_shop_IMG_6362.jpg');}
#contact {background-image: url('images/bg_contact_IMG_0335.jpg');}



/* Event Section Styles */
#events .content, 
#contact .content {
    width: 80%;					/* Set content width to 80% of the full page */
    max-width: 1200px;			/* Optionally set a max width for larger screens */
    margin: 0 auto;				/* Center the content */
    padding: 20px;				/* Optional padding for spacing */
    text-align: center; 		/* Center-align text within the container */}

.event {
    margin-bottom: 30px; 		/* Adjust spacing as needed */}

.past-event {
/*    color: #999; /* Light grey text color */
/*    opacity: 0.6; /* Make it slightly transparent */}



/* Music Section Styles */
.music-item {
    width: 90%;                /* Set close to full width of container */
    max-width: 600px;          /* Limit the width for larger displays */
    margin: 20px auto;         /* Center the music items */}

.music-item iframe {
    width: 100%;               /* Full width of music item container */
    height: auto;              /* Adjust height to maintain aspect ratio */
    border: none;              /* Remove border */
    outline: none;             /* Remove any default outline */
    box-shadow: none;          /* Remove any shadow effect */}
    
    
    
/* Media Section Styles */
.video-wrapper {
    width: 100%;				/* Container width */
    max-width: 1400px;			/* Maximum width */
    margin: 20px auto;			/* Center video with spacing */}

.video-wrapper iframe {
    width: 100%;				/* Full width of container */
    aspect-ratio: 16 / 9;		/* Enforce 16:9 aspect ratio */
    height: auto;				/* Automatically adjust height */
    border: none;}



/* Shop Section Styles */
.shop-item {
    width: 90%;                /* Set close to full width of container */
    max-width: 600px;          /* Limit the width for larger displays */
    margin: 20px auto;         /* Center the music items */}

.shop-item iframe {
    width: 100%;               /* Full width of music item container */
    height: auto;              /* Adjust height to maintain aspect ratio */
    border: none;              /* Remove border */
    outline: none;             /* Remove any default outline */
    box-shadow: none;          /* Remove any shadow effect */}



/* Contact Section Styles */
.contact-sections {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;}

.reach-out {
    flex: 0 0 75%;				/* 60% width */
    padding-right: 10px;
    text-align: left;			/* Left-align text */}

.socials {
    flex: 0 0 20%;				/* 30% width */
    padding-left: 10px;
    text-align: left;			/* Left-align links */}

/* Form Styles */
.form-control {
    background: #444;
    border: none;
    color: #ebebeb;}

.btn-secondary {
    background-color: #185cc9;
    border-color: #000;}

.btn-secondary:hover {
    background-color: #333;
    border-color: #333;}