as-if crd codes pro plus

<--- 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 --->

--- FONTS: ---
<style>

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

@font-face {
font-family: roman;
src: url(https://dl.dropbox.com/s/f9cfrx4wyt13rwv/ROMANTIC.TTF);
}

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

@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);
}
</style>

--- CONTAINER 01: ---
position: absolute;
right: -6em;
bottom: -1.8em;
-> MOBILE:
right: -6.3em;

--- ICON 01, ICON 02, ICON 03: ---
border: 1px solid #FF7AA3;
border-radius: 1.5em;
padding: 8px;
background: rgb(255,162,189);
background: radial-gradient(circle, rgba(255,162,189,1) 27%, rgba(255,162,189,1) 100%);
-webkit-filter: drop-shadow(0px 0px 3px #424242);

--- CONTAINER 02: ---
width: 76%;
height: 11em;
position: absolute;
right: 6.3em;
bottom: 4.6em;
border-radius: 25px 0px 0px 25px;
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 56%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
-webkit-filter: drop-shadow(0px 0px 3px #424242);

--- HOME, BYF, DNI, MUSIC, NOTE LABEL CONTAINER: ---
width: 31%;
height: 3em;
position: absolute;
left: 18em;
bottom: 10em;
border-radius: 0px 25px 25px 0px;
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 56%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
-webkit-filter: drop-shadow(0px 0px 3px #424242);
-> MOBILE:
width: 34%;
left: 17em;

--- NAVIATION CONTAINER: ---
width: 15%;
height: 11em;
position: absolute;
bottom: 0.5em;
left: .6em;
border-radius: 0px 25px 25px 0px;
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 56%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
-webkit-filter: drop-shadow(0px 0px 3px #424242);

--- WELCOME CONTAINER: ---
width: 32%;
height: 7em;
position: absolute;
bottom: 0.5em;
right: 12em;
border-radius: 25px;
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 56%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
-webkit-filter: drop-shadow(0px 0px 3px #424242);
-> MOBILE:
right: 12.55em;

--- ABOUT, BYF, DNI, MUSIC, NOTE INFO CONTAINER: ---
width: 55%;
height: 9em;
position: absolute;
bottom: -5.5em;
right: -8.5em;
padding-bottom: 10px;
border-radius: 25px 0px 0px 25px;
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 56%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
-webkit-filter: drop-shadow(0px 0px 3px #424242);
overflow-y: scroll;
z-index: 1;
-> MOBILE:
width: 52%;
bottom: -6.4em;
right: -8em;

--- NAME, BYF, DNI, MUSIC, NOTE LABEL TEXT: ---
font-family: roman;
-webkit-text-stroke: 1px black;
-> HIGHLIGHT:
font-family: dreams;
font-size: 1.3em;

--- ABOUT, BYF, DNI, MUSIC, NOTE INFO TEXT: ---
font-family: windows;
background: #FFFFFFB8;
padding: 5px;
border: 2px dashed #FF99B8;
border-radius: 0px 15px 15px 0px;
-> BOLD:
font-family: dreams;
font-size: 1.2em;
-> HIGHLIGHT:
border: 1px solid #A37287;
border-radius: 15px;
padding-left: 5px;
padding-right: 5px;
padding-top: 1px;
padding-bottom: 1px;
background: rgb(255,163,202);
background: radial-gradient(circle, rgba(255,163,202,1) 0%, rgba(255,255,255,1) 100%);

-- FLOAT ANIMATION: ---
<style>
#float {
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>
#jump {
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>
#soar {
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>
#glide {
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>

--- SCROLLBAR ---
<style>

::-webkit-scrollbar {
width: 13px;
height: 10px;
}

::-webkit-scrollbar-thumb {
background: linear-gradient(90deg, rgba(238,238,238,1) 38%, rgba(206,206,206,1) 62%);
border: 1.5px solid #888888;
border-radius: 5px;
}

::-webkit-scrollbar-track {
background: linear-gradient(90deg, rgba(230,230,230,1) 6%, rgba(240,240,240,1) 18%);
}

::-webkit-scrollbar-button {
display: block;
width: 14px;
height: 16px;
}

::-webkit-scrollbar-button:vertical:start:decrement {
background: white;
box-shadow: inset 0 7px 5px -7px white, inset 7px 0 5px -7px gray, inset -7px 0 5px -7px gray, inset 0 -7px 5px -7px gray;
border: 1.5px solid #888888;
border-radius: 5px;
}

::-webkit-scrollbar-button:vertical:start:increment {
display: none;
}

::-webkit-scrollbar-button:vertical:end:decrement {
display: none;
}

::-webkit-scrollbar-button:vertical:end:increment {
background: white;
box-shadow: inset 0 7px 5px -7px white, inset 7px 0 5px -7px gray, inset -7px 0 5px -7px gray, inset 0 -7px 5px -7px gray;
border: 1.5px solid #888888;
border-radius: 5px;
}

</style>

--- CREDIT ---
-> here are the changes i made just paste them where the original parts are!
#bubble {
color:#FFA3CA;
font-family: Chemre;
font-size:12px;
font-weight:light;
position: absolute;
bottom: 22em;
right: 10em;
}

@media only screen and (max-width: 600px) {
#bubble {
bottom: 18.5em;
right: 8em;
}

--- END ---