.hero-container {
    position: relative;
    min-height: 500px;
    align-items: center;
    padding: 40px;
    overflow: hidden;
}

    /* The Brown Gradient Overlay */
    .hero-container::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to bottom, rgb(100 48 0 / 39%) 0%, rgba(0, 0, 0, 0) 50%);
        z-index: 1;
    }

    .hero-container .content {
        position: relative;
        z-index: 2; /* Higher than the overlay's z-index */
        color: white; /* Contrast against the brown */
        text-align:center;
    }

        .hero-container .content h1 {
            position: relative;
            font-size: 3rem;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            text-align: center;
            margin:60px 0 10px 0;
        }
.hero-container .content #lyric {
    text-align: center;
}