codes :)

--- info 1 ---
<style>
@font-face {
font-family: cutie;
src: url(https://dl.dropbox.com/s/xo075bh6tbd4f7d/CP.ttf);
}
@font-face {
font-family: sant joan;
src: url(https://dl.dropbox.com/s/iwvkrg8ccgd1pf4/SantJoanDespi-Regular.otf);
}

#info1 {
color: #FFFFFF;
font-size: 1.4em;
font-family: cutie;
background: #ffffff00;
}

mark {
font-family: sant joan;
color: #000000;
background: #ffffff;
padding-left: 3px;
padding-right: 3px;
border-radius: 13px;
font-size: .5em;
}

a {
color: #000;
text-decoration: none;
}

a:hover {
color: #CFEBFF;
}

</style>

<div id="info1"><strong>NAME</strong> <mark>@</mark>
</div>

--- info 2 ---
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">

<style>

#info2 {
font-family: 'Quicksand';
color: #000000;
background: #fff;
padding: 6px;
border-radius: .625em;
height: 53px;
overflow-y: scroll;
text-align: left;
font-size: .75em;
line-height: 1.125em;
}

mark3 {
font-family: sant joan;
border: 1px solid #E3D3C8;
border-radius: .625em;
background: #ffffff;
padding-left: 3px;
padding-right: 3px;
font-size: .75em;
}

</style>

<div id="info2">
info info <strong>+</strong>
<br></br>
<mark3>o_o</mark3> info info
<br></br>
cr <strong>jjuniiy</strong> for this layout~
</div>

--- links ---
<style>

@font-face {
font-family: sant joan;
src: url(https://dl.dropbox.com/s/iwvkrg8ccgd1pf4/SantJoanDespi-Regular.otf);
}

#links {
background: #ffffff00;
font-size: 1.5em;
}

mark {
color: #000000;
background: #fff;
padding-left: 6px;
padding-right: 6px;
border-radius: .625em;
height: 53px;
overflow-y: scroll;
font-family: sant joan;
}

a {
color: #000;
text-decoration: none;
}

a:hover {
color: #E8C8D5;
}

</style>

<div id="links">
<mark><a href="#one">RULES</a></mark> <mark><a href="#two">ME GUSTA</a></mark> <mark><a href="#home">o</a></mark>
</div>

--- white info texts ---

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">

<style>

@font-face {
font-family: sant joan;
src: url(https://dl.dropbox.com/s/iwvkrg8ccgd1pf4/SantJoanDespi-Regular.otf);
}

#scroll01 {
border-radius: 10px 0px 0px 10px;
width: 16.3em;
height: 17.2em;
position: absolute;
left: 1.75em;
bottom: 1.8em;
font-family: sant joan;
background: #FFFFFF;
font-family: 'Quicksand';
font-size: .75em;
padding: 4px;
}

mark2 {
font-family: sant joan;
border: 1px solid #E8C8D5;
border-radius: .625em;
background: #ffffff;
padding-left: 3px;
padding-right: 3px;
font-size: 1em;
}

</style>

<div id="scroll01">
<mark2>BYF</mark2> 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
<br></br>
<mark2>DFI</mark2> 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>

--- misc codes ---
<style>
#container01 {
height: 13.6em;
}
</style>