lucille's pastry archive

HTML SECTION

<div class="header">
/hamster
</div>

<div class="mainbox">
<div class="scrollbox">
  <em>italic</em>, <strong>bold</strong>, <a href="urlhere" rel="noopener noreferrer">link</a>
  <br>
  <br>
  no rules for this template besides follow the pastry rules. otherwise idrc :3
  <br>
  <br>
  Gummi bears marshmallow macaroon gummi bears gummies. Jujubes tootsie roll dragée bonbon gingerbread. Jujubes icing macaroon cookie cake biscuit halvah biscuit. Jujubes pie cake oat cake carrot cake sugar plum pie sesame snaps. Tootsie roll jelly-o marzipan sweet icing tiramisu. Brownie chocolate liquorice lollipop gummies jujubes tootsie roll. Bear claw sesame snaps wafer sweet roll powder cake jujubes. Carrot cake gummies candy canes icing topping pudding pastry. Cheesecake gummi bears cookie caramels pie liquorice.
</div>
</div>

css SECTION

/* font importing section */

/* importing the font used in the header */
@font-face {
  font-family: nicechalk;
  src: url(https://file.garden/ZtuMn9OuizV8RAz5/fonts/Nice%20Chalk%20Demo.ttf);
}

/* general section */

/* this selects everything on the page, and is used in this case to make the cursor appear the same everywhere on the page */
* {
  cursor: url(https://file.garden/ZtuMn9OuizV8RAz5/cursors/hamtaro.cur), auto;
}

/* this "hides" the text container and also fixes sizing issues  */
.text-container {
  background-color: transparent;
  width: 800px;
  height: 500px;
  margin: auto;
  overflow-y: hidden;
}

/* this changes the page's background  */
body {
  background-color: white;
}

/* recoloring the buttons */
.button {
  color: black;
  background-color: #ffa3c2;
  border: 3px solid #FF6699;
}

/* fixing some extra colors */
.site-header, .site-footer, .paste-info, svg {
  color: black;
}

/* text section */

/* "strong" selects all bolded text, this is used to recolor it (and also fix the text not bolding...) */
strong {
  color: white;
  text-shadow:  -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
  font-weight: 700 !important;
}

/* "a" selects all links! im using this to both change how the links look and to change the cursor whenever you hover over a link */
a {
  color: #FF6699;
  text-decoration: underline;
  cursor: url(https://file.garden/ZtuMn9OuizV8RAz5/cursors/seed.cur), auto;
}

/* div classes section */

/* styling the "/url" text */
.header {
  color: #FF6699;
  text-shadow: -1.5px -1.5px 0 white, 1.5px -1.5px 0 white, -1.5px 1.5px 0 white, 1.5px 1.5px 0 white, -3px -3px 0 black, 3px -3px 0 black, -3px 3px 0 black, 3px 3px 0 black;
  font-family: nicechalk;
  font-size: 70px;
  text-align: center;
  position: relative;
  top: 30px;
  left: -210px;
  z-index: 10;
}

/* styling the main box, aka the box behind the scrollbox (it just makes stuff look a lot better) */
.mainbox {
  background-color: #FF6699;
  border: solid 5px #dc2260;
  border-radius: 20px;
  width: 600px;
  height: 300px;
  padding: 20px;
  margin: auto;
  display: block;
}

/* stying the scrollbox, the box next to kohane with all the text in it */
.scrollbox {
  color: black;
  background-color: white;
  border: solid 4px #ff4583;
  border-radius: 20px;
  width: 400px;
  height: 260px;
  padding: 10px;
  margin: auto;
  display: block;
  float: right;
  overflow-x: auto;
  overflow-y: scroll;
}

/* styling the kohane png */
.bigpng {
  width: 290px;
  margin: auto;
  display: block;
  position: relative;
  top: -395px;
  left: -230px;
  z-index: 9;
}

/* styling the hamster png */
.smallpng {
  width: 120px;
  margin: auto;
  display: block;
  position: relative;
  top: -490px;
  left: 300px;
  animation: tilt step-end 1s infinite alternate;
}

/* animation section */

/* animation code */
@keyframes tilt {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(5deg);
  }
}

/* scrollbar section */

/* changing scrollbar width */
::-webkit-scrollbar {
  width: 20px;
}

/* recoloring the background of the scrollbar */
::-webkit-scrollbar-track {
  background-color: #ffc3d7;
  border: solid #ff98ba 2px;
  border-radius: 10px;
}

/* recoloring the part of the scrollbar that you can drag */
::-webkit-scrollbar-thumb {
  background-color: #FF6699;
  border: solid #ff397b 2px;
  border-radius: 10px;
}

HTML SECTION

<img src="https://i.postimg.cc/kX4CVJMZ/mizubow.png" class="mizzy">
<div class="info">
  emyu's url list!
  <br>
  key: <em>wip</em>, <a href="" rel="noopener noreferrer">in use</a>, <strong>nft</strong>
  <br>
  contact: <a href="https://tetratto.com/@idol" rel="noopener noreferrer">@idol on tetratto</a>
  <br>
  OR <a href="https://discordid.netlify.app/?id=574718603614748682" rel="noopener noreferrer">@idealidol on discord</a>
</div>
<div class="scrollbox">
  <div class="txt">words O</div>
  <strong>/doll</strong>, /cute, /kawaii, <a href="/hamster" rel="noopener noreferrer">/hamster</a>, <em>/neapolitan</em>, /fashion, /magical, /menhera, <em>/wonder</em>, <em>/showtime</em>, /march, <strong><em>/idol</em></strong>
  <br>
  <div class="txt">media O</div>
  /furina, <strong><em>/mizuki</em></strong>, <em>/mizuena</em>, /sparkle, <em>/hutao</em>, /sigewinne, <a href="/kirara" rel="noopener noreferrer">/kirara</a>, <em>/yanfei</em>, /firefly, /momonga, /hyacine, /whitelily, /xingqiu, /chongyun, /yuki, /saki, /klee, /barbara, /riamu, /qiqi, /diona, <strong>/candyapple</strong>, /aya, /shelly, <em>/mayu</em>, /clara, <em>/kanamafu</em>
  <br>
  <div class="txt">personal O</div>
  <a href="/emyu" rel="noopener noreferrer">/emyu</a>
  <br>
  <br>
  every url that isn't in use or in the process should have plans listed. if not, they will shortly !!
</div>
<div class="info">
  borders by cheruvic on tumblr
</div>

CSS SECTION

/* yes you can take any of the code even tho this isnt a template. just beware i did not leave notes besides the sections,,,, */

/* fonts section */

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

/* general section */

* {
  cursor: url(https://file.garden/ZtuMn9OuizV8RAz5/cursors/ribbon.cur), auto;
}

body {
  background-image: url(https://i.postimg.cc/VkNLq9fY/hearts.png);
}

.text-container {
  color: #5f4f3a !important;
  background-color: transparent;
  border: solid 20px;
  border-image: url(https://i.postimg.cc/CxCH8gKy/cheruvic.png) 30% fill round;
  max-width: 600px;
  margin: auto;
}

/* text section  */

a {
  color: #f2bdcd;
  text-decoration: underline;
  cursor: url(https://file.garden/ZtuMn9OuizV8RAz5/cursors/milkeemimi.cur), auto;
}

a:hover {
  filter: blur(1px);
  transition: 0.3s;
  font-style: italic;
}

strong {
  color: white;
  text-shadow:  -1px -1px 0 #5f4f3a, 1px -1px 0 #5f4f3a, -1px 1px 0 #5f4f3a, 1px 1px 0 #5f4f3a;
  font-weight: 700 !important;
}

/* new classes section  */

.txt {
  color: #f2bdcd;
  font-family: cheekyrabbit;
  font-size: 25px;
}

.mizzy {
  width: 250px;
  display: block;
  margin: auto;
}

.info {
  text-align: center;
}

.scrollbox {
  background-color: transparent;
  border: solid 20px;
  border-image: url(https://i.postimg.cc/JhZn0r7J/cheruvic.png) 24% fill round;
  text-align: center;
  max-width: 350px;
  height: 260px;
  padding: 10px;
  margin: auto;
  display: block;
  overflow-x: auto;
  overflow-y: scroll;
}

/* special stuff */

.button {
  color: #5f4f3a;
  background-color: white;
  border: solid 3px #f2bdcd;
}

.site-header, .site-footer, .paste-info, svg {
  color: #5f4f3a;
}

.site-header {
  a {
    text-shadow: none;
  }
}

/* scrollbar section */

::-webkit-scrollbar {
  width: 13px;
}
 
::-webkit-scrollbar-track {
  background-color: white;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: 1px solid #d3d3d3;
}

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 5px;
  background: linear-gradient(#ffd0de, #ffe6ed);
  border: 1px solid #f2bdcd;
}

video preview

HTML SECTION

<div class="container">
  <div class="mizuki"></div>
  <div class="png"></div>
  <div class="urltext">/mizuki</div>
  <div class="scroll">
    hover + scroll
    <br>
    normal <strong>bold</strong> <a href="" rel="noopener noreferrer">link</a>
    <br>
    <br>
    <strong>ABOUT</strong> hello! i go by emyu and lucille, any pronouns work fine :) i'm 15, genderfluid, and like girls ^^ i'm autistic + really shy, and i explain why i say this publicly later. my basic interests r coding, fashion, and <a href="/idol" rel="noopener noreferrer">idols</a>!
    <br>
    <br>
    <strong>BYF</strong> this section is VERY simplified, go to <a href="/mizuena" rel="noopener noreferrer">/mizuena</a> for more!
    <br>
    i have trouble talking to people, and usually don't reach out first. i appreciate when people reach out first <em>a TON</em>... so feel free to dm/ping/frq me! especially if its to chat about my <a href="/sigewinne" rel="noopener noreferrer">interests</a>
    <br>
    <br>
    <strong>DNI</strong> <a href="" rel="noopener noreferrer">basic dni</a>, overly toxic, nonsharing of my <a href="/hutao" rel="noopener noreferrer">f/os</a>
    <br>
    <br>
    any other dni i have is PETTY and OUTDATED. also do not talk about darkships to me. ok?
  </div>
  <div class="links">
    <a class="link" href="/mizuena" title="my ext (/mizuena)" rel="noopener noreferrer">1</a> <a class="link" href="/sigewinne" title="my interests (/sigewinne)" rel="noopener noreferrer">2</a> <a class="link" href="/whitelily" title="my directory (/whitelily)" rel="noopener noreferrer">3</a>
  </div>
</div>

CSS SECTION

/*
use the code if u want... all i ask is credit me if you copy and paste the entire thing

also i left comments! yay!
*/

/* importing fonts */

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

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

/* general stuff */

/* cursor */
* {
  cursor: var(--cursor), auto;
}

/* selection colors */
::selection {
  color: white;
  background-color: var(--scroll-text);
}

/* background image */
body {
  background: var(--background);
  transition: 0.7s ease;
}

/* making the paste info things closer together... idk how to explain it */
main {
  max-width: 700px;
  margin: auto;
}

/* hiding content box */
.text-container {
  background-color: transparent;
}

/* button borders */
button, .button {
  border: solid 2px var(--scroll-border);
  border-radius: 15px;
}

/* text styling */

/* bold text */
strong {
  color: white;
  text-shadow: -1.5px -1.5px 0 var(--bold), 1.5px -1.5px 0 var(--bold), -1.5px 1.5px 0 var(--bold), 1.5px 1.5px 0 var(--bold);
  transition: 0.7s ease;
}

/* scrollbox links */
.scroll a {
  color: var(--link);
  text-decoration: underline;
  transition: 0.7s ease;
}

/* new classes */

/* holds together the main stuff */
.container {
  background-color: transparent;
  max-width: 500px;
  height: 400px;
  margin: auto;
}

/* big mizuki png (hidden on mobile) */
.mizuki {
  width: 370px;
  height: 390px;
  background-image: var(--mizuki);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 130px;
  transition: 0.7s ease;
}

/* small mizuki png */
.png {
  width: 100px;
  height: 100px;
  background-image: var(--png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0px 1.5px var(--url-stroke)) drop-shadow(0 -1.5px var(--url-stroke)) drop-shadow(1.5px 0 var(--url-stroke)) drop-shadow(-1.5px 0 var(--url-stroke));
  margin-top: -330px;
  margin-left: 210px;
    position: relative;
  transition: 0.7s ease;
  z-index: 100;
}

/* scrollbox */
.scroll {
  color: var(--scroll-text);
  font-family: willow;
  background: var(--scroll-bg);
  border: solid 2px var(--scroll-border);
  border-radius: 15px;
  width: 290px;
  height: 75px;
  padding: 20px 5px 11px 5px;
  margin-top: -35px;
  margin-left: 10px;
  transition: 0.7s ease;
  overflow-x: auto;
  overflow-y: hidden;
}

/* makes the scrollbox larger when you hover + scrollable */
.scroll:hover {
  height: 220px;
  overflow-y: scroll;
}

/* the /mizuki text */
.urltext {
  background: var(--url);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0px 1.5px var(--url-stroke)) drop-shadow(0 -1.5px var(--url-stroke)) drop-shadow(1.5px 0 var(--url-stroke)) drop-shadow(-1.5px 0 var(--url-stroke));
  font-family: kinkee;
  font-size: 50px;
  margin-top: -60px;
  margin-left: 5px;
  position: relative;
  transition: 0.7s ease;
  z-index: 100;
}

/* easy positioning for the links */
.links {
  margin-top: -15px;
  margin-left: 5px;
}

/* link buttons on the bottom of the scrollbox */
.link {
  color: var(--button-border);
  background: var(--button-bg);
  border: solid 2px var(--button-border);
  border-radius: 100%;
  padding: 2px 8px 2px 8px;
  display: inline-block;
  transition: 0.7s ease;
  position: relative;
  z-index: 100;
}

/* change link buttons color on hover */
.link:hover {
  filter: saturate(50%);
}

/* scrollbar */

/* hiding scrollbar */
::-webkit-scrollbar {
  display: none;
}

/* fixing on mobile */

/* this thing changes how elements look when your screen width is below a set width */
@media screen and (max-width: 600px) {
  /* hide big mizuki png without breaking the paste */
  .mizuki {
    width: 0px;
  }
}

/* light & dark mode stuff */

/* light mode variables */
:root[data-theme="light"] {
  --cursor: url(https://i.postimg.cc/0QjGbqsd/mizu-aki-ribbon.png);
  --text-color: #FF78A9;
  --link-color: #FF0059;
  --container-background-color: white;
  --background: url(https://i.postimg.cc/7P0F0RNz/IMG-1534.gif);
  --mizuki: url(https://i.postimg.cc/L6T0V3J0/mizu_aki.png);
  --png: url(https://i.postimg.cc/d1pMp41w/mizu_aki_png.png);
  --scroll-bg: linear-gradient(white, #FFE3ED);
  --scroll-border: #FF78A9;
  --scroll-text: #FF78A9;
  --bold: #FF78A9;
  --link: #FF0059;
  --url: linear-gradient(white 30%, #FFBAD2);
  --url-stroke: #FF78A9;
  --button-bg: linear-gradient(#ffb3cd 0%, #ffe5ef 40%, #ff80ac 100%);
  --button-border: #ff5e99;
}

/* dark mode variables */
:root[data-theme="dark"] {
  --cursor: url(https://i.postimg.cc/LszMqrm7/mizu-yume-ribbon.png);
  --text-color: #443150;
  --link-color: #F495C4;
  --container-background-color: white;
  --background: url(https://i.postimg.cc/fRTMjxbW/IMG-1545.gif);
  --mizuki: url(https://i.postimg.cc/L88QQgf4/mizu_yume.png);
  --png: url(https://i.postimg.cc/RFN5gjvg/mizu_yume_png.png);
  --scroll-bg: linear-gradient(#E8FAFF, #EAC7EC);
  --scroll-border: #A48DB3;
  --scroll-text: #443150;
  --bold: #443150;
  --link: #F495C4;
  --url: linear-gradient(#F3FCFF 30%, #EAC7EC);
  --url-stroke: #A48DB3;
  --button-bg: linear-gradient(#B7E7F5 0%, white 40%, #C981CC 100%);
  --button-border: #87679c;
}

HTML SECTION

<div class="outer-box">
  <div class="main-box">
    <div class="header">
      emyu comms
    </div>
    <a href="#info" class="buttons" rel="noopener noreferrer">info</a>
    <a href="#rules" class="buttons" rel="noopener noreferrer">rules</a>
    <a href="#examples" class="buttons" rel="noopener noreferrer">examples</a>
    <div class="scrollbox">
      <div id="home" class="page">
        <div class="header" style="font-size: 30px; text-align: center;">status: OPEN!</div>
        welcome to my paste comms! click the buttons for more info :3
        <br>
        <br>
        contacts ^_^
        <br>
        twitter - <a href="https://www.x.com/playwithcats" rel="noopener noreferrer">playwithcats</a>
        <br>
        discord - <a href="https://discordid.netlify.app/?id=574718603614748682" rel="noopener noreferrer">idealidol</a>
        <br>
        tumblr - <a href="https://www.tumblr.com/polypinks" rel="noopener noreferrer">polypinks</a>
        <br>
        tetratto - <a href="https://tetratto.com/@idol" rel="noopener noreferrer">idol</a>
        <br>
        atabook - <a href="https://amia.atabook.org" rel="noopener noreferrer">amia</a>
      </div>
      <div id="info" class="page">
        <div class="header" style="font-size: 30px; text-align: center;">info</div>
        hello! my commissions include making graphics and code for pastebin sites, but i have a preference for coding.
        <br>
        <br>
        i also take free requests for smaller things, such as recolors or <strong>simple</strong> renders.
        <br>
        <br>
        i don't have a set price for anything yet because i lowkey don't know how money works. so name ur price :3
        <br>
        <br>
        i will do the following:
        <br>
        graphics, dividers, pngs into pixels (free), recoloring pixels (free), simple renders (free), coding pastes, and maybe more i just cant remember
        <br>
        <br>
        im sleepy and dont know what else i should put here. help.
        <br>
        <br>
        <a href="#home" class="buttons" style="display: block; margin: auto;" rel="noopener noreferrer">home</a>
      </div>
      <div id="rules" class="page">
        <div class="header" style="font-size: 30px; text-align: center;">rules</div>
        for paste comms, i can only currently work the following sites!
        <br>
        rentry.co
        <br>
        sntry.cc
        <br>
        fluffle.cc
        <br>
        pastry.diy
        <br>
        these are just ones i've used before. feel free to ask about other sites!
        <br>
        <br>
        for <strong>requests</strong>, i will only do medias i like OR characters that pique my interest (to prevent this stuff from feeling like a chore)
        <br>
        for <strong>commissions</strong>, i will be more willing to do more. i can still reject stuff i don't find interest in, but i'm more likely to accept.
        <br>
        <br>
        i'd write a whitelist and blacklist but that would be a major yaplist. maybe i'll write it on rentry and link it here
        <br>
        <br>
        <a href="#home" class="buttons" style="display: block; margin: auto;" rel="noopener noreferrer">home</a>
      </div>
      <div id="examples" class="page">
        <div class="header" style="font-size: 30px; text-align: center;">examples</div>
        while you can find examples on my <a href="https://www.tumblr.com/polypinks" rel="noopener noreferrer">tumblr</a> and <a href="https://www.pinterest.com/riancholic" rel="noopener noreferrer">pinterest</a>, this is a gallery with more
        <br>
        <br>
        <a href="https://filegarden.com/users/66db8c9fd3ae8b357c440cf9/garden/#aKUWuMu4gl9vV1I5" rel="noopener noreferrer">gallery here</a>
        <br>
        <br>
        <a href="#home" class="buttons" style="display: block; margin: auto;" rel="noopener noreferrer">home</a>
      </div>
    </div>
  </div>
</div>

CSS SECTION

/* hai guys do not copy the code yet... idc if you do when im finished but this is unfinished so it wont be perfect if u copy rn */

/* variable section */

:root {
  --lightest-green: #FBFFEA;
  --light-green: #E8EFCA;
  --green: #B0B98D;
  --dark-green: #525936;
  --button: linear-gradient(var(--light-green), var(--green));
  --scroll: linear-gradient(var(--lightest-green), var(--light-green));
}

/* font section */

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

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

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

/* general stuff */

body {
  background: #FFF9ED url(https://i.postimg.cc/j5n9XsV3/kitty.png);
  background-size: 200px;
}

.text-container {
  background-color: transparent;
}

.site-header {
  color: var(--dark-green);
}

.theme-button, .site-footer, .paste-info, .edit {
  display: none;
}

/* text stuff */

strong {
  color: white;
  text-shadow: -1.5px -1.5px 0 var(--dark-green), 1.5px -1.5px 0 var(--dark-green), -1.5px 1.5px 0 var(--dark-green), 1.5px 1.5px 0 var(--dark-green);
}

a {
  color: var(--green);
  text-decoration: underline;
}

/* classes section */

.outer-box {
  background-image: url(https://i.postimg.cc/3NMqfPY8/green.jpg);
  background-size: 400px;
  border: solid 2px var(--dark-green);
  border-radius: 50px;
  width: 600px;
  height: 450px;
  margin: auto;
  margin-left: 210px;
}

.main-box {
  background-color: white;
  border: solid 2px var(--dark-green);
  border-radius: 50px;
  width: 570px;
  height: 415px;
  padding: 10px;
  margin: auto;
  margin-top: 15px;
}

.header {
  color: var(--green);
  font-family: kittenpaws;
  font-size: 60px;
  filter: drop-shadow(0px 2px white) drop-shadow(0 -2px white) drop-shadow(2px 0 white) drop-shadow(-2px 0 white) drop-shadow(0px 2px var(--dark-green)) drop-shadow(0 -2px var(--dark-green)) drop-shadow(2px 0 var(--dark-green)) drop-shadow(-2px 0 var(--dark-green));
}

.buttons {
  color: var(--dark-green);
  font-family: kittyspoon;
  font-size: 30px;
  text-align: center;
  text-decoration: none;
  text-shadow: -1.5px -1.5px 0 white, 1.5px -1.5px 0 white, -1.5px 1.5px 0 white, 1.5px 1.5px 0 white;
  background: var(--button);
  border: solid 2px var(--dark-green);
  border-radius: 10px;
  box-shadow: 0px -1px 2px var(--lightest-green) inset;
  width: 100px;
  display: inline-block;
}

.scrollbox {
  color: var(--dark-green);
  font-family: willow;
  background: var(--scroll);
  border: solid 2px var(--dark-green);
  border-radius: 40px;
  width: 300px;
  height: 275px;
  padding: 10px;
  margin-top: 10px;
  display: block;
  overflow-x: auto;
  overflow-y: scroll;
}

.kirara {
  width: 448px;
  display: block;
  margin-top: -450px;
  margin-left: 510px;
  pointer-events: none;
  position: relative;
  z-index: 100;
}

.dish {
  width: 150px;
  display: block;
  margin-top: -110px;
  margin-left: 170px;
  position: relative;
  z-index: 100;
}

.dish:hover {
  opacity: 0.3;
  transition: 0.3s;
}

/* id page stuff */

html {
  scroll-padding-top: 100px;
}

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

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

HTML SECTION

<div class="aghh">
    <div style="font-size: 0px">.</div>
    <div class="boxes" id="infobox">
        <a href="">link</a> = in use
        <br>
        no other key, offer for anything (im picky tho)
        <br>
        <br>
        no specific wishlist but i like cute urls!!
        <br>
        <br>
        @idealidol on discord (pings/dms are ok), u can also use <a href="https://tetratto.com/@idol">tetratto</a> or <a href="https://amia.atabook.org">atabook</a>
    </div>
    <div class="boxes" id="urlbox">
        /airi /chiikawa /cute <a href="">/emyu</a> /furina /hamster /idol /mizi /mizuena /mizuki /parfait /pink /shadowmilk /sparkle /vanilla /yuri
    </div>
    <div class="titles" id="info">info</div>
    <div class="titles" id="urls">urls</div>
    <img class="pompom" src="https://file.garden/ZtuMn9OuizV8RAz5/images/everything/pompomhappy.gif">
</div>

CSS SECTION

/* take inspo/code if u want i do not mind ok...? */

/* fonts */

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

/* general stuff */

* {
    font-family: tribute;
    cursor: url(https://file.garden/ZtuMn9OuizV8RAz5/cursors/teal%20star.png), auto;
}

::selection {
    color: #f8faf9;
    background: #008484;
}

a:not(.button) {
    color: #008484;
    transition: 0.5s ease;
}

a:hover {
    font-style: italic;
    filter: blur(0.4px);
}

body {
    background-color: #f8faf9;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23b3cabf' fill-opacity='0.3' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.content_container {
    max-width: 450px;
}

.card {
    &:not(.card .card) {
        box-shadow: none;
    }
    background: transparent;
    padding: 0px;
}

.justify-between {
    color: #2a3b33;
    font-size: 16px
}

.button {
    &:hover {
        background: #deece4;
        color: #98b0a5 !important;
    }
    background: #b3cabf;
    color: #f8faf9 !important;
}

#theme-toggle svg {
    color: #2a3b33;
}

.dropdown .inner {
    background: #b3cabf;
    border-color: #f8faf9;
}

.dropdown .inner .item, .dropdown .inner .user-item {
    color: #2a3b33;
}

.dropdown .inner .user-item, .dropdown .inner .item:hover {
    background: #f8faf9;
}

.dropdown .inner .user-item:not(.title):hover {
    background: #b3cabf;
}

/* new classes */

.aghh {
    background: transparent;
    height: 295px;
    margin: auto;
}

.titles {
    color: #f8faf9;
    text-shadow:
        1px 0 #2a3b33,
        -1px 0 #2a3b33,
        0 1px #2a3b33,
        0 -1px #2a3b33;
    font-weight: 700;
    text-align: center;
    position: relative;
    z-index: 103;
}

#info {
    font-size: 23px;
    margin: -260px 320px 0 0;
}

#urls {
    font-size: 18px;
    margin: 80px 0 0 330px;
}

.boxes {
    color: #2a3b33;
    font-size: 11px;
    background: linear-gradient(#f8faf9, #f0f9f4);
    box-shadow: inset 0px -1px 7px #b3cabf;
    border: solid 0.5px #b2d0c1;
    border-radius: 10px;
    max-width: 200px;
    height: 140px;
    padding: 2px;
    margin: auto;
    position: relative;
    overflow-x: auto;
    overflow-y: scroll;
    z-index: 101;
}

#infobox {
    left: -90px;
    margin-top: 40px;
}

#infobox:hover {
    z-index: 102;
}

#urlbox {
    left: 90px;
    margin-top: -40px;
}

.pompom {
    width: 230px;
    margin: -160px auto auto auto;
    display: block;
    position: relative;
    left: 85px;
    z-index: 100;
}

/* scrollbar */

::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb:hover {
    background: #98b0a5;
}

/* mobile adjustments */

@media screen and (max-width: 500px) {
    #info {
        margin: -260px 270px 0 0;
    }

#urls {
        margin: 80px 0 0 290px;
    }
    
    #infobox {
        left: -70px;
    }

#urlbox {
        left: 70px;
    }
}

note that i couldn't find the html. i might try to remake it one day.

/* inspo and all that is okay but PLEASEEE PLEASE PLEASE PLEASE if you use a significant amount of the code credit me. Pls. making this killed me */

/* scrollbar */

@import url("https://file.garden/ZtuMn9OuizV8RAz5/css/idol%20extra.css");

/* general stuff */

* {
    cursor: url(https://file.garden/ZtuMn9OuizV8RAz5/cursors/hatsumiku), auto;
}

body {
    background: #e6f1f1 url(https://i.postimg.cc/L585L59M/dots.png);
    background-size: 100px;
}

::selection {
    background: #afc8c8;
    color: white;
}

.card {
    &:not(.card .card) {
        box-shadow: none;
    }
    background: transparent;
    padding: 0px;
}

.justify-between {
    display: none;
}

.site-header:not(.dropdown), .dropdown-activator svg, #theme-toggle svg {
    color: #698585;
}

/* new classes */

.bag {
    width: 600px;
    height: 495px;
    margin: auto;
    display: block;
}

/* afc8c8 (very important hex code trust me) */

.titletext {
    color: whitesmoke;
    filter:
        drop-shadow(1px 0 0 #a2b6b6)
        drop-shadow(-1px 0 0 #a2b6b6)
        drop-shadow(0 1px 0 #a2b6b6)
        drop-shadow(0 -1px 0 #a2b6b6)
        drop-shadow(0 0 2px white)
        drop-shadow(1px 1px 0 white);
    font-size: 65px;
    font-style: italic;
    font-weight: 900;
    display: block;
    margin-bottom: -25px;
    position: relative;
    z-index: 10;
}

.outerbag {
    border: solid 20px;
    border-image: url("https://i.postimg.cc/JhWprtb8/innerfrill-(1).png") fill 20% round;
    filter:
        drop-shadow(0 0 4px #afc8c8);
    width: 600px;
    height: 350px;
    margin: auto;
    display: block;
}

.bagfrills {
    background: url(https://i.postimg.cc/QN66RdwB/wgatever.png) left no-repeat, url(https://i.postimg.cc/wTM0QYW1/wgatever.png) right no-repeat;
    background-size: contain, contain;
    filter:
        drop-shadow(1.5px 0 0 #afc8c8)
        drop-shadow(-1.5px 0 0 #afc8c8);
    width: 600px;
    height: 321px;
    margin: -335px auto auto auto;
    display: block;
    position: absolute;
    pointer-events: none;
}

.innerbag {
    background: url(https://i.postimg.cc/prccfbhy/3k5jk5.png);
    background-size: 180px;
    filter:
        drop-shadow(0 0 2px #afc8c8);
    border: solid 15px;
    border-radius: 10px;
    border-image: url(https://file.garden/ZtuMn9OuizV8RAz5/borders/innerfrill.png) fill 20% round;
    border-image-outset: 2px;
    width: 275px;
    height: 274px;
    margin: 20px auto auto auto;
    overflow-x: hidden;
    overflow-y: scroll;
    text-align: center;
}

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

#fav {
    filter: drop-shadow(0 0 2px #62a3a3);
}

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

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

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

.keychain {
    width: 100px;
    margin: -30px auto auto auto;
    display: block;
    position: relative;
    left: 270px;
    transform: rotate(-10deg);
    z-index: 100;
}

/* I AM GOING NUTS */

@media screen and (max-width: 700px) {
    .bag {
        width: 370px;
        height: 310px;
    }
    
    .titletext {
        font-size: 35px;
        margin-left: 5px;
    }
    
    .outerbag {
        width: 350px;
        height: 250px;
    }
    
    .bagfrills {
        width: 370px;
        height: 220px;
        margin: -235px auto auto auto;
    }
    
    .innerbag {
        width: 205px;
        height: 175px;
    }
    
    .pin, .pin img, .pin::after {
        width: 50px;
        height: 50px;
    }
    
    .pin::after {
        margin-top: -50px;
    }
    
    .keychain {
        width: 50px;
        margin: -20px auto auto auto;
        left: 155px;
    }
}