/* Universal reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
}

body {
    font-family: Calibri, Candara, Segoe, "Segoe UI", Arial, sans-serif;
    color: white; 
    line-height: 1.6;
    text-align: left;
    min-height: 100vh;

    background-image: url('fzb_bkgrd.jpg'); 
    background-attachment: scroll; 
    background-position: left top; 
    background-repeat: repeat; 
    background-size: 145% auto; 
}

/* --- Global Link Reset --- */
/* This makes EVERY link on your page stay white and have no underline, even after being clicked */
a, a:link, a:visited, a:active {
    color: white !important;
    text-decoration: none !important;
}

a:hover {
    color: #ddd !important; /* Subtle change on hover for all links */
}

/* Sticky footer wrapper */
.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.content {
    flex: 1; 
    width: 92%; 
    max-width: 800px;
    margin: 40px 4% 0 4%; 
}

p {
    margin-bottom: 30px;
    font-size: 1.0rem; 
    font-weight: bold;
    line-height: 1.72em; 
}

/* Squeezed text style - ONLY applies to elements with class "text" */
.text {
    font-size: 0.9375rem;
    font-weight: bold;
    letter-spacing: 0.3em; 
    line-height: 1.72em; 
    transform: scaleX(0.85);
    transform-origin: left;
    margin-left: calc(4px + -0.140625rem);
}

.icon {
    margin-left: -6px; 
    display: inline-block;
}

/* Song links inside the .text block inherit the parent's squeeze */
.play-link {
    cursor: pointer;
    display: inline-block;
}

/* Footer Email Style */
.footer-email {
    padding-bottom: 35px;
    width: 92%;
    margin-left: 4%;
}

.footer-email .text {
    margin-bottom: 0;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 600px) {
    body {
        background-color: #333333; 
        background-image: none; 
    }

    .content {
        width: 100%; 
        margin: 0;
        padding: 20px;
    }

    .text {
        transform: scaleX(0.98); 
        letter-spacing: 0.05em; 
        margin-left: 4px; 
        display: block;
        width: 100%;
    }

    .footer-email {
        width: 100%;
        margin-left: 0;
        padding-left: 20px;
        padding-right: 20px;
    }

    .text .icon {
        transform: scaleX(1.02); 
    }
}