body {
    margin: 0;

    background-image: url("http://dl7.glitter-graphics.net/pub/148/148607tg6rggnb0l.gif");
    background-attachment: fixed;
    background-repeat: repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.hanalei-fill {
    font-family: "Hanalei Fill", system-ui;
    font-weight: 400;
    font-style: normal;
}

h1 {
    text-align: center;
    font-size: 60px;
    color: #bb972d;
    -webkit-text-stroke: 2px black; /* outline */
}
/* Center wrapper */
.wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Marquee container */
.marquee {
    overflow: hidden;
    width: 100%;
}

/* Track that moves */
.track {
    display: flex;
    width: fit-content;
    gap: 20px;
}

/* Image styling */
.track img {
    height: 200px;
    width: auto;
    border-radius: 12px;
    object-fit: cover;
}

/* Left scrolling */
.left {
    animation: scroll-left 20s linear infinite;
}

/* Right scrolling */
.right {
    animation: scroll-right 20s linear infinite;
}

/* Animations */
@keyframes scroll-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@keyframes scroll-right {
    from {
        transform: translateX(-50%);
    }
    to {
        transform: translateX(0);
    }
}

/*pause on hover*/
.track:hover {
    animation-play-state: pause;
}