/* General Body Styles */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-image: linear-gradient(to top, #380000, #0B0D0A);
    background-repeat: no-repeat;
    color: antiquewhite;
    font-family: Arial, Helvetica, sans-serif;
}

a, a:visited, a:link, a:active {
    color: antiquewhite;
    text-decoration: none;
}

/* Navigation Bar */
#navbar {
    background-color: #0B0D0A;
    box-shadow: 5px 0px 15px #0B0D0A;
    position: fixed;
    width: 100%;
    z-index: 1030;
}
.nav-container {
    width: 90% !important;
    max-width: 1600px;
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.coverlogo {
    height: 100px;
}

#navbarSupportedConent {
    margin-left: 30px;
}

.nav-link:hover,
.dropdown-item:hover {
    color: rgb(165, 0, 0) !important;
    transition: 0.3s ease;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    color: #e60000 !important;
}

.dropdown-item {
    color: antiquewhite;
}

#listenNowButton {
    margin-right: 25px;
    background-color: #8b0005;
    border-color: #8b0005;
    transition: 0.4s ease;
}

#listenNowButton:hover {
    background-color: #500000;
    border-color: #500000;
}

#watchNowButton {
    margin-right: 25px;
    background-color: #8b0005;
    border-color: #8b0005;
    transition: 0.4s ease;
}

#watchNowButton:hover {
    background-color: #500000;
    border-color: #500000;
}

#signInButton {
    color: antiquewhite;
    border: 1px solid antiquewhite;
    transition: 0.4s ease;
}

#signInButton:hover {
    color: antiquewhite;
    border: 1px solid #8b0005;
    background-color: #8b0005;
}

/* Main Content */
#pageContent {
    padding-top: 130px;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden; 
}

.contentContainer {
    width: 90%;
    max-width: 1500px;
    background-color: rgb(26, 26, 26);
    border: 1px solid rgb(34, 34, 34);
    border-radius: 10px;
    box-shadow: 10px 10px 15px #0B0D0A;
    margin: 70px 0;
}

.contentContainer p {
    padding: 0 0 30px 0;
}

#homeContainer, #aboutContainer, #listenLiveContainer, #watchLiveContainer, #musicQuizContainer, #shopContainer {
    transition: opacity 0.5s ease-in-out, max-height 0.6s ease-in-out, padding 0.6s ease-in-out;
    overflow: hidden;
    padding: 20px;
    box-sizing: border-box;
    max-height: 5000px;
}

.content-hidden {
    max-height: 0 !important;
    opacity: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-bottom-width: 0 !important;
    border-top-width: 0 !important;
}

h1 {
    padding: 35px 0;
}

#youtubeCarousel {
    padding: 30px 0 50px 0;
    max-width: 800px;
    margin: 0 auto;
}

/* Footer */
footer {
    height: 70px;
    background-color: #0B0D0A88;
    box-shadow: -5px 0px 8px #000000;
}

.footerContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 85%;
    max-width: 1600px;
    margin: 0 auto;
}

.socialMedia {
    font-size: 200%;
}

.socialMedia a i {
    color: antiquewhite;
    transition: 0.2s;
}

.socialMedia a i:hover {
    color: #4e0000;
}

/* Modal Styling */
#login-form button,
#signup-form button {
    margin: 10px 0;
}

.invalid-feedback {
    display: block; /* Always take up space */
    min-height: 1.2rem; /* Reserve space for one line of text */
    margin-top: -0.5rem;
    margin-bottom: 0.5rem;
    visibility: hidden; /* Hide the text by default */
}

.form-control.is-invalid ~ .invalid-feedback {
    display: block;
}