bundlrs.cc/rollinggirl code

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <meta charset="UTF-8" />
    <link rel="icon" type="image/gif" href="https://file.garden/ZRgh3nzfnhFDJvPp/green-hearts.gif" />
    <title>bundlrs . cc / rollinggirl</title>
    <!-- discord embed stuff -->
    <meta content="https://bundlrs.cc/rollinggirl" property="og:url" />
    <meta content="bundlrs.cc/rollinggirl" property="og:title" />
    <meta content="ángel's old sntry hoard remade on bundlrs" property="og:description" />
    <meta content="https://file.garden/ZRgh3nzfnhFDJvPp/Untitled429_20231230195057.png" property="og:image" />
    <meta name="theme-color" content="#52881b" />
    <!---------       --------->
    <style>
    /* body stuff and variables */

    :root {
        /* these are colors that are reused a lot throughout the page, try changing them so you know which parts they affect! */
        --main-color: #405f11;
        --main-color-t: hsla(84, 70%, 22%, 0.8);
    }

    * {
        box-sizing: border-box;

    }

    html,
    body {
        overflow: clip;
        overflow: hidden;
    }

    body {
        /* this centers the page */
        min-height: 100dvh;
        width: 100vw;
        display: flex;
        justify-content: center;
        align-items: center;

        /* this is the background color for the page! if you dont know how gradients work, you can make your own at https://cssgradient.io */
        background: rgb(182, 201, 123);
        background: radial-gradient(
            circle,
            rgba(255, 255, 230, 1) 0%,
            rgba(84, 102, 35, 1) 100%
        );
    }

    /* fonts */

    /* replace the font names and srcs with your own fonts if you want! */
    @font-face {
        src: url("https://file.garden/ZRgh3nzfnhFDJvPp/Astral Delight Black.ttf");
        font-family: "Astral Delight";
    }

    @font-face {
        src: url("https://file.garden/ZRgh3nzfnhFDJvPp/ADDSBP__.TTF");
        font-family: "ADDSBP";
    }

    @font-face {
        src: url("https://file.garden/ZRgh3nzfnhFDJvPp/Retro Gaming.ttf");
        font-family: "Retro Gaming";
    }

    /* utility */

    .flex {
        display: flex;
    }

    .flex-column {
        flex-direction: column;
    }

    /* main CSS */

    #m-hoard {
        width: auto;
        border: none;
        position: relative;
        transform: scale(
            105%
        ); /* i decided i wanted everything to be bigger but i got too lazy to manually change everything */
    }

    /* header area */

    #h-area {
        width: 100%;
        height: auto;
        z-index: 9999;
        margin-left: 1%;
    }

    #h-img {
        background-image: url("https://file.garden/ZRgh3nzfnhFDJvPp/Untitled429_20231230195057.png"); /* this is where you can replace the miku image! */
        background-size: cover;
        height: 150px;
        width: 150px;
        position: relative;
        margin-right: -10%;
        z-index: 9999;
    }

    /* art credits */
    #h-img > a,
    #h-img > a:visited {
        position: absolute;
        top: 120px;
        left: 23px;
        font-family: "ADDSBP";
        display: block;
        width: 100%;
        color: white;
        transition: all 0.2s ease-out;
        text-decoration: underline;
        filter: drop-shadow(1px 0 0 var(--main-color))
            drop-shadow(0 1px 0 var(--main-color))
            drop-shadow(1px 1px 0 var(--main-color))
            drop-shadow(-1px 0 0 var(--main-color))
            drop-shadow(-1px -1px 0 var(--main-color))
            drop-shadow(-1px 1px 0 var(--main-color))
            drop-shadow(1px -1px 0 var(--main-color));
    }

    #h-img > a:hover {
        color: gray;
        transition: all 0.2s ease-in;
        filter: drop-shadow(1px 0 0 white) drop-shadow(0 1px 0 white)
            drop-shadow(1px 1px 0 white) drop-shadow(-1px 0 0 white)
            drop-shadow(-1px -1px 0 white) drop-shadow(-1px 1px 0 white)
            drop-shadow(1px -1px 0 white);
    }

    /* this is the css for the part that says ".cc/rollinggirl", you can change the background (once again referencing https://cssgradient.io) */
    #h-banner {
        display: block;
        width: 240px;
        border: 2px solid var(--main-color);
        background: rgb(132, 166, 74);
        background: linear-gradient(
            0deg,
            rgba(132, 166, 74, 1) 0%,
            rgba(208, 237, 142, 1) 100%
        );
        height: max-content;
        padding: 0.2rem 0.1rem;
        margin-top: auto;
        margin-bottom: 22px;
        border-radius: 0 20px 20px 0;
        /* box shadow */
        box-shadow:
            0 0 0 1px #caed97 /* this one is the thin outer outline around it */,
            5px 5px 10px 2px #566831 /* the main shadow */;
        background: transparent;
        font-size: 1.3em;
        margin: 0 0 0 13%;
        padding: 0;
        display: inline-block;
        z-index: 9998;
    }

    #h-banner:hover {
        transform: scale(1.15);
        transition: transform 0.3s ease-out;
        z-index: 9998;
    }

    /* container thing */

    .m-container {
        gap: 0.7rem;
        margin-top: -3%;
    }

    /* middle box */

    #t-header {
        background: white;
        position: static;
        white-space: nowrap;
        border: 3px solid var(--main-color);
        border-radius: 0;
        box-shadow: 0 0 15px 2px var(--main-color-t);
        overflow: auto;
        display: block;
        scroll-snap-type: x mandatory; /* make the scroll snap effect */
        margin: auto;
        padding: 0.2rem;
        width: 320px;
    }

    #t-header > div {
        display: inline-block;
        scroll-snap-align: center;
        transition: 1s ease;
        margin: 0 60px auto 60px;
    }

    #t-header * {
        font-family: "ADDSBP";
        font-size: 0.7rem;
        word-spacing: 2px;
    }

    /* scrollboxes */

    .scrollbox {
        display: block;
        height: 100px;
        width: 320px;
        box-shadow: 0 0 15px 2px var(--main-color-t);
        margin: auto;
        overflow: auto;
        overflow-x: hidden;
        background: white;
        padding: 0;
        border: 3px solid var(--main-color);
        border-radius: 20px 20px 0 0;
        z-index: 6;
    }

    .l-class div,
    .l-class mark,
    .l-class code {
        color: #505c00; /* text color for all body text */
        font-family: "Retro Gaming"; /* font for all the body text */
        font-size: 0.8em; /* font size for all the body text */
    }

    .l-class code {
        background: rgba(160, 195, 70, 0.57); /* background for code blocks */
    }

    .scrollbox div {
        margin: 0.8rem;
    }

    .scrollbox strong {
        /* these are the sort of "labels" in the code. you can adjust everything for it here */
        display: inline-block;
        padding: 2px 8px 2px 8px;
        background: #5e7d1c;
        background: linear-gradient(
            0deg,
            #5e7d1c 0 40%,
            #859a6a 40% 50%,
            #5e7d1c 50% 60%,
            #859a6a 60% 100%
        );
        border-radius: 20px;
        border: 2px solid var(--main-color);
        color: white;
    }

    .scrollbox h3 {
        /* the "title" parts */
        font-family: "ADDSBP";
        color: #7e9b41;
        font-size: 1.6em;
        margin: 5% 0 0.3rem 0;
        line-height: auto;
    }

    .l-class em {
        color: #859900; /* color for italic text */
    }

    .l-class a,
    .l-class a:visited {
        color: #559e42; /* color for links */
        text-decoration: underline;
        text-decoration-color: #559e42; /* color for the underline of links */
    }

    #log {
        border-radius: 0 0 20px 20px;
    }

    /* extras */

    header {
        /* the container for the "header text" part */
        width: 100%;
        text-align: center;
        filter: drop-shadow(1px 0 0 white) drop-shadow(0 1px 0 white)
            drop-shadow(0 0 1px white) drop-shadow(-1px 0 0 white)
            drop-shadow(0 -1px 0 white);
        position: absolute;
        top: 60px;
        right: -45px;
    }

    header a {
        /* the actual header text, here you can change the text color, font, font size, etc. */
        color: var(--main-color);
        font-family: "Retro Gaming";
        font-size: 1.3em;
        display: block;
        width: 100%;
    }

    * mark {
        /* highlight color for the mark element */
        background: var(--yellow1);
        padding: 0 0.2rem 0 0.2rem;
    }

    #audio-button {
        /* the audio player, you can change the bg here */
        transform: scale(1);
        transition: transform 0.3s ease-in-out;
        background: rgb(132, 166, 74);
        background: linear-gradient(
            0deg,
            rgba(132, 166, 74, 1) 0%,
            rgba(208, 237, 142, 1) 100%
        );
        border-radius: 20px;
        width: 140px;
        display: flex;
        justify-content: start;
        border: 2px solid var(--main-color);
        position: absolute;
        bottom: -15px;
        right: 17px;
        z-index: 9999;
        padding: 0.4rem 0.8rem;
        transition: transform 0.3s ease-in-out;
    }

    #audio-button:active {
        transform: scale(1.1);
        transition: transform 0.3s ease-in-out;
    }

    #audio-button svg {
        margin-right: 0.4rem;
    }

    .marquee {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
    }

    .marquee span {
        font-family: "Retro Gaming";
        color: black;
        display: inline-block;
        overflow: visible;
        width: fit-content;
        animation: marquee 7s infinite linear;
        font-size: 1.15em;
    }

    @keyframes marquee {
        0% {
            transform: translateX(100%);
        }
        100% {
            transform: translateX(-100%);
        }
    }

    @media screen and (max-width: 900px) {
        #m-hoard {
            transform: scale(95%);
        }
    }
    </style>
</head>
<body>
<div id="m-hoard">
    <header>
        <a href="#"><em>HEADER TEXT</em></a>
    </header>
    <div id="h-area" class="flex">
        <div id="h-img" title="art of hatsune miku by @mel_tinii on twitter">
            <a
                href="https://twitter.com/mel_tinii/status/1719147882559730002/photo/1"
                target="_blank"
            >
                art creds
            </a>
        </div>
        <div id="h-banner"><span>. CC / ROLLINGGIRL</span></div>
    </div>
    <div class="flex flex-column m-container">
        <div class="scrollbox l-class">
            <div>
                <h3 id="misc">Title</h3>
                <strong>bold</strong>
                <em>italic</em>
                <a href="/gloomy">link</a>
                Brownie gummies gummies soufflé fruitcake soufflé powder brownie. Tootsie roll oat cake halvah fruitcake lemon drops. Halvah gummi bears apple pie tiramisu apple pie jelly-o pastry. Macaroon jelly beans toffee cake chocolate toffee ice cream lollipop tootsie roll. Gummies icing fruitcake pastry icing marshmallow bonbon. Cupcake cake sweet roll cookie fruitcake chocolate cake fruitcake. Macaroon jelly-o halvah tootsie roll chocolate icing liquorice fruitcake. Icing apple pie chocolate bar lollipop shortbread danish. Jujubes pastry shortbread chupa chups liquorice. Fruitcake pudding marzipan cheesecake tart caramels biscuit. Topping croissant chocolate cake icing cake. Jelly beans bear claw caramels wafer tootsie roll lollipop marshmallow marshmallow. Macaroon dessert bear claw cookie tart shortbread. Pie wafer lemon drops chocolate bar cupcake jelly dragée bear claw wafer.
Sesame snaps gingerbread icing candy donut macaroon. Jelly-o bear claw jelly beans jelly-o croissant cake cheesecake. Cheesecake marshmallow soufflé dragée croissant. Dessert cake pie biscuit carrot cake fruitcake ice cream lollipop. Bear claw pie cookie gummi bears biscuit pie gummies pudding cake. Gummi bears sweet roll pudding cookie muffin. Oat cake pie candy toffee tootsie roll muffin. Cotton candy gummi bears wafer topping chocolate bar tart. Toffee croissant icing bear claw cake cheesecake. Lemon drops dragée danish powder jelly beans jelly. Chupa chups toffee sugar plum icing carrot cake macaroon sugar plum candy pudding. Marzipan cake fruitcake lemon drops sweet marzipan cake. Tiramisu sweet roll sweet roll tootsie roll wafer sesame snaps sugar plum. Brownie tootsie roll ice cream sugar plum fruitcake gummi bears.
            </div>
        </div>

        <div id="t-header" class="l-class">
            <div>text text text text text text -></div>
            <div>text text text text text text -></div>
            <div>text text text text text text -></div>
            <div>
                <a href="#">link text</a>
                +
                <a href="#">link text</a>
            </div>
        </div>

        <div class="scrollbox l-class" id="log">
            <div>
                <h3>Title</h3>
                Brownie gummies gummies soufflé fruitcake soufflé powder brownie. Tootsie roll oat cake halvah fruitcake lemon drops. Halvah gummi bears apple pie tiramisu apple pie jelly-o pastry. Macaroon jelly beans toffee cake chocolate toffee ice cream lollipop tootsie roll. Gummies icing fruitcake pastry icing marshmallow bonbon. Cupcake cake sweet roll cookie fruitcake chocolate cake fruitcake. Macaroon jelly-o halvah tootsie roll chocolate icing liquorice fruitcake. Icing apple pie chocolate bar lollipop shortbread danish. Jujubes pastry shortbread chupa chups liquorice. Fruitcake pudding marzipan cheesecake tart caramels biscuit. Topping croissant chocolate cake icing cake. Jelly beans bear claw caramels wafer tootsie roll lollipop marshmallow marshmallow. Macaroon dessert bear claw cookie tart shortbread. Pie wafer lemon drops chocolate bar cupcake jelly dragée bear claw wafer.
Sesame snaps gingerbread icing candy donut macaroon. Jelly-o bear claw jelly beans jelly-o croissant cake cheesecake. Cheesecake marshmallow soufflé dragée croissant. Dessert cake pie biscuit carrot cake fruitcake ice cream lollipop. Bear claw pie cookie gummi bears biscuit pie gummies pudding cake. Gummi bears sweet roll pudding cookie muffin. Oat cake pie candy toffee tootsie roll muffin. Cotton candy gummi bears wafer topping chocolate bar tart. Toffee croissant icing bear claw cake cheesecake. Lemon drops dragée danish powder jelly beans jelly. Chupa chups toffee sugar plum icing carrot cake macaroon sugar plum candy pudding. Marzipan cake fruitcake lemon drops sweet marzipan cake. Tiramisu sweet roll sweet roll tootsie roll wafer sesame snaps sugar plum. Brownie tootsie roll ice cream sugar plum fruitcake gummi bears.
            </div>
        </div>
    </div>
    <div>
        <button id="audio-button">
            <!-- icons from https://primer.style/foundations/icons/ - MIT licensed by GitHub -->
            <svg
                id="audio-muted"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 16 16"
                width="20"
                height="20"
            >
                <path
                    d="M8 2.75v10.5a.751.751 0 0 1-1.238.57L3.473 11H1.75A1.75 1.75 0 0 1 0 9.25v-2.5C0 5.784.784 5 1.75 5h1.722l3.29-2.82A.75.75 0 0 1 8 2.75Zm3.28 2.47L13 6.94l1.72-1.72a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L14.06 8l1.72 1.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L13 9.06l-1.72 1.72a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L11.94 8l-1.72-1.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-7.042 1.1a.752.752 0 0 1-.488.18h-2a.25.25 0 0 0-.25.25v2.5c0 .138.112.25.25.25h2c.179 0 .352.064.488.18L6.5 11.62V4.38Z"
                ></path>
            </svg>

            <svg
                id="audio-unmuted"
                style="display: none"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 16 16"
                width="20"
                height="20"
            >
                <path
                    d="M7.563 2.069A.75.75 0 0 1 8 2.75v10.5a.751.751 0 0 1-1.238.57L3.472 11H1.75A1.75 1.75 0 0 1 0 9.25v-2.5C0 5.784.784 5 1.75 5h1.723l3.289-2.82a.75.75 0 0 1 .801-.111ZM6.5 4.38 4.238 6.319a.748.748 0 0 1-.488.181h-2a.25.25 0 0 0-.25.25v2.5c0 .138.112.25.25.25h2c.179 0 .352.064.488.18L6.5 11.62Zm6.096-2.038a.75.75 0 0 1 1.06 0 8 8 0 0 1 0 11.314.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042 6.5 6.5 0 0 0 0-9.193.75.75 0 0 1 0-1.06Zm-1.06 2.121-.001.001a5 5 0 0 1 0 7.07.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734 3.5 3.5 0 0 0 0-4.95.75.75 0 1 1 1.061-1.061Z"
                ></path>
            </svg>
            <div class="marquee">
                <span>Rolling Girl - Wowaka</span>
            </div>
        </button>
        <script>
            // audio player made by hkau

            // set audio
            const AudioURL = "https://ia600205.us.archive.org/15/items/HatsuneMikuRollingGirlPVVOCALOID/Hatsune Miku - Rolling Girl (PV) - VOCALOID.mp3";

            // state
            let Playing = false;
            const audio = new Audio(AudioURL);

            // get icons
            const Icons = {
                Muted: document.getElementById("audio-muted"),
                Unmuted: document.getElementById("audio-unmuted"),
            };

            // ...
            document.getElementById("audio-button").addEventListener(
                "click",
                () => {
                    Playing = !Playing; // swap playing state

                    // toggle icons
                    if (Playing) {
                        Icons.Muted.style.display = "none";
                        Icons.Unmuted.style.display = "block";
                    } else {
                        Icons.Muted.style.display = "block";
                        Icons.Unmuted.style.display = "none";
                    }

                    // play/stop audio
                    if (Playing) audio.play();
                    else audio.pause();
                }
            );
        </script>
    </div>
</div>
</body>
</html>

the .cc/rollinggirl container keeps showing up differently from the original (as plain black text), is there any way to fix it??