html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            min-height: 100vh;
        }

        .iframe-container {
            width: 100%;
            overflow: hidden;
        }

        .iframe-container iframe {
            display: block;
            width: 100%;
            border: 0;
        }

        .gold-text {
            background: linear-gradient(
                90deg,
                #fff7c2,
                #ffd000,
                #eab308,
                #fff7c2
            );

            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .gold-border {
            border-color: rgba(234, 179, 8, 0.45);
        }

        .glass {
            background: rgba(15, 15, 15, 0.78);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        .marquee-wrapper {
            overflow: hidden;
            white-space: nowrap;
        }

        .marquee-content {
            display: inline-block;
            min-width: 100%;
        }

        .gold-divider {
            height: 1px;

            background: linear-gradient(
                90deg,
                transparent,
                #eab308,
                #ffd000,
                #eab308,
                transparent
            );

            margin: 24px 0;
        }
        

/* HEART */
@import url("https://fonts.googleapis.com/css2?family=Pacifico:wght@200;400;600&display=swap");

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css");

.heart {
  position: fixed;
  font-size: 1.5rem;
  top: -1vh;
  transform: translateY(0);
  animation: fall 3s linear forwards;
}

@keyframes fall {
  from {
     transform: translateY(0vh) translateX(-10vw); 
  }
  to {
     transform: translateY(105vh) translateX(10vw); 
  }
}

/* END OF HEART */


/* marquee */
.marquee-wrapper {

    width: 100%;

    overflow: hidden;

    position: relative;

    white-space: nowrap;

}


.marquee-track {

    display: flex;

    width: max-content;

    animation:
        marqueeAnimation
        30s
        linear
        infinite;

    will-change: transform;

}


.marquee-content {

    display: flex;

    align-items: center;

    flex-shrink: 0;

    min-width: max-content;

    padding-right: 80px;

}


/* =========================================================
   INFINITE MARQUEE
========================================================= */

@keyframes marqueeAnimation {

    0% {

        transform: translateX(0);

    }

    100% {

        transform: translateX(-50%);

    }

}


/* =========================================================
   HOVER PAUSE
========================================================= */

.marquee-wrapper:hover
.marquee-track {

    animation-play-state: paused;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {

    .marquee-track {

        animation-duration: 20s;

    }

    .marquee-content {

        padding-right: 50px;

    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .marquee-track {

        animation-duration: 16s;

    }

}