body {
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    text-align: center;
    background-color: #111132;
   /* background-color: #030434;*/
    padding-top: 30px;
}


div#wrapper {
    text-align: left;
    width: 980px;
    margin: 0 auto;
}

#curdate {
    float: right;
    margin-top: -20px;
}



.navbar {
    background-color: #1e2157;
    display: flex;
    flex-direction: column; /* stack rows */
    align-items: center;
    padding: 0;
}

/* Main nav row */
.navbar .nav-main {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    height: 50px;            /* fixed row height */
    align-items: center;     /* vertical center */
}

/* Both rows share the same link styling */
.navbar .nav-main a {
    color: white;
    text-decoration: none;
    text-align: center;
    flex: 1;
    font-size: 20px;
    padding: 10px 15px;
    transition: background-color 0.3s ease;
}
.navbar .nav-extra a {
    color: white;
    text-decoration: none;
    text-align: center;
    flex: 1;
    font-size: 16px;
    padding: 10px 15px;
    transition: background-color 0.3s ease;
}

.navbar .nav-main a:hover,
.navbar .nav-extra a:hover {
    background-color: #0d4ece;
}

/* Bottom row */
.navbar .nav-extra {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    height: 50px;
    background-color: inherit;
}


.navbar .nav-extra .search-container form {
    display: flex;
    align-items: center;
    gap: 5px;
}

.navbar .nav-extra .search-container input[type="text"] {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 20px;
    font-size: 14px;
}

.navbar .nav-extra .search-container button {
    padding: 6px 12px;
    border: none;
    border-radius: 20px;
    background-color: #555;
    color: white;
    cursor: pointer;
}

.navbar .nav-extra .search-container button:hover {
    background-color: #0d4ece;
}




/* Banner */
#banner {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    background-color: #4b4f8b;
  /*  background-color: #0c0c58; */
    position: sticky;
    top: 100px; /* below floating nav + navbar */
    z-index: 100;
    width: 100%;
    margin: 0 auto;
}

#banner img {
    border: none;
}

#banner .logo {
    width: 280px;
}

#banner .logo > img {
    width: 200px;
}

#banner .banner-text {
    width: 530px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#maintitle {
    color: white;
    font-size: 28pt;
    font-weight: bold;
}

/* styles for the main content body */
#mainbody {
    padding: 20px;
    background-color: white;
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}


#mainbody a {
    text-decoration: none;
}
#mainbody a:link,
#mainbody a:visited
{
    color: black;
    text-decoration: none;
}
#mainbody a:hover,
#mainbody a:active,
#mainbody a:focus
{
    text-decoration: underline;

}

#footer {
    font-size: 80%;
    text-align: center;
    margin-top: 0px;
    padding: 10px;
    padding-bottom: 10px;
    background-color: white;
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    -moz-border-radius-bottomleft: 15px;
    -moz-border-radius-bottomright: 15px;
}







div.order-summary {
    border: 1px solid #ccc;
    width: 260px;
    margin-left: auto;
    margin-right: 0px;
    margin-top: -30px;
    padding: 10px;
    overflow: auto;
}

div.order-summary div{
    padding: 3px;
}

div.order-summary span {
    float: right;
    margin-right: 5px
}




/*styles for login and registration forms*/
div.login-container {
    vertical-align: top;
}

div.login-container div.login {
    vertical-align: top;
    width: 400px;
    margin-right: 50px;

}
div.login-container div.registration {
    vertical-align: top;
    border-left: 1px solid black;
    padding-left: 100px;
}

div.login-container div {
    display: inline-block;
    margin-bottom: 50px;
}
.album-cover {
    width: 300px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.songs-list {
    max-width: 600px;
    margin: 20px auto;
    padding: 10px;
    text-align: center;
}

.songs-list ul {
    list-style: none;
    padding: 0;
}

.songs-list li {
    margin-bottom: 10px;
    background-color: #f8f8f8;
    padding: 10px;
    border-radius: 8px;
}
.main-content {
    text-align: center;
    margin: 0 auto;
    max-width: 800px;
}

.grid-container {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping to the next line */
    justify-content: center; /* Center align */
}

.row {
    display: flex;
    justify-content: center; /* Center items in each row */
    margin-bottom: 20px; /* Space between rows */
}

.col {
    flex: 0 0 200px; /* Fixed width for each album column */
    margin: 10px; /* Margin between columns */
    text-align: center; /* Center text within columns */
}

.box {
    display: flex;
    flex-direction: column; /* Stacks content inside */
    align-items: center;
    justify-content: center;
    width: 65%;
    margin: 20px auto; /* Adds spacing from the header */
    padding: 35px;
    background-color: #ffffff;
    color: #000000;
    border: 2px solid #0c0c58;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.purchase{
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

.center {
    margin-left: auto;
    margin-right: auto;
    width: auto; /* Or specify a width like 80% if you want the table to have a specific width */
}

.black_border{
    border: 2px solid black;
}

.profile-img {
    width: 100%;
    max-width: 300px;
    height: auto;
}

.ytmusic-embed {
    max-width: 560px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background: whitesmoke;
    color: white;
    font-family: Arial, sans-serif;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    margin: 20px auto;
    text-align: center;
}

.ytmusic-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #333;
    border-bottom: 1px solid #333;
    justify-content: center;
}

.ytmusic-header img {
    height: 60px;
}

.ytmusic-body {
    padding: 20px;
}

.ytmusic-body p {
    margin: 10px 0;
    font-size: 16px;
}

.ytmusic-button {
    display: inline-block;
    padding: 10px 20px;
    background: #ff0000;
    color: white;
    font-weight: bold;
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.3s ease;
}

.ytmusic-button:hover {
    background: #cc0000;
}
/* Shared style */
.spotify-embed,
.apple-embed {
    max-width: 560px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background: whitesmoke;
    color: white;
    font-family: Arial, sans-serif;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    margin: 20px auto;
    text-align: center;
}

.spotify-header,
.apple-header {
    display: flex;
    justify-content: center;
    padding: 10px;
    background: #333;
    border-bottom: 1px solid #333;
}

.spotify-header img,
.apple-header img {
    height: 60px;
}

.spotify-body,
.apple-body {
    padding: 20px;
}

.spotify-button,
.apple-button {
    display: inline-block;
    padding: 10px 20px;
    background: #1db954; /* Spotify green */
    color: white;
    font-weight: bold;
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.3s ease;
}

.spotify-button:hover {
    background: #14833b;
}

.apple-button {
    background: #fa2c55; /* Apple Music pink-red */
}

.apple-button:hover {
    background: #c01f40;
}

/* Redbubble Embed */
.redbubble-embed {
    max-width: 560px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background: whitesmoke;
    color: white;
    font-family: Arial, sans-serif;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    margin: 20px auto;
    text-align: center;
}

.redbubble-header {
    display: flex;
    justify-content: center;
    padding: 10px;
    background: #333;
    border-bottom: 1px solid #333;
}

.redbubble-header img {
    height: 60px;
}

.redbubble-body {
    padding: 20px;
}

.redbubble-button {
    display: inline-block;
    padding: 10px 20px;
    background: #ec343c; /* Redbubble red */
    color: white;
    font-weight: bold;
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.3s ease;
}

.redbubble-button:hover {
    background: #a82429;
}

/* Bandcamp Embed */
.bandcamp-embed {
    max-width: 560px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background: whitesmoke;
    color: white;
    font-family: Arial, sans-serif;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    margin: 20px auto;
    text-align: center;
}

.bandcamp-header {
    display: flex;
    justify-content: center;
    padding: 10px;
    background: #333;
    border-bottom: 1px solid #333;
}

.bandcamp-header img {
    height: 60px;
}

.bandcamp-body {
    padding: 20px;
}

.bandcamp-button {
    display: inline-block;
    padding: 10px 20px;
    background: #629aa9; /* Bandcamp teal */
    color: white;
    font-weight: bold;
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.3s ease;
}

.bandcamp-button:hover {
    background: #4b7a86;
}

/* ===========================
   ANIMATION CLASSES LIBRARY
   =========================== */

/* --- Glow (Amber/Gold Jazz Sign) --- */
@keyframes glow-amber {
    0%, 100% {
        text-shadow:
                0 0 10px #ffb347,
                0 0 20px #ffb347,
                0 0 30px #ff7b00;
    }
    50% {
        text-shadow:
                0 0 20px #ffe29f,
                0 0 40px #ffe29f,
                0 0 60px #ffb347;
    }
}

.glow-amber {
    animation: glow-amber 2.5s ease-in-out infinite alternate;
}

/* --- Glow (Cool Blue/White Neon) --- */
@keyframes glow-blue {
    0%, 100% {
        text-shadow:
                0 0 8px #1616d6,
                0 0 16px #14148c,
                0 0 24px #0c0c58;
    }
    50% {
        text-shadow:
                0 0 16px #1616d6,
                0 0 32px #14148c,
                0 0 48px #0c0c58;
    }
}

.glow-blue {
    animation: glow-blue 2.5s ease-in-out infinite alternate;
}

/* --- Smooth Fade In --- */
@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fade-in 1.2s ease-out forwards;
}

/* --- Soft Slide Up --- */
@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-up {
    animation: slide-up 1.2s ease-out forwards;
}

/* --- Gentle Pulse --- */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.pulse {
    animation: pulse 2s ease-in-out infinite;
}

.connect-btn-standard {
    display: inline-block;
    background-color: #1e2157;
    color: white !important;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    border: 1px solid #ffffff33;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.connect-btn-standard:hover {
    background-color: #0d4ece;
    color: white !important;
    box-shadow: 0 0 10px rgba(13, 78, 206, 0.5);
}

/* Optional: just to be safe */
.connect-btn-standard:visited,
.connect-btn-standard:active,
.connect-btn-standard:focus {
    color: white !important;
}


.connect-btn-disabled {
    display: inline-block;
    background-color: #555;
    color: #ccc;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    pointer-events: none;
    opacity: 0.6;
}

/* mobile view stuff */
@media screen and (max-width: 768px) {
    .navbar {
        flex-direction: column;
    }

    .navbar .nav-main,
    .navbar .nav-extra {
        flex-direction: column;
        height: auto;
    }

    .navbar .nav-main a,
    .navbar .nav-extra a {
        font-size: 18px;
        padding: 12px;
        flex: unset; /* prevents squishing */
        width: 100%;
        box-sizing: border-box;
    }

    .navbar .nav-extra .search-container {
        width: 100%;
        padding: 10px;
    }

    .navbar .nav-extra .search-container input[type="text"] {
        width: 100%;
    }

    .navbar .nav-extra .search-container button {
        width: 100%;
        margin-top: 8px;
    }
}
@media screen and (max-width: 768px) {
    #mainbody {
        padding: 15px 10px;
        border-left: none;
        border-right: none;
    }
}

body {
    overflow-x: hidden;
}

/* Make all images responsive unless otherwise stated */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Optional: only for table-based about us images */
table img {
    width: 100%;
    height: auto;
}
@media screen and (max-width: 768px) {
    table {
        width: 100%;
        display: block;
        overflow-x: auto;
        border-collapse: collapse;
    }

    table tr {
        display: flex;
        flex-direction: column;
        margin-bottom: 30px;
        align-items: center;
    }

    table td {
        display: block;
        text-align: center;
        padding: 10px;
    }

    table td img {
        width: 100%;
        max-width: 300px;
        height: auto;
    }
}
@media screen and (max-width: 768px) {
    .grid-container {
        flex-direction: column;
        align-items: center;
    }

    .row {
        flex-direction: column;
        margin-bottom: 0; /* stacked, so no space needed between */
    }

    .col {
        width: 100%;
        max-width: 250px;
        margin: 10px auto;
        text-align: center;
    }

    .col img {
        width: 100%;
        height: auto;
    }
}
/* Default: for desktop */
.photo-img {
    width: 100%;
    max-width: 500px;
    height: auto;
    display: block;
    margin: 0 auto;
}
@media screen and (max-width: 768px) {
    .photo-img {
        max-width: 90vw;
    }

    table tr {
        flex-direction: column;
        align-items: center;
        margin-bottom: 30px;
    }

    table td {
        padding: 8px;
        text-align: center;
    }
}
.album-img {
    width: 100%;
    max-width: 250px;
    height: auto;
    display: block;
    margin: 0 auto;
}
.song-list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 100%;
}

.song-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    text-align: center;
}

.song-header {
    font-weight: bold;
    border-bottom: 1px solid black;
    padding-bottom: 5px;
}

.song-cell {
    flex: 1;
    min-width: 100px;
    padding: 5px 10px;
    box-sizing: border-box;
}
/* === Final Hamburger Nav (Mobile Only) === */
.nav-toggle {
    display: none;
    width: 100%;
    background-color: #1e2157;
    color: white;
    font-size: 26px;
    padding: 10px 15px;
    cursor: pointer;
    text-align: left;
}

@media screen and (max-width: 768px) {
    .nav-toggle {
        display: block;
    }

    .nav-main,
    .nav-extra {
        display: none !important;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .nav-main.open,
    .nav-extra.open {
        display: flex !important;
    }

    .nav-main a,
    .nav-extra a {
        font-size: 18px;
        padding: 12px;
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
}