cr aicoholdrink

--- ALL FONTS ---

<style>
@font-face {
font-family: Nintendo-DS-BIOS;
src: url(https://dl.dropbox.com/s/vlxjtnvrl9s0snp/Nintendo-DS-BIOS.ttf);
}

@font-face {
src: url(https://dl.dropbox.com/s/pvxh5hqzpnhbzxe/Angelface%202.otf);
font-family: angelface;
}
</style>

--- TEXTS WITH IMAGE ---

<style>
#name {
color: #E6BCD4;
font-family: angelface;
font-size: 2.75em;
text-align: left;
}

.avatar {
object-fit: cover;
width: 60px;
height: 60px;
float: left;
margin-right: 10px;
border-radius: 2px;
}

.about {
margin: auto;
font-family: Nintendo-DS-BIOS;
color: #424242;
font-size: 1.125em;
text-align: left;
padding: 5px;
background: #F2D5E6A1;
backdrop-filter: blur(5px);
border-radius: 2px;
}

@media only screen and (max-width: 600px) {
.about {
font-size: 1.25em;
}
}

</style>
<div class="about">
<p><img src="linkurl" class="avatar"><div id="name">Name</div>hi age race pronouns info info info info info info info info info info info info © aicoholdrink

--- OTHER TEXTS ---

padding: 5px;
background: #ccdceca1;
backdrop-filter: blur(5px);
border-radius: 2px;

--- LINKS ---

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
<script>
$(function(){
$('#social-toggle').click(function(e){
e.preventDefault();
$('#social ul').animate({width: 'toggle'});
});
});
</script>
<style>
/*social media tab by chloe | @redivide | @themekid */
#social {
position:fixed;
font-size: 2em;
color: #F0CEE2;
}

@media only screen and (max-width: 600px) {
#social {
bottom: 140px;
}
}

#social ul {
list-style-type: none;
font-size: 0.7em;
padding: 0;
text-align: center;
display: inline-block;
display: none;
overflow: hidden;
white-space: nowrap;
position: absolute;
left: 40px;
top: 5px;
margin: 0;
}

#social ul li {
display: inline-block;
margin: 0 3px;
vertical-align: top;
line-height: 120%;
}

#social a {
color: #CCDCEC;
text-decoration: none;
}
</style>
</head>
<body>
<div id="social">
<i class="ph-phone-call-fill" title="social" style="cursor: pointer" id="social-toggle"></i><ul> <a href="#">
<i class="ph-twitter-logo-fill"></i></a> <a href="#">
<i class="ph-spotify-logo-fill"></i></a> <a href="#">
<i class="ph-chats-fill"></i></a> <a href="#">
<i class="ph-film-slate-fill"></i></a> </ul>
</div>

--- MEDIA RULE FOR 'PHONE' ---

@media only screen and (max-width: 600px) {
.cutephone {
bottom: -7em;
left: 0.5em;
}
}