diary drr ac standard

haii!! you will probably have to edit the positionings to fit your devices but otherwise if you have any questions you can dm me on crrdcore / send a retrospring at soobinzz! and if you remake pls credit webrkii :3

--- CODES ---
<style>
@font-face {
src: url(https://dl.dropbox.com/s/hfc6fjqu9kkxbt5/Sweet%20Creamy.ttf);
font-family: creamy;
}

@font-face {
font-family: magazine;
src: url(https://dl.dropbox.com/s/9a122x5sim0udkw/MagazineLetterByBrntlbrnl-Regular.ttf);
}

@font-face {
src: url(https://dl.dropbox.com/s/16ntpxj8fny66d6/Quick%20Love.ttf);
font-family: quick-love;
}

@font-face {
src: url(https://dl.dropbox.com/s/uougf9v63jmphoj/Jojoba.otf);
font-family: jojoba;
}

#container01 {
width: 15em;
height: 17.8em;
border-radius: 0px 10px 10px 0px;
position: relative;
left: 4em;
}

@media
only screen and (max-width: 600px) {
#container01{
left: 5em;
}
}

#text01 {
font-family: creamy;
}

mark {
font-family: magazine;
font-size: 1.3em;
}

#image01 {
transform: rotate(6.2rad);
}

#container02 {
width: 1em;
position: absolute;
left: 3.45em;
bottom: -0.4em;
z-index: 999;
}

@media
only screen and (max-width: 600px) {
#container02 {
left: 4.3em;
bottom: -0.5em;
}
}

#container03 {
width: 4em;
height: 2em;
border-radius: 30px 0px 0px 30px;
position: absolute;
left: 15em;
bottom: 7.5em;
z-index: 999;
}

@media
only screen and (max-width: 600px) {
#container03 {
left: 16em;
}
}

#image02 {
transform: rotate(5.5rad);
position: absolute;
left: 13em;
bottom: 2em;
z-index: 999;
}

@media
only screen and (max-width: 600px) {
#image02 {
left: 13.5em;
bottom: 1.5em;
}
}

#image03 {
transform: rotate(6rad);
position: absolute;
left: 5.5em;
bottom: 8.5em;
z-index: 999;
}

@media
only screen and (max-width: 600px) {
#image03 {
left: 6em;
}
}

#container04 {
width: 15em;
border-radius: 10px 0px 0px 10px;
position: relative;
left: -4em;
bottom: 0em;
}

@media
only screen and (max-width: 600px) {
#container04 {
width: 13em;
left: -.7em;
}
}

#container05 {
width: 15em;
position: absolute;
left: 11.2em;
bottom: 0.23em;
border-radius: 0px 10px 10px 0px;
}

@media
only screen and (max-width: 600px) {
#container05 {
left: 12.5em;
width: 13em;
}
}

#container06 {
width: 14.3em;
height: 17em;
position: absolute;
left: -3em;
bottom: 2em;
border-radius: 10px 0px 0px 10px;
z-index: 1;
}

@media
only screen and (max-width: 600px) {
#container06 {
width: 12.5em;
left: 0.1em;
bottom: 1em;
}
}

#container07 {
width: 14.3em;
height: 17em;
position: absolute;
left: 11.2em;
bottom: 2em;
border-radius: 0px 10px 10px 0px;
z-index: 1;
}

@media
only screen and (max-width: 600px) {
#container07 {
width: 12.5em;
left: 12.5em;
bottom: 1em;
}
}

#text02, #text05 {
font-family: quick-love;
}

#text03 {
font-family: jojoba;
}

#text04 {
font-family: jojoba;
width: 8em;
height: 6em;
background: #FCA4B8;
padding: 5px;
transform: rotate(-.1rad);
position: absolute;
left: 1.2em;
bottom: 8.1em;
}

@media
only screen and (max-width: 600px) {
#text04 {
width: 7em;
padding: 3px;
left: 0.6em;
}
}

#image04 {
position: absolute;
left: 8.5em;
bottom: 0.5em;
}

@media
only screen and (max-width: 600px) {
#image04 {
left: 7em;
bottom: 0.2em;
}
}

#text06 {
font-family: jojoba;
width: 8em;
height: 8em;
background: #FCA4B8;
padding-top: 13px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
transform: rotate(.05rad);
position: absolute;
left: 9.8em;
bottom: 2.5em;
z-index: 999;
}

@media
only screen and (max-width: 600px) {
#text06 {
font-size: 0.7em;
width: 7.5em;
left: 9.4em;
bottom: 3.5em;
}
}

#image06 {
position: absolute;
left: 7.8em;
bottom: 7.5em;
transform: rotate(.05rad);
z-index: 9999;
}

@media
only screen and (max-width: 600px) {
#image06 {
left: 6.9em;
bottom: 7.5em;
}
}

#text07 {
font-family: jojoba;
position: absolute;
left: 13em;
bottom: 0.5em;
}

@media
only screen and (max-width: 600px) {
#text07{
left: 5em;
}
}

#container08 {
width: 13em;
position: absolute;
left: 11.9em;
bottom: 12em;
z-index: 2;
}

@media
only screen and (max-width: 600px) {
#container08 {
width: 11.7em;
left: 12.9em;
bottom: 11.3em;
}
}

#image07 {
transform: rotate(-.1rad);
position: absolute;
left: 17em;
bottom: 15em;
z-index: 999;
}

@media
only screen and (max-width: 600px) {
#image07 {
left: 17.5em;
bottom: 14em;
}
}
</style>

--- SCROLL 1 ---
<style>
@font-face {
src: url(https://dl.dropbox.com/s/uougf9v63jmphoj/Jojoba.otf);
font-family: jojoba;
}

#likes {
font-family: jojoba;
font-size: 0.8em;
text-align: left;
width: 8em;
height: 8em;
transform: rotate(-.1rad);
position: relative;
left: 9em;
overflow-y: scroll;
}

@media
only screen and (max-width: 600px) {
#likes {
font-size: 0.7em;
height: 9em;
left: 8.5em;
}
}

</style>
<div id="likes"><strong>likes</strong> bx <333, kirby, sanrio, coding, soobin noises, yeonjuns aotm, photocard collecting, deco, my cats, music, reading, wired headphones, and plushies!</div>

--- SCROLL 2 ---
<style>
@font-face {
src: url(https://dl.dropbox.com/s/uougf9v63jmphoj/Jojoba.otf);
font-family: jojoba;
}

#dislikes {
font-family: jojoba;
font-size: 0.8em;
text-align: left;
width: 10em;
height: 5em;
transform: rotate(.1rad);
overflow-y: scroll;
}

@media
only screen and (max-width: 600px) {
#dislikes {
font-size: 0.7em;
height: 6em;
}
}

</style>
<div id="dislikes"><strong>dislikes</strong> fnc ent, old men, cishets, white people..., yeonjun ults /j, the dark, ppl who take kpop too seriously</div>

--- SCROLL 3 ---
<style>
@font-face {
src: url(https://dl.dropbox.com/s/uougf9v63jmphoj/Jojoba.otf);
font-family: jojoba;
}

#stan {
font-family: jojoba;
font-size: 0.8em;
text-align: left;
width: 9em;
height: 4.8em;
overflow-y: scroll;
}

@media
only screen and (max-width: 600px) {
#stan {
font-size: 0.7em;
}
}

</style>
<div id="stan"><strong>others</strong> xdh junhan gaon itzy chaer chuu stayc sieun yoon ive wonyo rei justb doyum billlie tsuki haruna p1h jiung dreamnote miso tempest hwarang class:y chaewon tbz sunwoo</div>

--- SCROLL 4 ---
<style>
@font-face {
src: url(https://dl.dropbox.com/s/uougf9v63jmphoj/Jojoba.otf);
font-family: jojoba;
}

#byf {
font-family: jojoba;
font-size: 0.8em;
text-align: left;
height: 4.5em;
overflow-y: scroll;
}

@media
only screen and (max-width: 600px) {
#byf{
font-size: 0.7em;
}
}
</style>
<div id="byf"><strong>byf</strong> info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info</div>

--- SCROLL 5 ---
<style>
@font-face {
src: url(https://dl.dropbox.com/s/uougf9v63jmphoj/Jojoba.otf);
font-family: jojoba;
}

#dfi {
font-family: jojoba;
font-size: 0.8em;
text-align: left;
height: 4.5em;
overflow-y: scroll;
}

@media
only screen and (max-width: 600px) {
#dfi {
font-size: 0.7em;
}
}
</style>
<div id="dfi"><strong>dfi</strong> info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info</div>

--- HIDDEN SCROLLBAR ---
<style>
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0; /* remove scrollbar space */
background: transparent; /* to make scrollbar invisible */
}
::-webkit-scrollbar-thumb {
background: transparent;
}
</style>