bubble uwu ai codes [standard]

<--- If you have any questions about this tut feel free to send me a ccat at crrdcore / send me a dm on twitter! Also please note all positionings both mobile and desktop were made to look good on my personal devices so please keep this in mind when making the carrd in case any positions are off!! And pls do credit doiibahi / crrdcore if you follow this tut :D --->

<style>
@font-face {
font-family: windows;
src: url(https://dl.dropbox.com/s/cn0l1yjacta4whv/W95FA.otf);
}

@font-face {
font-family: PlanetEstyle;
src: url(https://dl.dropbox.com/s/ned5vjvabdmksbb/PLANE___.TTF);
}

@font-face {
src: url(https://dl.dropbox.com/s/sbgadsnx7p5uyjr/Vogue.ttf);
font-family: vogue;
}

@font-face {
font-family: dreams;
src: url(https://dl.dropbox.com/s/i9lg3nchwvgi6p3/dream.ttf);
}

#container01 {
position: absolute;
right: -4.7em;
bottom: 14.8em;
}

#icons01 {
border: 1px solid #7A8096;
border-radius: 1.5em;
padding: 1px;
height: 1.5em;
width: 1.5em;
background: rgb(163,186,255);
background: radial-gradient(circle, rgba(163,186,255,1) 0%, rgba(172,193,255,1) 100%);
-webkit-filter: drop-shadow(0px 0px 3px #424242);
}

#icons02 {
border: 1px solid #7A8096;
border-radius: 1.5em;
padding: 1px;
height: 1.5em;
width: 1.5em;
background: rgb(124,157,255);
background: radial-gradient(circle, rgba(124,157,255,1) 0%, rgba(124,157,255,1) 100%);
-webkit-filter: drop-shadow(0px 0px 3px #424242);
}

#icons03 {
border: 1px solid #7A8096;
border-radius: 1.5em;
padding: 1px;
height: 1.5em;
width: 1.5em;
background: rgb(88,131,255);
background: radial-gradient(circle, rgba(88,131,255,1) 0%, rgba(88,131,255,1) 100%);
-webkit-filter: drop-shadow(0px 0px 3px #424242);
}

#container03 {
width: 13.5%;
height: 11em;
position: absolute;
bottom: 0.7em;
left: 1.1em;
border: 1px solid #9FAAD6;
border-radius: 0px 25px 25px 0px;
-webkit-filter: drop-shadow(0px 0px 3px #424242);
overflow-y: auto;
}

#text01 {
font-family: PlanetEstyle;
}

#container04 {
width: 32%;
height: 7.2em;
position: absolute;
bottom: 0.5em;
right: 12.9em;
border: 1px solid #9FAAD6;
border-radius: 25px;
-webkit-filter: drop-shadow(0px 0px 3px #424242);
overflow-y: auto;
}

#text02 {
font-family: vogue;
}

#container05, #container07, #container09, #container11, #container13 {
width: 29%;
height: 3em;
position: absolute;
left: 19em;
bottom: 10.3em;
border: 1px solid #9FAAD6;
border-radius: 0px 25px 25px 0px;
-webkit-filter: drop-shadow(0px 0px 3px #424242);
overflow-y: auto;
}

#container06, #container08, #container10, #container12, #container14 {
width: 53%;
height: 9em;
position: absolute;
bottom: -5.3em;
right: -8em;
border: 1px solid #9FAAD6;
border-radius: 0px 25px 25px 0px;
-webkit-filter: drop-shadow(0px 0px 3px #424242);
overflow-y: auto;
}

@media only screen and (max-width: 600px) {
#container06, #container08, #container10, #container12, #container14 {
width: 48%;
position: absolute;
bottom: -6.3em;
right: -7.4em;
}
}

#text03, #text04, #text05, #text06, #text10 {
font-family: windows;
background: #FFFFFFB8;
padding: 5px;
border: 2px dashed #9FAAD6;
border-radius: 0px 15px 15px 0px;
}

mark {
border: 1px solid #9FAAD6;
border-radius: 15px;
padding-left: 5px;
padding-right: 5px;
padding-top: 1px;
padding-bottom: 1px;
background: rgb(255,255,255);
background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(173,190,255,1) 100%);
}
</style>

--- NAME, BYF, DNI, MUSIC, NOTE TEXT ---
<--- adjust when making the crd! --->
<style>
@font-face {
font-family: roman;
src: url(https://dl.dropbox.com/s/f9cfrx4wyt13rwv/ROMANTIC.TTF);
}

@font-face {
font-family: dreams;
src: url(https://dl.dropbox.com/s/i9lg3nchwvgi6p3/dream.ttf);
}

mark1 {
font-family: dreams;
font-size: 1.2em;
color: #475AA8;
background: transparent;
}

#vio {
font-family: roman;
font-size: 2.5em;
color: #475AA8;
-webkit-text-stroke: 1px black;
}
</style>
<div id="vio"> <mark1>4</mark1> Vio <mark1>4</mark1></div>

--- ULT SEMIS AND OTHERS TEXT ---
<--- adjust when making the crd! --->
<style>
@font-face {
font-family: windows;
src: url(https://dl.dropbox.com/s/cn0l1yjacta4whv/W95FA.otf);
}

@font-face {
font-family: dreams;
src: url(https://dl.dropbox.com/s/i9lg3nchwvgi6p3/dream.ttf);
}

mark2 {
font-family: windows;
border: 1px solid #9FAAD6;
border-radius: 15px;
padding-left: 5px;
padding-right: 5px;
padding-top: 1px;
padding-bottom: 1px;
background: rgb(255,255,255);
background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(173,190,255,1) 100%);
}

mark3 {
font-family: dreams;
font-size: 1.3em;
color: black;
background: transparent;
}

#music {
font-family: windows;
font-size: 1em;
color: black;
font-weight: bold;
text-align: left;
background: #FFFFFFB8;
padding: 5px;
border: 2px dashed #9FAAD6;
border-radius: 0px 15px 15px 0px;
}

@media only screen and (max-width: 600px) {
#music {
font-size: 0.875em;
}
}
</style>
<div id="music"> <mark2>ults</mark2> cix byounggon <mark3>1</mark3> txt yeonjun soobin <mark3>1</mark3> solo bahiyyih <mark3>1</mark3> bts yoongi</div>

--- FLOAT ANIMATION ---
<style>
#icons01 {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

@keyframes floating {
0% { transform: translate(0, 0px); }
50% { transform: translate(0, 12px); }
100% { transform: translate(0, -0px); }
}

</style>

--- JUMP ANIMATION ---
<style>
#icons02{
animation-name: jump;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

@keyframes jump {
0% { transform: translate(0, -2px); }
50% { transform: translate(0, 16px); }
100% { transform: translate(0, -2px); }
}

</style>

--- SOAR ANIMATION ---
<style>
#icons03{
animation-name: soar;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

@keyframes soar {
0% { transform: translate(0, 0px); }
50% { transform: translate(0, 12px); }
100% { transform: translate(0, -0px); }
}
</style>

--- GLIDE ANIMATION ---
<style>
#container03{
animation-name: glide;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

@keyframes glide {
0% { transform: translate(0, 0px); }
50% { transform: translate(0, 8px); }
100% { transform: translate(0, -0px); }
}
</style>