sometimes i take big | profile text

<link href="https://fonts.googleapis.com/css2?family=Mulish&display=swap" rel="stylesheet">
<style>
::-webkit-scrollbar {display: none;}
@keyframes slideInLeft{
0%{transform: translate(-25%,0);opacity: 0}
100%{transform: translate(0,0);opacity: 1}
}
.body{
	border: 1px solid rgba(0,0,0,0.2);
    margin: auto;
    width: 610px;
    overflow: hidden;
    border-radius: 10px
}
.finch{
	padding: 20px;
	background: #36353D;
    width: 550px;
    margin: auto;
    font-family: 'Mulish';
    color: #fff;
    font-size: 14px;
    border-right: 20px solid #bbb
}
.title{
	text-align: center;
	font-size: 30px;
    color: #fff;
    background: #36353d;
    font-weight: bold;
	text-decoration: underline solid #76A7AA;
	text-decoration-thickness: 5px;
    width: 570px;
    margin: auto;
    font-family: 'georgia';
	padding: 20px;
    border-bottom: 10px solid #bbb;
    font-style: italic
}
h2{
	margin:0px 0px 5px 0px;
    padding-bottom: 5px;
	text-decoration: underline solid #bbb;
	text-decoration-thickness: 5px;
    color: #76A7AA;
    font-style: italic;
    font-family: 'georgia'
}
.picture{
	width: 610px;
    height: 300px;
    margin: auto;
    background: url(https://media.tenor.com/images/fb1920c848602b43285c01944b211bff/tenor.gif)center;
	background-size: cover
}
.tablinks{
	background: #bbb;
    color: #fff;
    padding: 20px;
    transition: all 1s;
    border:none;
    text-transform: uppercase;
    font-family: 'georgia';
    font-size: 16.5px;
    font-weight: bold;
    cursor: pointer
}
.tablinks:hover, .active{
	background: #76A7AA;
}
.tabcontent{
	animation: slideInLeft;
	animation-duration: 0.7s;
	animation-fill-mode: both;
    text-align: justify;
    overflow: auto;
    height: 400px;
}
.credits{
	border-top: 10px solid #bbb;
    width: 610px;
    font-family:'Mulish';
    font-size: 16px;
    padding: 10px 0px;
    text-align: center;
    background: #76A7AA;
    color: #fff;
}
b, i, fieldset{
	color: #76A7AA
}
.stats{
	background:#76A7AA;
	text-transform:uppercase;
    text-align: center;
    color: #fff;
    padding: 2px;
    font-family: 'Mulish'
}
h3{
	margin:0px;
    text-transform: uppercase;
    color: #36353d
}
</style>
<div class="body">
<div class="title">sometimes i take big shits</div>
<div class="picture"></div>
<div style="display: flex;align-items: center; justify-content: center;width: 610px; background: #bbb; margin: auto; border-top: 3px solid #fff; border-bottom: 3px solid #fff">
<button class="tablinks" onclick="openCity(event, '1')" id="defaultOpen">About</button>
<button class="tablinks" onclick="openCity(event, '2')">aesthetic</button>
<button class="tablinks" onclick="openCity(event, '3')">relations</button>
<button class="tablinks" onclick="openCity(event, '4')">Stats</button>
<button class="tablinks" onclick="openCity(event, '5')">playlist</button>
</div>
<div class="finch">
<div class="tabcontent" id="1">
<h2>yes i am finch</h2>
<img src="https://64.media.tumblr.com/c2d4d2dc606344639dbe47f0d2388893/e894b136094da61d-84/s400x600/0ba4bc9b086624a10f98e3fc0a7382dac42fc4c0.gifv" style="height: 200px; width: 200px; object-fit: cover; float: right; margin-left: 10px; border: 3px solid #fff">
uhh something about me is that i constantly play video games, so there's that, i'm an epic gamer hardcore scrub xd get shit on dude and uhhhh i code but i'm pretty sure you know that if you don't i don't know how you got this far

<p>Ea ferri justo libris usu. Appareat philosophia qui ex, id nibh eripuit scriptorem pro. Partem omittantur dissentiet ut vis, at facete ponderum his, an fugit ullum solet sea. Ex pro numquam intellegat, modo adipisci vulputate eum cu. Natum aliquip appetere usu at, in quo nobis numquam dissentiunt, duo zril commodo pertinax ad. Nec cu regione antiopam consetetur, congue corrumpit tincidunt ius et. Ne quod dissentias mei, in qui graeco graecis.

<p>Tamquam eruditi luptatum id pri, duo an brute sanctus indoctum. Mei delenit labores te, sea id mazim tantas mnesarchum, per facilis fuisset ad. Id singulis gubergren pri, sanctus noluisse sententiae ex his, nobis suavitate eos et. Elitr aliquid qui id, lucilius indoctum neglegentur vis ne. Singulis conclusionemque per id, in prodesset percipitur duo.

<p>Ne denique tincidunt sed, altera conclusionemque eu vis. Quo id phaedrum efficiantur, nullam numquam albucius ius eu, no mandamus urbanitas nam. Mel veniam habemus hendrerit ea, nulla tincidunt dissentiunt no nec. Vix singulis tractatos in, eripuit sapientem imperdiet at sea, sit cu adhuc inani. Mel ubique mucius ex, cu sea summo persius ancillae.

<p>Ea purto albucius nec. Habeo suscipit constituam ad pro, in quo congue appareat splendide. In maiorum fabellas ius, natum nominati tincidunt nec ei, iudico convenire ut quo. Habeo aliquid id sit. Maiorum eligendi mea ex, ut eum epicurei qualisque, illud latine appetere usu id. Ne eam explicari consulatu omittantur.
</div>
<div class="tabcontent" id="2" style="overflow: hidden">
<h2>aesthetic</h2>
<div style="height:360px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr 1fr;grid-template-areas:'one four' 'two five' 'three six';grid-gap:5px;margin:0 0 20px 0;">
				<div style="grid-area:one;background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTH6qggjRHOeLFUBgZTuHBoivawUley0Atyj6PMWQEVmHys7FQHIzzUNohbqaSi6ujDvo0&usqp=CAU)center;background-size:cover;padding: 10px; border:3px solid #fff"></div>
				<div style="grid-area:two;background: url(https://i.pinimg.com/564x/18/3d/8e/183d8e283924029c842dbf2634702976.jpg)center;background-size:cover;padding: 10px; border:3px solid #fff"></div>
				<div style="grid-area:three;background: url(https://i.pinimg.com/564x/de/e7/ab/dee7abd06977290cee2a5c3d2b8f3c50.jpg)center;background-size:cover;padding: 10px; border:3px solid #fff"></div>
				<div style="grid-area:four;background: url(https://i.kym-cdn.com/entries/icons/original/000/028/431/kirby.jpg)center;background-size:cover;padding: 10px; border:3px solid #fff"></div>
				<div style="grid-area:five;background: url(https://i.imgur.com/krRTR7d.jpg)center;background-size:cover;padding: 10px; border:3px solid #fff"></div>
				<div style="grid-area:six;background: url(https://i.imgur.com/aSVjtu7.png?fb)center;background-size:cover;padding: 10px; border:3px solid #fff"></div>
</div>
</div>
<div class="tabcontent" id="3">
<h2>relationships</h2>
<div style="border:1px solid rgba(0,0,0,0.3);padding: 10px; margin-bottom: 10px;background: #fff; color: #36353D"><img src="PICTURE" style="height:70px; width: 70px; object-fit: cover; float:left; margin-right: 10px"><b>NAME | RELATIONSHIP -- </b>Lorem ipsum dolor sit amet, cu ius veniam aperiam. Mel labores epicuri theophrastus ei, atqui accommodare intellegebat vix ut. Quod malorum nostrum ea . Nec mazim paulo eu.
</div>
<div style="border:1px solid rgba(0,0,0,0.3);padding: 10px; margin-bottom: 10px;background: #fff; color: #36353D"><img src="PICTURE" style="height:70px; width: 70px; object-fit: cover; float:left; margin-right: 10px"><b>NAME | RELATIONSHIP -- </b>Lorem ipsum dolor sit amet, cu ius veniam aperiam. Mel labores epicuri theophrastus ei, atqui accommodare intellegebat vix ut. Quod malorum nostrum ea . Nec mazim paulo eu.
</div>
<div style="border:1px solid rgba(0,0,0,0.3);padding: 10px; margin-bottom: 10px;background: #fff; color: #36353D"><img src="PICTURE" style="height:70px; width: 70px; object-fit: cover; float:left; margin-right: 10px"><b>NAME | RELATIONSHIP -- </b>Lorem ipsum dolor sit amet, cu ius veniam aperiam. Mel labores epicuri theophrastus ei, atqui accommodare intellegebat vix ut. Quod malorum nostrum ea . Nec mazim paulo eu.
</div>
<div style="border:1px solid rgba(0,0,0,0.3);padding: 10px; margin-bottom: 10px;background: #fff; color: #36353D"><img src="PICTURE" style="height:70px; width: 70px; object-fit: cover; float:left; margin-right: 10px"><b>NAME | RELATIONSHIP -- </b>Lorem ipsum dolor sit amet, cu ius veniam aperiam. Mel labores epicuri theophrastus ei, atqui accommodare intellegebat vix ut. Quod malorum nostrum ea . Nec mazim paulo eu.
</div>
<div style="border:1px solid rgba(0,0,0,0.3);padding: 10px; margin-bottom: 10px;background: #fff; color: #36353D"><img src="PICTURE" style="height:70px; width: 70px; object-fit: cover; float:left; margin-right: 10px"><b>NAME | RELATIONSHIP -- </b>Lorem ipsum dolor sit amet, cu ius veniam aperiam. Mel labores epicuri theophrastus ei, atqui accommodare intellegebat vix ut. Quod malorum nostrum ea . Nec mazim paulo eu.
</div>
</div>
<div class="tabcontent" id="4">
<h2>stats</h2>
<div style="background:#bbb;margin:7px 0;">
<div class="stats" style=";width:78%;">78% TRAIT</div></div>
<div style="background:#bbb;margin:7px 0;">
<div class="stats" style=";width:42%;">42% TRAIT</div></div>
<div style="background:#bbb;margin:7px 0;">
<div class="stats" style=";width:57%;">57% TRAIT</div></div>
<div style="background:#bbb;margin:7px 0;">
<div class="stats" style=";width:90%;">90% TRAIT</div></div>
<div style="background:#bbb;margin:7px 0;">
<div class="stats" style=";width:69%;">69% TRAIT</div></div>
<div style="background: #fff; margin-top: 20px">
<div style="background: #76A7AA; height: 144px; width: 140px; float: left; margin-right:20px"><svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="150" height="150"
viewBox="0 0 185 185"
style=" fill:#000000; margin: auto"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,171.98863v-171.98863h171.98863v171.98863z" fill="none"></path><g id="original-icon" fill="#36353d"><path d="M28.48608,21.375c-7.8375,0 -14.1665,6.4125 -14.1665,14.25l-0.06958,85.48608c0,7.87313 6.37688,14.26392 14.25,14.26392h14.23608h0.01392v28.5l28.48608,-28.5h71.25c7.8375,0 14.25,-6.4125 14.25,-14.25v-85.5c0,-7.8375 -6.4125,-14.25 -14.25,-14.25zM49.875,57h28.5v21.375v7.125l-14.25,21.375h-14.25l14.25,-21.375h-14.25zM92.625,57h28.5v21.375v7.125l-14.25,21.375h-14.25l14.25,-21.375h-14.25z"></path></g></g></svg></div>
<div style="padding:20px; color: #36353D">
"Lorem ipsum dolor sit amet, dico principes vis et. Est ea sapientem conceptam dissentiunt, an sed option nonumes dolores. Solum feugiat nonumes ne , saperet erroribus efficiendi in mel. Usu adhuc fugit maiorum ex, sit ei putent facilisis. Duo et altera putant appetere, cu magna sonet temporibus duo."
</div>
</div>
<img src="https://i.ytimg.com/vi/zrrs9LGIfyQ/maxresdefault.jpg" style="object-fit: cover; border:1px solid rgba(0,0,0,0.2); width: 100%; height: 45px; margin-top: 20px">
</div>
<div class="tabcontent" id="5">
<h2>playlist</h2>
<div style="background: #fff; padding: 10px; margin-bottom: 10px">
<h3>♫<a href="LINK" style="text-decoration: none;color: #36353d;" target="_blank"> SONG</a></h3>
<i>"Lorem ipsum dolor sit amet, vim an illud principes, qui et feugiat utroque assentior. Utinam impetus adolescens te est, eos dolor veniam ea, vel illud movet facilisi ad."</i></div>
<div style="background: #fff; padding: 10px; margin-bottom: 10px">
<h3>♫<a href="LINK" style="text-decoration: none;color: #36353d;" target="_blank"> SONG</a></h3>
<i>"Lorem ipsum dolor sit amet, vim an illud principes, qui et feugiat utroque assentior. Utinam impetus adolescens te est, eos dolor veniam ea, vel illud movet facilisi ad."</i></div>
<div style="background: #fff; padding: 10px; margin-bottom: 10px">
<h3>♫<a href="LINK" style="text-decoration: none;color: #36353d;" target="_blank"> SONG</a></h3>
<i>"Lorem ipsum dolor sit amet, vim an illud principes, qui et feugiat utroque assentior. Utinam impetus adolescens te est, eos dolor veniam ea, vel illud movet facilisi ad."</i></div>
<div style="background: #fff; padding: 10px; margin-bottom: 10px">
<h3>♫<a href="LINK" style="text-decoration: none;color: #36353d;" target="_blank"> SONG</a></h3>
<i>"Lorem ipsum dolor sit amet, vim an illud principes, qui et feugiat utroque assentior. Utinam impetus adolescens te est, eos dolor veniam ea, vel illud movet facilisi ad."</i></div>
<div style="background: #fff; padding: 10px; margin-bottom: 10px">
<h3>♫<a href="LINK" style="text-decoration: none;color: #36353d;" target="_blank"> SONG</a></h3>
<i>"Lorem ipsum dolor sit amet, vim an illud principes, qui et feugiat utroque assentior. Utinam impetus adolescens te est, eos dolor veniam ea, vel illud movet facilisi ad."</i></div>
</div>
</div>
<div class="credits">OOC Name / Timezone / Contact Method / Age /<a href="https://finchscodes.tumblr.com" style="text-decoration: none;color: #fff;" target="_blank"> Coded by Finch</a>
</div>
</div>
<script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

   window.onload = function(e){
      document.getElementById("defaultOpen").click();
   }

  $(document).ready(function() {  //If you are using jquery then use this other wise you can use normal window.onload
     document.getElementById("defaultOpen").click();
  });

</script>