/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

.button {
    image-rendering: pixelated;
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
    margin-top: 20px;
    gap: 5px;

}

.meat {
    margin: auto;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 5px;
    overflow: hidden;
    background-color: blueviolet;
    max-width: fit-content;
}

ul li a {
    display: block;
    color: white;
    padding: 7px 16px;
    text-decoration: none;
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-size: 75%;
}

li {
    outline: 5px white;
}

.marquee-box {
    width: 700px;
    max-width: 700px;
    overflow: hidden;
    padding: 0;
}

.marquee-cart {
  display: inline-flex;
  white-space: nowrap;
  animation: marquee 10s steps(40) infinite;
}

.marquee-cart span {
  padding-right: 50px; /* spacing between loops */
  color: white;
}

.border-wrapper {
    position: relative;
    margin: auto;
    margin-top: 3%;
    max-width: 72%;
    padding: 24px;
    background: black;
}

.border-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        /* top */
        url(images/blackHeart.gif) top left / 24px 24px repeat-x,
        /* bottom */
        url(images/blackHeart.gif) bottom left / 24px 24px repeat-x,
        /* left (shifted down 24px) */
        url(images/blackHeart.gif) left 24px top 24px / 24px 24px repeat-y,
        /* right (shifted down 24px) */
        url(images/blackHeart.gif) right 24px top 24px / 24px 24px repeat-y;
}

.main-content {
    margin: 32px;
    padding: 15px;
    background-color: transparent;
}


@keyframes marquee {
    0% {transform: translate(0, 0)}
    100% {transform: translate(-50%, 0)}
}