lucille's tartlet archive

HTML SECTION

<div class="everything">
    <div class="url-text">/kohane</div>
    <div class="main-box">
        <div class="kohammy"></div>
        <div class="main-info">
            emyu / lucille 15yo
            <br>
            all prns gfluid ⚢
            <br>
            cute hamster girl <img src="https://file.garden/ZtuMn9OuizV8RAz5/pixels/animals/hamster%20pink%20berry.gif" width="16">
            <br>
            <a href="https://www.sekaipedia.org/wiki/Akiyama_Mizuki">mizuki</a> oshi & yume
            <br>
            <em>read <strong>more</strong> . . . ?</em>
        </div>
        <div class="scrollbox">
            <code>abt me</code> hello! i'm emyu ^.^ i would describe myself as a kindhearted but shy girl (or boy. or both!)
            <br>
            the most important thing to note is that i'm <em>extremely</em> socially anxious,,, ^^; i'm just not very social in general (i especially struggle with dms...) so keep that in mind Ok?
            <br>
            besides mizuki, i'm also a <a href="https://cookierun.wiki/w/Shadow_Milk_Cookie">shadow milk</a> yume!! this is very important too, ok? i'm sharing so do not fear. there's <a href="">more</a> but those two are the most important
            <br>
            i don't really have much else to say atm #sorry
            <br>
            <br>
            <code>interests</code> my main fandoms are <strong>project sekai</strong> and <strong>cookie run</strong>! besides fandom stuff i also like <strong>idols</strong>, making websites (pastebins & from scratch), science (mainly weather and space), and fashion ^_^ i also luv hamsters. for a more extensive list, go to <a href="/mermaid">/mermaid</a>!
            <br>
            <br>
            <code>dni</code> really it's just the obvious stuff (racist, homophobic, sexist etc.) i also avoid darkshippers and the like. if you're blocked and don't fit those it was almost certainly over something small and not personal ok? ^^
            <br>
            <br>
            <code>links</code> unlinked = wip
            <br>
            ext, directory, interests, <a href="/emyu">urls</a>, <a href="https://kawaii.nekoweb.org">nekoweb</a>
        </div>
    </div>
    <img class="hammy" src="https://file.garden/ZtuMn9OuizV8RAz5/images/pngs/hammy%20clover.png">
    <a class="credit" href="https://x.com/chouzaigal/status/1911204978968138077">art credit</a>
</div>

CSS SECTION

/* feel free to use my code or take inspo !! ^_^ */

/* fonts */

@font-face {
    font-family: cheekyrabbit;
    src: url(https://file.garden/ZtuMn9OuizV8RAz5/fonts/Cheeky%20Rabbit.ttf);
}

@font-face {
    font-family: willow;
    src: url(https://file.garden/ZtuMn9OuizV8RAz5/fonts/willow.ttf);
}

@font-face {
    font-family: pinkbunny;
    src: url(https://file.garden/ZtuMn9OuizV8RAz5/fonts/Pink%20Bunny.ttf);
}

/* text styling (+ cursor) */

* {
    color: #6c222e;
    font-family: willow;
    cursor: url(https://file.garden/ZtuMn9OuizV8RAz5/cursors/kohane%20normal.cur), auto;
}

a, button, .button {
    cursor: url(https://file.garden/ZtuMn9OuizV8RAz5/cursors/kohane%20link.cur), auto;
}

a {
    color: #e891a0 !important;
    filter:
        drop-shadow(1px 0 white)
        drop-shadow(-1px 0 white)
        drop-shadow(0 1px white)
        drop-shadow(0 -1px white);
}

a:hover {
    font-style: italic;
}

code {
    font-family: pinkbunny;
    font-size: 17px;
    text-shadow:
        0.5px 0 white,
        -0.5px 0 white,
        0 0.5px white,
        0 -0.5px white;
    background: linear-gradient(#ffe9ed, #ffb7c3);
    border: solid 1px #d77b8b;
    border-radius: 5px;
    padding: 0 3px;
}

/* pre-existing html styling */

body {
    background: url(https://file.garden/ZtuMn9OuizV8RAz5/images/bgs/carrd%20pink%20hearts.gif);
}

.content_container {
    max-width: 500px;
}

.card {
    background: transparent;
    box-shadow: none !important;
}

.button, .button:hover {
    color: #6c222e !important;
    font-family: pinkbunny;
    font-size: 17px;
    text-shadow:
        0.5px 0 white,
        -0.5px 0 white,
        0 0.5px white,
        0 -0.5px white;
    background: linear-gradient(#ffe9ed, #ffb7c3);
    border: solid 1px #d77b8b;
    border-radius: 5px;
    padding: 10px;
}

.button:hover {
    background: linear-gradient(#ffcfd7, #ff9eae);
}

/* new classes */

.url-text {
    font-family: cheekyrabbit;
    font-size: 55px;
    background: linear-gradient(to top, #ffb7c3 2%, #ffe9ed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter:
        drop-shadow(1px 0 white)
        drop-shadow(-1px 0 white)
        drop-shadow(0 1px white)
        drop-shadow(0 -1px white)
        drop-shadow(1px 0 #e69da9)
        drop-shadow(-1px 0 #e69da9)
        drop-shadow(0 1px #e69da9)
        drop-shadow(0 -1px #e69da9)
        drop-shadow(0 0 3px #c37a86aa);
    margin-bottom: -20px;
}

.everything {
    width: 400px;
    height: 350px;
    margin: 0 auto;
}

.main-box {
    font-size: 15px;
    width: 300px;
    height: 285px;
    border: solid 20px;
    border-image: url(https://file.garden/ZtuMn9OuizV8RAz5/borders/pf034-plate-i03.gif) fill 25% round;
}

.kohammy {
    background: url(https://file.garden/ZtuMn9OuizV8RAz5/images/everything/hammy%20normal.png);
    background-size: contain;
    -webkit-mask-image: url(https://file.garden/ZtuMn9OuizV8RAz5/images/masks/blurry%20heart.png);
    -webkit-mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    width: 100px;
    height: 100px;
    display: inline-block;
    transition: ease 0.5s;
}

.kohammy:hover {
    background: url(https://file.garden/ZtuMn9OuizV8RAz5/images/everything/hammy%20hover.png);
    background-size: contain;
    transform: rotate(-8deg);
}

.main-info {
    text-align: center;
    width: 150px;
    height: 100px;
    display: inline-block;
    margin-top: 5px;
    float: right;
}

.scrollbox {
    border: solid 10px;
    border-image: url(https://file.garden/ZtuMn9OuizV8RAz5/borders/frill%20kohane.png) fill 8 round;
    width: 100%;
    height: 135px;
    overflow: auto;
}

.hammy {
    width: 125px;
    float: right;
    margin-top: -135px;
    transition: ease 0.5s;
}

.hammy:hover {
    transform: scaleY(0.8);
}

a.credit {
    color: #6c222e !important;
}

/* scrollbar */

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar:horizontal {
    height: 12px;
}

::-webkit-scrollbar-corner {
    background: white;
}

::-webkit-scrollbar-track:vertical {
    background: linear-gradient(90deg, #fff, #f2f2f2 20%);
    border-radius: 5px; 
}

::-webkit-scrollbar-track:horizontal {
    background: linear-gradient(180deg, #fff, #f2f2f2 20%);
    border-radius: 5px; 
}

::-webkit-scrollbar-thumb {
    border: 1.5px solid #aaa;
    border-radius: 5px;
    box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
}

::-webkit-scrollbar-thumb:vertical {
    background: linear-gradient(90deg, #fff 45%, #ddd 0, #e5e5e5);
}

::-webkit-scrollbar-thumb:horizontal {
    background: linear-gradient(180deg, #fff 45%, #ddd 0, #e5e5e5);
}

HTML

<div class="everything">
    <div class="main-box">
        <div class="the-content">
            <div class="url-text">/neapolitan</div>
            <div class="marquee">
                <p>Here, I know that the sympathy of love, is, after all, the material of love ♡</p>
            </div>
            <div class="scroll-outer">
                <div class="scrollbox">
                    <div class="subpage" id="tarts">
                        <a href="/kohane">main</a>, <a href="/melody">main 2</a> extended, <a href="/mermaid">interests</a>, f/os, associations & tropes, <a href="/aya">favs</a>, paste rules, <a href="/emyu">urls</a>
                        <br>
                        more eventually ^_^
                    </div>
                    <div class="subpage" id="offsite">
                        <a href="https://enanan.neocities.org">neocities</a>, <a href="https://kawaii.nekoweb.org">nekoweb</a>, <a href="https://mizuki.straw.page">strawpage</a>, <a href="https://fluffle.cc/candyapple">fluffle</a>, <a href="https://x.com/playwithcats">twitter</a>, <a href="https://www.tumblr.com/emyucille">tumblr</a>, <a href="https://discordid.netlify.app/?id=574718603614748682">discord</a>, <a href="https://amia.atabook.org">atabook</a>
                    </div>
                </div>
            </div>
        </div>
        <img class="saki" src="https://file.garden/ZtuMn9OuizV8RAz5/renders/mine/sana5353.png">
    </div>
    <img class="teddy" src="https://file.garden/ZtuMn9OuizV8RAz5/images/pngs/neapolitan%20teddy.png">
    <div class="flexingmybox">
        <div class="credit"><a href="https://x.com/sananyan5353/status/2022777371758088399">art credit</a></div>
        <div class="button-holder">
            <a class="link-button" href="#tarts">onsite</a>
            <a class="link-button" href="#offsite">offsite</a>
        </div>
    </div>
</div>

CSS

/* hello! you are free to use code here as a template, but credit is appreciated for this specific page ^_^ refer to /rin for more details! */

/* fonts */

@font-face {
    font-family: studyblues;
    src: url(https://file.garden/ZtuMn9OuizV8RAz5/fonts/Studyblues-Regular.ttf);
}

/* text (+ cursor) */

* {
    color: #4d2a02;
    font-family: studyblues;
    cursor: url(https://file.garden/ZtuMn9OuizV8RAz5/cursors/chocoheart%20love.webp), auto;
}

a {
    color: #d58493 !important;
}

span a {
    filter:
        drop-shadow(1px 0 white)
        drop-shadow(-1px 0 white)
        drop-shadow(0 1px white)
        drop-shadow(0 -1px white);
}

/* pre-existing html */

body {
    background: url(https://file.garden/ZtuMn9OuizV8RAz5/images/bgs/neapolitan.jpg);
    background-size: contain;
}

.content_container {
    max-width: 520px;
}

.card {
    background: transparent;
    box-shadow: none !important;
}

.button, .button:hover {
    color: #7a482f !important;
    text-shadow:
        1.5px 0 white,
        -1.5px 0 white,
        0 1.5px white,
        0 -1.5px white;
    font-size: 25px;
    background: linear-gradient(#fffce6, lemonchiffon);
    border: solid 2px white;
    outline: solid 1px #dfdcca;
    border-radius: 10px;
    padding: 8px;
}

.button:hover {
    background: linear-gradient(#ffe3e9, #ffbfcb);
    outline-color: #decace;
}

/* new classes */

.everything {
    width: 500px;
    height: 340px;
    margin: 0 auto;
}

.main-box {
    background: url(https://i.pinimg.com/736x/b9/73/88/b97388ea1311c867e88600991f9b440b.jpg) left no-repeat;
    background-size: 600px;
    border: dashed 1px pink;
    border-radius: 10px;
    outline: solid 3px #4d2a02;
    filter: drop-shadow(0 0 3px white);
    width: 400px;
    height: 295px;
    margin: 0 0 10px 80px;
}

.the-content {
    background: transparent;
    width: 250px;
    height: 275px;
    margin: 10px;
    position: relative;
    float: right;
    z-index: 101;
}

.url-text {
    color: #7a482f;
    font-size: 50px;
    font-weight: bold;
    letter-spacing: 2px;
    filter:
        drop-shadow(1px 0 lemonchiffon)
        drop-shadow(-1px 0 lemonchiffon)
        drop-shadow(0 1px lemonchiffon)
        drop-shadow(0 -1px lemonchiffon)
        drop-shadow(1px 0 #ffd1da)
        drop-shadow(-1px 0 #ffd1da)
        drop-shadow(0 1px #ffd1da)
        drop-shadow(0 -1px #ffd1da)
        drop-shadow(0 0 3px #4d2a02);
}

.marquee {
    font-size: 20px;
    background: linear-gradient(#fffce6, lemonchiffon);
    border: solid 2px white;
    outline: solid 1px #dfdcca;
    border-radius: 10px;
    padding: 3px;
    overflow: hidden;
    margin-bottom: 7px;
}

.marquee p {
    color: white;
    filter:
        drop-shadow(1px 0 #7a482f)
        drop-shadow(-1px 0 #ffb9c6)
        drop-shadow(0 1px #7a482f)
        drop-shadow(0 -1px #ffb9c6);
    width: max-content;
    animation: marquee 10s linear infinite;
}

.scroll-outer {
    background: url(https://i.pinimg.com/736x/81/43/b9/8143b94fe27013f5055a47a0c86d04a7.jpg);
    background-size: contain;
    border: ridge 2px white;
    height: 174px;
    padding: 6px;
}

.scrollbox {
    border: solid 9px;
    border-image: url(https://file.garden/ZtuMn9OuizV8RAz5/borders/frill%20pink%20dots) fill 7 round;
    height: 100%;
    overflow: auto;
}

.saki {
    margin: 0 -75px;
    position: relative;
    z-index: 100;
}

.teddy {
    width: 50px;
    margin-top: -70px;
    position: relative;
    float: right;
    z-index: 102;
}

.flexingmybox {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
}

.credit a {
    color: #7a482f !important;
    filter:
        drop-shadow(1px 0 white)
        drop-shadow(-1px 0 white)
        drop-shadow(0 1px white)
        drop-shadow(0 -1px white);
    margin-left: 10px;
    position: relative;
    top: -10px;
}

.button-holder {
    align-self: flex-end;
    margin-top: -16px;
}

a.link-button {
    color: #7a482f !important;
    text-shadow:
        1.5px 0 white,
        -1.5px 0 white,
        0 1.5px white,
        0 -1.5px white;
    font-size: 25px;
    background: linear-gradient(#fffce6, lemonchiffon);
    border: solid 2px white;
    outline: solid 1px #dfdcca;
    border-radius: 10px;
    padding: 8px;
}

a.link-button:nth-of-type(even) {
    background: linear-gradient(#ffe3e9, #ffbfcb);
    outline-color: #decace;
}

/* id page code, from archive.sntry.cc/pages */

* {
    scroll-padding-top: 100%;
}

.subpage {
    display: none; 
}
    
.subpage:target {
    display: block;
}

body:not(:has(:target)) #tarts {
    display: block;
}

/* animations */

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

/* reminder to self: style scrollbar once i list enough links for one to appear... */

HTML

<div class="everything">
    <div class="url-text">welcome to /mermaid . . .</div>
    <div class="flexybox">
        <div class="interest-container">
            <div class="interest-button-holder">
                <a class="subpage-button" href="#animanga">animanga</a>
                <a class="subpage-button" href="#games">games</a>
                <a class="subpage-button" href="#music">music</a>
                <a class="subpage-button" href="#misc">misc</a>
                <a class="subpage-button" href="#home">home</a>
            </div>
            <div class="scrollbox">
                <div class="subpage" id="animanga">
                    #soon
                </div>
                <div class="subpage" id="games">
                    <strong>project sekai</strong>, bandori, d4dj, love live, idolmaster (specifically deresute & shinymas), <strong>cookie run</strong> (esp kingdom), genshin, hsr, roblox (i mainly play adopt me & royale high. ask me for my username!)
                </div>
                <div class="subpage" id="music">
                    all pjsk units (especially mmj and niigo), phantom siita, μ's, <strong>maretu</strong>, pepoyo, kairiki bear, inabakumori, a plethora of other vocaloid producers... i also just like vocaloid and jpop/jmusic in general ^_^
                </div>
                <div class="subpage" id="misc">
                    topics: <strong>idols</strong>, <strong>htmlcss</strong> (and websites in general), <strong>fashion</strong> (especially j-fashion like jirai kei, lolita, yumekawaii, yamikawaii, etc...), <strong>science</strong> (mainly space & weather related stuff)
                    <br>
                    <br>
                    misc. media: alien stage, milgram, this section is gonna be for like. youtube stuff... Should i add my fav youtubers just for fun
                </div>
                <div class="subpage" id="home">
                    <strong>bold = big interest</strong>
                    <br>
                    <br>
                    click the buttons above to navigate!
                    <br>
                    note that some stuff may be listed in multiple categories.
                </div>
            </div>
        </div>
        <div class="button-holder">
            <a class="other-button" href="/kohane"><p>main</p></a>
            <a class="other-button" href="/emyu"><p>urls</p></a>
        </div>
    </div>
</div>
WORK IN PROGRESS some colors and text are placeholders

CSS

/* fonts */

@font-face {
    font-family: romantic;
    src: url(https://file.garden/ZtuMn9OuizV8RAz5/fonts/ROMANTIC.TTF);
}

@font-face {
    font-family: testing;
    src: url(https://file.garden/ZtuMn9OuizV8RAz5/fonts/mbytepc.ttf);
}

/* text styling (+ cursor) */

* {
    font-family: testing;
}

strong {
    color: white;
    filter:
        drop-shadow(1px 0 #5e77a9)
        drop-shadow(-1px 0 #5e77a9)
        drop-shadow(0 1px #5e77a9)
        drop-shadow(0 -1px #5e77a9);
}

a:hover {
    font-style: italic;
}

/* pre-existing html styling */

/* new classes */

.everything {
    background: url(https://file.garden/ZtuMn9OuizV8RAz5/images/everything/mermaidnene.png) no-repeat right, linear-gradient(#efffff 0%, #cbeaea 20%, #cbd1ea 100%);
    /* cbeaea cbcbea 93cccc (note for myself, delete this) */
    background-size: 220px;
    border: solid 2px;
    border-radius: 10px;
    width: 400px;
    height: 300px;
    margin: 0 auto;
}

.url-text {
    color: white;
    font-family: romantic;
    font-size: 35px;
    letter-spacing: 3px;
    filter:
        drop-shadow(1px 0 #5e77a9)
        drop-shadow(-1px 0 #5e77a9)
        drop-shadow(0 1px #5e77a9)
        drop-shadow(0 -1px #5e77a9)
        drop-shadow(1px 1px 1.5px #32466d);
    padding: 1px 0 0 9px;
}

.flexybox {
    display: flex;
}

.interest-container {
    width: 250px;
    margin-top: 5px;
}

.interest-button-holder {
    width: 200px;
    margin-left: 5px;
}

a.subpage-button {
    color: #585f79;
    background: linear-gradient(#e3e9ffaa, #c1c9e5);
    border: solid 1px #8188a1;
    border-radius: 10px;
    padding: 5px;
    margin-bottom: 5px;
    display: inline-block;
}

.scrollbox {
    background: linear-gradient(#c0e7ff88, #95c5e3aa);
    /* caeafe88 addfffaa */
    backdrop-filter: blur(0.5px);
    border: solid 2px #829dae;
    /* 8faec1 */
    outline: solid 1px white;
    border-radius: 15px 50px 15px 10px;
    height: 175px;
    padding: 5px;
    margin: 3px 0 0 5px;
    overflow: auto;
}

/* id page code, from archive.sntry.cc/pages */

* {
    scroll-padding-top: 100%;
}

.subpage {
    color: #2f3e47;
    display: none; 
}
    
.subpage:target {
    display: block;
}

body:not(:has(:target)) #home {
    display: block;
}

/* end id page code */

.button-holder {
    height: 100px;
    margin-left: 7px;
    align-self: flex-end;
}

.other-button {
    text-align: center;
    letter-spacing: 3px;
    font-size: 40px;
    background: linear-gradient(#c0e7ffaa, #95c5e3cc);
    border: solid 2px #829dae;
    outline: solid 1px white;
    border-radius: 100%;
    width: 134px;
    height: 30px;
    display: block;
    transition: ease 0.3s;
}

.other-button:hover {
    backdrop-filter: blur(2px);
}

a.other-button p {
    color: white;
    font-family: romantic;
    filter:
        drop-shadow(1px 0 #5e77a9)
        drop-shadow(-1px 0 #5e77a9)
        drop-shadow(0 1px #5e77a9)
        drop-shadow(0 -1px #5e77a9);
    top: -15px;
    position: relative;
}

a.other-button:hover {
    text-decoration: none;
}

a.other-button:first-of-type {
    margin: 20px 0 20px 0;
}

/* mobile thing to make it look decent enough (specifically on my ipad and phone...) */

@media screen and (max-width: 1200px) {
    .flexybox {
        margin-top: -6px;
    }
}

/* scrollbar */

HTML SECTION

<div class="everything">
    <div class="url-text">/melody</div>
    <div class="main-stuff">
        <img src="https://file.garden/ZtuMn9OuizV8RAz5/dividers/big/kanatop.png">
        <div class="marquee">
            <p>So the images I've found of your world still unknown to me And the uncertain fragments that bloomed despite being broken I can turn them into song</p>
        </div>
        <img class="graphic" src="https://file.garden/ZtuMn9OuizV8RAz5/graphics/simple/kanagraphic.png">
        <div class="the-content">
            <div class="scrollbox">
                <div class="subpage" id="home">
                    <strong>luci</strong>lle <sup>or</sup> <div class="roman">emyu</div> ₊⊹ 15yo ཻུ۪۪♡
                    <br>
                    <div class="curly">lesbian</div> <sup>&&</sup> <em>gender</em>fluid ·˚ ༘
                    <br>
                    <div class="roman"><a href="https://pronouns.cc/@damsel" title="pronouns.cc">all</a> prns</div> 𓏲ּ𝄢 <strong>yume</strong>jo <div class="curly"><a href="https://www.sekaipedia.org/wiki/Akiyama_Mizuki" title="akiyama mizuki">1</a> <a href="https://cookierun.wiki/w/Shadow_Milk_Cookie" title="shadow milk cookie">2</a></div> ++
                    <br>
                    i ♡ idols <sup>&</sup> <div class="roman">jfashion</div> ᕱ⑅ᕱ ໒꒱
                    <br>
                    <em>click buttons 4 more . . .</em>
                </div>
                <div class="subpage" id="ext">
                    <p>first off, i'm <em>very</em> bad at socializing. i tend to respond dry as i run out of energy very easily, and i tend to get stuck on thinking about how to reply and then forgetting to actually reply,,, i'm working on this i Promise ^^; despite that, i'd say i'm a pretty kind person !! of course like every teenager on the internet i mess up but i try my hardest ^.^</p>
                    <br>
                    <p>do note that i often am 10x more likely to be interested in a conversation if it relates to my interests (especially anything related to <strong>shadow milk cookie</strong>. i don't have the word for this but they take up 90% of my thoughts...)</p>
                    <br>
                    <p>some other things to note are that i tend to overreact/overthink, and may "crash out" (for lack of a better term). i don't do that quite as often anymore but it's always a possibility. i rarely hold grudges though. mostly, i just act like a regular annoying teenager on the internet that's still discovering themselves... on the topic of thinking i tend to always either overthink or underthink the things i say #oops!</p>
                    <br>
                    <p>umm all of this could probably be summed up with <strong><em>interact with caution/care</em></strong> & expect me to spend 1 hour trying to respond to a simple dm Ok?</p>
                </div>
                <div class="subpage" id="dir">
                    <a href="/kohane">main paste</a>, <a href="/neapolitan">directory</a>, <a href="/emyu">urls</a>. refer to my <a href="https://amia.atabook.org">atabook</a> for questions and stuff ^^ you can also find me on <a href="https://x.com/playwithcats">twitter</a> and a bunch of other random places but those are mostly fandom stuff... you can aaaaalso dm me on <a href="https://discordid.netlify.app/?id=574718603614748682">discord</a>! (@amidthewaveringlight, frqs/dms/pings are all ok)
                </div>
            </div>
            <div class="button-holder">
                <a class="subpage-button" href="#home" title="main page">1</a>
                <a class="subpage-button" href="#ext" title="extended page">2</a>
                <a class="subpage-button" href="#dir" title="directory page">3</a>
            </div>
        </div>
        <img src="https://file.garden/ZtuMn9OuizV8RAz5/dividers/big/kanabottom.png">
    </div>
    <a class="credit" href="https://x.com/24hJeEpVjtYWDST">art credit</a>
    <img class="png" src="https://file.garden/ZtuMn9OuizV8RAz5/images/pngs/notes.png">
</div>

CSS SECTION

/* feel free to take inspo (both light and heavy) or use the code ^^ credit appreciated but not required idrc */

/* fonts */

@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru');

@font-face {
    font-family: 'Airplanes';
    src: url('https://file.garden/ZtuMn9OuizV8RAz5/fonts/Airplanes%20in%20the%20Night%20Sky.ttf');
}

@font-face {
    font-family: 'Curly';
    src: url('https://file.garden/ZtuMn9OuizV8RAz5/fonts/curly.ttf');
}

/* text and cursor */

a:hover {
    font-style: italic;
}

.roman {
    font-family: 'Times New Roman';
    font-size: 17px;
    display: inline;
}

.curly {
    font-family: 'Curly';
    font-size: 18px;
    display: inline;
}

/* pre-existing html */

body {
    background: url('https://file.garden/ZtuMn9OuizV8RAz5/images/bgs/wowza.png');
    background-size: cover;
}

nav, .justify-between {
    display: none;
}

.card {
    background: transparent;
    box-shadow: none !important;
}

/* new classes */

.everything {
    width: 350px;
    height: 470px;
    margin: 0 auto;
}

.url-text {
    font-family: 'Airplanes';
    font-size: 50px;
    background: url('https://file.garden/ZtuMn9OuizV8RAz5/images/bgs/wow.png');
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter:
        drop-shadow(1px 0 white)
        drop-shadow(-1px 0 white)
        drop-shadow(0 1px white)
        drop-shadow(0 -1px white)
        drop-shadow(1px 0 #999689)
        drop-shadow(-1px 0 #999689)
        drop-shadow(0 1px #999689)
        drop-shadow(0 -1px #999689)
        drop-shadow(0 0 3px #676148aa);
    margin: -30px 0 -36px 0;
    position: relative;
    z-index: 100;
}

.main-stuff {
    border: solid 15px;
    border-image: url('https://file.garden/ZtuMn9OuizV8RAz5/borders/kanafrill.png') fill 9 round;
    width: 310px;
    height: 410px;
    margin: auto;
}

.marquee {
    font-size: 20px;
    height: 21px;
    overflow: hidden;
}

.marquee p {
    color: #e6e1cd;
    filter:
        drop-shadow(1px 0 #676148)
        drop-shadow(-1px 0 #f3f0e2)
        drop-shadow(0 1px #676148)
        drop-shadow(0 -1px #f3f0e2)
        drop-shadow(1px 1px 1px #676148aa);
    font-family: 'Kosugi Maru';
    width: max-content;
    animation: marquee 16s linear infinite;
}

.the-content {
    margin-bottom: 5px;
    display: flex;
}

.scrollbox {
    font-family: 'Kosugi Maru';
    font-size: 15px;
    background: radial-gradient(white 40%, #f3f0e2cc);
    border: solid 10px;
    border-radius: 3px;
    border-image: url('https://file.garden/ZtuMn9OuizV8RAz5/borders/kanaborder.png') fill 12% round;
    border-image-outset: 3px;
    width: 240px;
    height: 130px;
    overflow: auto;
}

/* id page code, from archive.sntry.cc/pages */

* {
    scroll-padding-top: 100%;
}

.subpage {
    color: #2e2b1f;
    display: none; 
}

.subpage a {
    color: #837d65;
    text-decoration: underline;
}
    
.subpage:target {
    display: block;
}

body:not(:has(:target)) #home {
    display: block;
}

/* end id page code */

.button-holder {
    margin-left: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

a.subpage-button {
    color: #999689;
    font-family: 'Airplanes';
    text-align: center;
    text-shadow:
        1px 0 #676148,
        -1px 0 #e6e1cd,
        0 1px #676148,
        0 -1px #e6e1cd;
    background: radial-gradient(white 20%, #f3f0e2cc);
    border: solid 2px #999689;
    border-radius: 5px;
    width: 40px;
}

a.subpage-button:hover {
    text-decoration: none;
}

a.credit {
    color: #e6e1cd;
    filter:
        drop-shadow(1px 0 #676148)
        drop-shadow(-1px 0 #676148)
        drop-shadow(0 1px #676148)
        drop-shadow(0 -1px #676148);
    margin: -10px 10px 0 0;
    float: right;
}

.png {
    width: 70px;
    margin-top: -70px;
    pointer-events: none;
    animation: float 4s ease-in-out infinite;
}

/* animations */

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

@keyframes float {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
    100% {
        transform: translateY(0);
    }
}

/* scrollbar */

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-thumb {
    background: radial-gradient(#999689 10%, #fff);
    border: solid 1px #555349;
}

::-webkit-scrollbar-thumb:hover {
    background: radial-gradient(#cecbbc 10%, #fff);
}

HTML SECTION

<div class="everything">
    <div class="url-text">/aya</div>
    <div class="main-box">
        <div class="the-contents">
            <div class="scrollbox" id="main-stuff">
                <div class="subpage" id="characters">
                    <div class="subpage-title">characters</div>
                    <div class="pin" id="fav"><img src="https://file.garden/ZtuMn9OuizV8RAz5/images/aya%20pins/mizuki.png"></div>
                    <div class="pin"><img src="https://file.garden/ZtuMn9OuizV8RAz5/images/aya%20pins/saki.png"></div>
                    <div class="pin"><img src="https://file.garden/ZtuMn9OuizV8RAz5/images/aya%20pins/minori.png"></div>
                    <div class="pin"><img src="https://file.garden/ZtuMn9OuizV8RAz5/images/aya%20pins/airi.png"></div>
                    <div class="pin"><img src="https://file.garden/ZtuMn9OuizV8RAz5/images/aya%20pins/kohane.png"></div>
                    <div class="pin"><img src="https://file.garden/ZtuMn9OuizV8RAz5/images/aya%20pins/emu.png"></div>
                    <div class="pin"><img src="https://file.garden/ZtuMn9OuizV8RAz5/images/aya%20pins/nene.png"></div>
                    <div class="pin"><img src="https://file.garden/ZtuMn9OuizV8RAz5/images/aya%20pins/kanade.png"></div>
                    <div class="pin" id="fav"><img src="https://file.garden/ZtuMn9OuizV8RAz5/images/aya%20pins/miku.png"></div>
                    <div class="pin"><img src="https://file.garden/ZtuMn9OuizV8RAz5/images/aya%20pins/pareo.png"></div>
                    <div class="pin"><img src="https://file.garden/ZtuMn9OuizV8RAz5/images/aya%20pins/aya.png"></div>
                    <div class="pin"><img src="https://file.garden/ZtuMn9OuizV8RAz5/images/aya%20pins/mutsumi.png"></div>
                    <div class="pin"><img src="https://file.garden/ZtuMn9OuizV8RAz5/images/aya%20pins/nico.png"></div>
                    <div class="pin"><img src="https://file.garden/ZtuMn9OuizV8RAz5/images/aya%20pins/rina.png"></div>
                    <div class="pin"><img src="https://file.garden/ZtuMn9OuizV8RAz5/images/aya%20pins/kurumi.png"></div>
                    <div class="pin"><img src="https://file.garden/ZtuMn9OuizV8RAz5/images/aya%20pins/michiru.png"></div>
                    <div class="pin"><img src="https://file.garden/ZtuMn9OuizV8RAz5/images/aya%20pins/riamu.png"></div>
                    <div class="pin"><img src="https://file.garden/ZtuMn9OuizV8RAz5/images/aya%20pins/chieri.png"></div>
                    <div class="pin"><img src="https://file.garden/ZtuMn9OuizV8RAz5/images/aya%20pins/shin.png"></div>
                    <div class="pin" id="fav"><img src="https://file.garden/ZtuMn9OuizV8RAz5/images/aya%20pins/milk.png"></div>
                    <div class="pin"><img src="https://file.garden/ZtuMn9OuizV8RAz5/images/aya%20pins/lily.png"></div>
                    <div class="pin"><img src="https://file.garden/ZtuMn9OuizV8RAz5/images/aya%20pins/sugar.png"></div>
                    <div class="pin"><img src="https://file.garden/ZtuMn9OuizV8RAz5/images/aya%20pins/apple.png"></div>
                    <div class="pin"><img src="https://file.garden/ZtuMn9OuizV8RAz5/images/aya%20pins/hutao.png"></div>
                    <div class="pin"><img src="https://file.garden/ZtuMn9OuizV8RAz5/images/aya%20pins/sigewinne.png"></div>
                    <div class="pin" id="fav"><img src="https://file.garden/ZtuMn9OuizV8RAz5/images/aya%20pins/sparkle.png"></div>
                    <div class="pin" id="fav"><img src="https://file.garden/ZtuMn9OuizV8RAz5/images/aya%20pins/sparxie.png"></div>
                    <div class="pin"><img src="https://file.garden/ZtuMn9OuizV8RAz5/images/aya%20pins/clara.png"></div>
                    <div class="pin"><img src="https://file.garden/ZtuMn9OuizV8RAz5/images/aya%20pins/hyacine.png"></div>
                    <div class="pin" id="fav"><img src="https://file.garden/ZtuMn9OuizV8RAz5/images/aya%20pins/idol.png"></div>
                    <div class="pin" id="fav"><img src="https://file.garden/ZtuMn9OuizV8RAz5/images/aya%20pins/chiikawa.png"></div>
                </div>
                <div class="subpage" id="ships">
                    <div class="subpage-title">ships</div>
                    <div class="pin" id="fav"><img src="https://file.garden/ZtuMn9OuizV8RAz5/images/aya%20pins/mizuena.png"></div>
                    <div class="pin"><img src="https://file.garden/ZtuMn9OuizV8RAz5/images/aya%20pins/shihosaki.png"></div>
                    <div class="pin"><img src="https://file.garden/ZtuMn9OuizV8RAz5/images/aya%20pins/polypinks.png"></div>
                    <div class="pin" id="fav"><img src="https://file.garden/ZtuMn9OuizV8RAz5/images/aya%20pins/shadowvanilla.png"></div>
                    <div class="pin"><img src="https://file.garden/ZtuMn9OuizV8RAz5/images/aya%20pins/cookieyuri.png"></div>
                    <div class="pin"><img src="https://file.garden/ZtuMn9OuizV8RAz5/images/aya%20pins/mortiraana.png"></div>
                </div>
            </div>
            <div class="bottom-stuff">
                <div class="scrollbox" id="info">
                    glowing ones mean they're my absolute favorites! i adore everyone here tho ^_^
                    <br>
                    this isn't an extensive list, i like <strong>many</strong> characters & ships ♪
                </div>
                <div class="scrollbox" id="directory">
                    <p>pages</p>
                    <a href="#characters">characters</a>
                    <a href="#ships">ships</a>
                    <br>
                    <p>other</p>
                    <a href="/kohane">main</a>
                    <a href="/neapolitan">links</a>
                </div>
            </div>
        </div>
    </div>
    <img class="big-aya" src="https://file.garden/ZtuMn9OuizV8RAz5/images/pngs/characters/ayachan.png">
</div>

CSS SECTION

/* im too lazy to organize this with comments #sorry. code f2u but credit me! ok?
i took inspo 4 the background for the body and .main-box from this carrd tutorial: https://www.youtube.com/watch?v=faORrP-j6Zw */

@font-face {
    font-family: rollinglove;
    src: url(https://file.garden/ZtuMn9OuizV8RAz5/fonts/Rolling%20Love.ttf);
}

@font-face {
    font-family: mali;
    src: url(https://file.garden/ZtuMn9OuizV8RAz5/fonts/Mali-Regular.ttf);
}

* {
    color: #553949;
    font-family: mali;
}

body {
    background: url(https://file.garden/ZtuMn9OuizV8RAz5/svgs/carrd%20bgs/carrd%20plus%20dots%20FFFFFF80.svg), radial-gradient(#fec5e5, white 70%);
    background-size: 26px, auto;
}

::selection {
    background: #fec5e5;
}

a {
    color: #813f64 !important;
}

a:hover {
    font-style: italic;
}

nav, .justify-between {
    display: none;
}

.card {
    background: transparent;
    box-shadow: none !important;
}

.everything {
    filter: drop-shadow(0 0 3px #a1768eaa);
    width: 700px;
    height: 440px;
    margin: 80px auto auto auto;
}

.url-text {
    color: white;
    font-family: rollinglove;
    font-size: 40px;
    text-align: center;
    letter-spacing: 2px;
    text-shadow:
        2px 0 #ff99d2,
        -2px 0 #ff99d2,
        0 2px #ff99d2,
        0 -2px #ff99d2,
        0 0 5px #d0378d;
    background: radial-gradient(#fff 30%, #fec5e5);
    border: solid 1px #dd9cc0;
    border-radius: 100%;
    width: 150px;
    margin: 0 0 -15px 550px;
    position: relative;
    transform: rotate(2deg);
    z-index: 102;
}

.main-box {
    background: white url(https://file.garden/ZtuMn9OuizV8RAz5/svgs/carrd%20bgs/carrd%20pixel%20animated%20FEC5E580.svg);
    border-radius: 10px;
    box-shadow: inset 13px 0px 6px -10px rgb(116 86 103 / 20%), inset -13px 0px 6px -10px rgb(116 86 103 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(116 86 103 / 38%);
    width: 600px;
    height: 400px;
    margin-left: 100px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.the-contents {
    width: 400px;
    height: 100%;
    padding: 10px;
    margin-right: 5px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 101;
}

.scrollbox {
    background: linear-gradient(#ffffffcc, #ffe8f5cc);
    border: solid 1px #dd9cc0;
    border-radius: 10px;
    box-shadow: inset 13px 0px 6px -10px rgb(157 126 143 / 20%), inset -13px 0px 6px -10px rgb(157 126 143 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(157 126 143 / 38%), 1px 1px 5px #a1768eaa;
    padding: 5px;
    overflow: auto;
}

#main-stuff {
    width: 100%;
    min-height: 200px;
}

/* id page code, from archive.sntry.cc/pages */

* {
    scroll-padding-top: 100%;
}

.subpage {
    display: none; 
}
    
.subpage:target {
    display: block;
}

body:not(:has(:target)) #characters {
    display: block;
}

/* end id page code */

.subpage-title {
    color: white;
    font-family: rollinglove;
    font-size: 40px;
    text-align: center;
    letter-spacing: 2px;
    text-shadow:
        2px 0 #ff99d2,
        -2px 0 #ff99d2,
        0 2px #ff99d2,
        0 -2px #ff99d2,
        0 0 5px #d0378d;
    background: radial-gradient(#fff 30%, #fec5e5);
    border: solid 1px #dd9cc0;
    border-radius: 100%;
    width: 200px;
    margin:  auto;
}

.subpage-title:hover {
    font-style: italic;
}

.pin {
    border-radius: 100%;
    width: 65px;
    height: 65px;
    display: inline-block;
    overflow: clip;
    transition: 0.2s ease;
}

#fav {
    border: solid 1px white;
    filter: drop-shadow(0 0 2px #ff8fce);
}

.pin:hover {
    transform: rotate(-10deg) scale(1.05);
}

.pin::after {
    content: "";
    border-radius: 100%;
    width: 65px;
    height: 65px;
    margin-top: -65px;
    display: block;
    position: relative;
    box-shadow: inset 1px 1px 2px white, inset -1px -1px 2px #0000008a;
    pointer-events: none;
}

.pin img {
    width: 65px;
    height: 65px;
    display: block;
}

.bottom-stuff {
    display: flex;
    flex-direction: row;
    gap: 5px;
}

#info {
    font-size: 16px;
    width: 500px;
    height: 170px;
}

#directory {
    width: 100%;
    height: 200px;
    margin: -30px -7px 0 0;
    position: relative;
}

#directory p {
    text-align: center;
    filter:
        drop-shadow(2px 0 white)
        drop-shadow(-2px 0 white)
        drop-shadow(0 2px white)
        drop-shadow(0 -2px white)
        drop-shadow(0 0 1px #d0378d);
}

#directory a {
    color: white !important;
    font-family: rollinglove;
    font-size: 25px;
    text-align: center;
    letter-spacing: 2px;
    text-shadow:
        2px 0 #ff99d2,
        -2px 0 #ff99d2,
        0 2px #ff99d2,
        0 -2px #ff99d2,
        0 0 5px #d0378d;
    background: radial-gradient(#fff 30%, #fec5e5);
    border: solid 1px #dd9cc0;
    border-radius: 100%;
    width: 130px;
    margin: auto;
    display: block;
}

.big-aya {
    width: 370px;
    max-height: 450px !important;
    margin-top: -400px;
    position: relative;
    top: -15px;
    z-index: 100;
    animation: floating 3s infinite ease-in-out;
}

@keyframes floating { 
    0% { 
        transform: translate(0,  0px); 
    }

50%  { 
        transform: translate(0, -7px); 
    }

100%   {
        transform: translate(0, 0px); 
    } 
}

::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

::-webkit-scrollbar-corner {
    background: #fff;
}

::-webkit-scrollbar-track:vertical {
    background: linear-gradient(90deg, #e5e5e5, #fcfcfc 20%);
    border-radius: 5px; 
}

::-webkit-scrollbar-track:horizontal {
    background: linear-gradient(180deg, #e5e5e5, #fcfcfc 20%);
    border-radius: 5px; 
}

::-webkit-scrollbar-thumb {
    border: 1.5px solid #aaa;
    border-radius: 5px;
    box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
}

::-webkit-scrollbar-thumb:vertical {
    background: linear-gradient(90deg, #fff 45%, #eee 0, #ddd);
}

::-webkit-scrollbar-thumb:horizontal {
    background: linear-gradient(180deg, #fff 45%, #eee 0, #ddd);
}