h1 {
    margin: 4px;
    text-align: center;
}

.gold-text {
    font-family: "Playfair Display", serif; /* elegant serif like the sample */
    font-size: 84px;
    font-weight: 700;
    display: inline-block;
    position: relative;
    line-height: 1.15;

    /* gold gradient */
    background: linear-gradient(90deg,
    #8a6516 0%, /* warm gold */
    #b38728 20%, /* mid-gold */
    #e0c36a 45%, /* highlight */
    #a9771c 70%, /* deeper midtone */
    #6e4b0f 100%  /* gold-bronze edge */
 );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent; /* show the gradient */

    /* depth / soft shadow */
    text-shadow:
        0 1px 0 rgba(255,255,255,0.25), /* subtle top highlight */
        0 6px 14px rgba(0,0,0,0.01); /* soft drop shadow */
}

/* small glossy sheen using a pseudo-element */
.gold-text::after{
    content: "";
    position: absolute;
    left: -2%;
    top: 6%;
    width: 110%;
    height: 45%;
    pointer-events: none;
    transform: skewX(-20deg);
    background: linear-gradient(
        180deg,
    rgba(255,255,255,0.85) 0%,
    rgba(255,255,255,0.35) 35%,
    rgba(255,255,255,0.0) 60%);
    mix-blend-mode: overlay;
    border-radius: 30%;
}

.navbar {
    text-align: center;
}

.quote-container {
    margin: 20px;
    display: flex;
    justify-content: center; /* horizontal cnter */
    align-items: center;
/* full viewport minus navbar height */

}

.quote-box {
    background-color: beige;
    padding: 40px; 
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    text-align: center;
    max-width: 800px;
    width: 100%;
    min-height: 250px;

}

.quote-box h1 {
        font-size: 45px;

}
.quote-box h2 {
    font-size: 30px;
}
.quote-box h3{
    font-size: 25px;
}