Bubble

<style>
@import url(https://fonts.googleapis.com/css?family=Montserrat:100,300,400,700,900);
 
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Subrayada:wght@700&family=Peralta&display=swap');
 
::-webkit-scrollbar-thumb {
	width: 0px;
	background-color: transparent;
}
 
::-webkit-scrollbar {
	width: 0px;
	background-color: transparent;
}
 
body {
	background-color: #EAB34F;
background-image: url(https://wallpapercave.com/wp/wp4550391.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover ;
background-position: center center;
			
			background-attachment:tile;
filter:brightness(100%);		
	cursor: url(http://static.tumblr.com/obptcxj/QvHmo0l0g/cursor__6_.png), progress;
		overflow: hidden;
}
 
 

.bigimage {
	background-image: url(https://cdn.discordapp.com/attachments/792533730853781515/937717467822846054/fococlipping-20220131-152853.png);
	background-repeat: no-repeat;
		background-position: bottom left;
		top: 00px;
		right: 110px;
	background-size: 75%;
	width: 100%;
	height: 100%;
	position: absolute;

 z-index: 9;
}
 
.wrap {
	background-color: ;
	width: 300px;
	height: 500px;
	position: absolute;
	top: 25%;
	left: 45%;
	border-radius: 20px;
	z-index: 9;
		
		opacity: 1;
}
 
.title {
	color: #000;
	font: 500 italic 70px/90px 'Montserrat Subrayada';
	position: absolute;
	bottom: 150px;
	left: 155px;
	width: 580px;
	height: 90px;
	text-align: left;
	letter-spacing: 3px;
	transform: rotate(-90deg);
	transform-origin: bottom left;
	z-index: 2;
	-webkit-text-fill-color: transparent;
	background: -webkit-linear-gradient(#bab9a9, #000), url('') repeat;
	background: -o-linear-gradient(transparent, transparent);
	-webkit-background-clip: text;
	background-position: center center;
	background-size: cover;
}
 
 
h3 {
	-webkit-text-fill-color: transparent;
	background: -webkit-linear-gradient(#86877c, #000), url('') repeat;;
	background: -o-linear-gradient(#C085B1, transparent);
		font-family: 'peralta';
		font-size: 20px;
	-webkit-background-clip: text;
	background-position: center left;
	background-size: cover;
}
 
.subtitle {
	font: 400 normal 20px 'peralta';
	letter-spacing: 5px;
	text-transform: none;
	text-align: left;
	width: 480px;
	height: 40px;
	transform-origin: center left;
	transform: rotate(-90deg);
	position: absolute;
	bottom: 150px;
	left: 165px;
	color: #000
;
	z-index: 1;
}
 
.text {
	text-align: justify;
	color: #fff;
	width: 180px;
	height: 500px;
	font: 300 11px 'Montserrat';
	position: relative;
	padding-right: 15px;
	padding-top: 15px;
	top: -90px;
	left: 170px;
	text-align: justify;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 1000;
}
 
.textooc {
	text-align: justify;
	color: #fff;
	font: 300 11px 'montserrat';
	overflow-y: auto;
}
 
.text b {
	font-family: Montserrat;
	font-style: bold;
	font-weight: 700;
	font-size: 11px;
	color: #000
;
}
 
.text a {
	font-family: rock salt;
	font-style: bold;
	font-weight: 400;
	color: #fff;
	font-size: 15px;
}
 
#credits {
	position: fixed;
	top: 0px;
	right: 0px;
	width: 30px;
	height: 30px;
	text-align: center;
	background: url('https://i.imgur.com/BbhiJbI.png');
	background-position: center center;
	background-size: 100%;
}
 
#credits a {
	border-radius: 50%;
}
 
 
</style>
 
<div class="bigimage"></div>
<div class="wrap">
	<div class="title">Bubble </div>
	<div class="subtitle">Your Best friend </div>
	<div class="text">
		<center>
			<p>
				<h3>Stats</h3>
			</center> <b>Name:</b> stat<br>
			<b>Moniker:</b> stat
		<br> <b>Age:</b> stat
		<br> <b>Species:</b> stat
			<br> <b>Gender:</b> stat
		<br> <b>Height:</b> stat
		<br> <b> Weight:</b>stat
		<br> <b>Orientation:</b> stat
		<br> <b>Status: </b>stat
		<br> <b>Occupation:</b> stat
		<br>
	<b>Build:</b> stat
		<br> <b>Power: </b>stat<br>
			

		
		<p>
			<hr width="35%" color="#000">
			<center>
				<h3>About</h3></center> TBA
					<br>
							<hr width="35%" color="#000">
						<center>
							<h3>O O C</h3></center>
						<Div class="textooc"> /=/ DM friendly 
							<br> /=/ Story + Smut - Lt > St
							<br> /=/ Main and DM are both fine
							<br> /=/ Shitposter and snowballer
							<br> /=/ DRAMA FREE ZONE (Except IC) ]
							<br> /=/ Art does not belong to me
							<br> /=/ Base code by Diva, edited (and ruined) by Comrade </div>
						
	</div>
</div>

<div id="credits">
	<a target="_blank" href="https://roleplay.chat/profile.php?user=Diva" title="made by Diva"><img src="https://i.imgur.com/BbhiJbI.png" width="30px" height="30px"></a>
</div>