goddamn it just take the gifts and leave | profile text

<style>
@font-face {font-family: 'Bohemian'; src: url(https://cdn.statically.io/gh/finchscodes/fonts/main/Bohemian%20Soul.otf)}
::-webkit-scrollbar {width: 5px; background: #bbb;}
::-webkit-scrollbar {width: 5px; background: #eee}
::-webkit-scrollbar-thumb {background: #bbb;width: 10px}
button:hover, .active {
    box-shadow: 1px 1px 3px;
    transition: all 1s;
    filter: grayscale(0.8);
}
.container{
    margin: auto;
    width: 650px;
    padding: 20px;
    background: #565676;
    border: 1px solid rgba(0,0,0,0.2);
    font-family:'cambria';
    outline: 1px solid #fff;
    outline-offset: -10px;
}
.body{
    width: 500px;
    height: 400px;
    overflow: auto;
    margin-right: 20px
}
.text{
    text-align: justify;
    font-size: 13px;
    color: #636363;
    padding: 20px;
    background: #fff;
}
.tablinks{
    border: none;
    outline: 1px solid #fff;
    outline-offset: -10px;
    width: 80px;
    height: 80px;
    transition: 1s all;
    cursor: pointer
}
.tabs{
    width: 105px;
    height: 400px;
}
b, i{
    color: #A76571
}
.title{
    background: #A76571;
    padding: 10px;
    font-size: 20px;
    color: rgba(0,0,0,0);
    display: flex;
    align-items: center;
    text-transform: uppercase;
  letter-spacing: 2px;
  font-family:'Bohemian';
    -webkit-text-stroke: 0.7px white;

}
.header1{
background: linear-gradient(180deg,rgba(255,255,255,0) 50%, #FFD0AE 50%);
    text-align: left;
    text-transform: uppercase;
    border-left: 10px solid #A76571;
    padding-left: 10px;
    margin: 10px 0px;
    font-size: 16px;
    font-family:'Bohemian'
}
.header2{
    background: linear-gradient(180deg,rgba(255,255,255,0) 50%, #FFD0AE 50%);
    text-align: right;
    text-transform: uppercase;
    border-right: 10px solid #A76571;
    padding-right: 10px;
    margin: 10px 0px;
    font-size: 16px;
    font-family:'Bohemian'
}
.buttons{
    width: 200px;
    height: 150px;
    margin: 10px 0px;
    margin-right: -10px;
    float: left;

}
.stats{
    width: 430px;
    height: 125px;
    background: #fff;
    padding: 20px;
    color: #636363;
    margin: 10px 0px;
    text-align: left;
    column-count: 3;
    column-gap: 10px;
  column-rule-style: solid;
    font-size: 10px;
    overflow: auto;

}
.subheader{
    font-size: 12px;
    text-align: right;
    color: #FFD0AE;
-webkit-text-stroke: 1px rgba(0,0,0,0);
    letter-spacing: 5px;
    border-bottom: 1px solid #fff;
    padding-bottom: 5px;
    font-family:'cambria';
    font-weight: bold
}
.ooc{
    height: 400px;
    width: 150px;
    background: #fff
}
</style>
<div class="container">
<div class="title">
<div style="text-align:right">
it just take the gifts and leave
<div class="subheader">"i am very violent but i like you so"</div></div>
<img src="https://c.tenor.com/lZChuv1gHAcAAAAC/pingu-angry.gif" style="float: right;margin-left: 30px;outline: 1px solid #fff;outline-offset: -10px; object-fit: cover; height: 110px; width: 110px; box-shadow: 1px 1px 3px #000">
</div>
<div style="display:flex">
<div class="buttons">
<button class="tablinks" onclick="openCity(event, '1')" id="defaultOpen" style="background:url(https://pbs.twimg.com/profile_images/1305559249859346433/vKm851LH_400x400.jpg)center;background-size: cover;"></button>
<button class="tablinks" onclick="openCity(event, '2')" style="background: url(https://pbs.twimg.com/media/EcmNPn-U8AAdgAH.jpg)center;background-size: cover;"></button>
<button class="tablinks" onclick="openCity(event, '3')" style="background: url(https://data.whicdn.com/images/353107919/original.jpg?t=1613121320)center;background-size: cover;"></button>
<button class="tablinks" onclick="openCity(event, '4')" style="background: url(https://images-na.ssl-images-amazon.com/images/S/pv-target-images/10fcfd9e5be18418fb6e13057221e08830d086174e6c2076e20ee0e9da85bf00._RI_V_TTW_.png)center;background-size: cover;"></button>
</div>
<div class="stats"><table style="font-size:12px;">
<tr><td style="color: #A76571; font-weight:bold">stat.</td><td>stat</td></tr>
<tr><td style="color: #A76571; font-weight:bold">stat.</td><td>stat</td></tr>
<tr><td style="color: #A76571; font-weight:bold">stat.</td><td>stat</td></tr>
<tr><td style="color: #A76571; font-weight:bold">stat.</td><td>stat</td></tr>
<tr><td style="color: #A76571; font-weight:bold">stat.</td><td>stat</td></tr>
<tr><td style="color: #A76571; font-weight:bold">stat.</td><td>stat</td></tr>
<tr><td style="color: #A76571; font-weight:bold">stat.</td><td>stat</td></tr>
<tr><td style="color: #A76571; font-weight:bold">stat.</td><td>stat</td></tr>
<tr><td style="color: #A76571; font-weight:bold">stat.</td><td>stat</td></tr>
<tr><td style="color: #A76571; font-weight:bold">stat.</td><td>stat</td></tr>
<tr><td style="color: #A76571; font-weight:bold">stat.</td><td>stat</td></tr>
<tr><td style="color: #A76571; font-weight:bold">stat.</td><td>stat</td></tr>
<tr><td style="color: #A76571; font-weight:bold">stat.</td><td>stat</td></tr>
<tr><td style="color: #A76571; font-weight:bold">stat.</td><td>stat</td></tr>
<tr><td style="color: #A76571; font-weight:bold">stat.</td><td>stat</td></tr>
<tr><td style="color: #A76571; font-weight:bold">stat.</td><td>stat</td></tr>
<tr><td style="color: #A76571; font-weight:bold">stat.</td><td>stat</td></tr>
<tr><td style="color: #A76571; font-weight:bold">stat.</td><td>stat</td></tr>
</table></div>
</div>
<div style="display: flex">
<div class="body">
<div class="text">
<div class="tabcontent" id="1">
<div class="header1">feelings? what feelings</div>
<p>Lorem ipsum dolor sit amet, porro graecis eam at, putent denique ea eum, sit iusto adipiscing vituperata ea. Hinc fugit salutandi an vim.<b> Ut meis fierent disputationi eos, mutat novum graecis ne per, vitae fierent moderatius in sit. Feugait accommodare no , qui ei affert labore. Quo error verear quaestio ut. Debitis recteque te, no debet error feugiat. Usu dolorum veritus vituperata ei, ne simul saepe mei.</b>

<p><i>Purto rebum oportere mel ut, et paulo utroque laboramus pri.</i> An mei quas graecis, no prima aliquam percipitur usu. Ea omnis fierent ancillae sit. Duo aperiri delenit te, affert doming scriptorem usu ei.

<p>Eu sed sale complectitur, vix ad timeam ocurreret, sea ex persecuti quaerendum. Ei vix liber erant. Ius an ridens legimus electram, at eum tollit putant. Quo audiam apeirian in, ex duo solum feugait, melius sanctus similique at pri.

<p>Vel utroque erroribus evertitur et, dico voluptatibus conclusionemque eum id. Ut suas honestatis mei, eos praesent adipiscing inciderint te, ne oblique principes nam. Id qui animal epicurei. Mea eu menandri sensibus. Nec cibo scripta denique id, vel ex stet mollis consetetur, falli intellegat voluptatibus sit ut.
</div>
<div class="tabcontent" id="2">
<div class="header2">feelings? what feelings</div>
<p>Lorem ipsum dolor sit amet, at justo iuvaret qui, id augue erant sea. Ei eius propriae similique nam. Pri viderer debitis conclusionemque ne. Nam ad modo graeci, pri ei modus mollis. Regione quaestio ut has, habeo signiferumque sed ne.

<p>Cu eum invenire recteque consequat, vix quaeque fastidii et. Vel brute graeci et, nulla labore aeterno per cu. No pri malorum maiorum disputando, eum at quod harum tantas. Sed solum veniam putent et, vocibus quaestio complectitur vim ut. Movet ancillae nec an.

<p>Sit cu impetus noluisse delicatissimi, ne soluta splendide eum. Nam altera accusamus temporibus ad, mea et debet albucius, ad pri esse lucilius perfecto. Ne aliquid vocibus fabellas vel. Mea impedit epicurei cu, ius feugait deterruisset comprehensam ad. Pro erant affert assentior ex.

<p>Cu omnium integre molestiae vim, oratio liberavisse in qui. Has ad erat voluptatum, no ius antiopam tractatos. Meis dolor quaestio et per. Errem tibique accusamus has no, nulla senserit efficiantur id eam. Nam ignota integre at, his ut ancillae incorrupte definitionem. Ut eos civibus temporibus.

<p>Pri commune constituto cu. Ut nemore conceptam eum. Ne pro case ubique expetendis. Ad duo idque copiosae complectitur, pro bonorum blandit et, omnis maiorum expetenda mea ex. Qui et tamquam definiebas, exerci patrioque delicatissimi eos et.
</div>
<div class="tabcontent" id="3">
<div class="header1">feelings? what feelings</div>
<p>Lorem ipsum dolor sit amet, at justo iuvaret qui, id augue erant sea. Ei eius propriae similique nam. Pri viderer debitis conclusionemque ne. Nam ad modo graeci, pri ei modus mollis. Regione quaestio ut has, habeo signiferumque sed ne.

<p>Cu eum invenire recteque consequat, vix quaeque fastidii et. Vel brute graeci et, nulla labore aeterno per cu. No pri malorum maiorum disputando, eum at quod harum tantas. Sed solum veniam putent et, vocibus quaestio complectitur vim ut. Movet ancillae nec an.

<p>Sit cu impetus noluisse delicatissimi, ne soluta splendide eum. Nam altera accusamus temporibus ad, mea et debet albucius, ad pri esse lucilius perfecto. Ne aliquid vocibus fabellas vel. Mea impedit epicurei cu, ius feugait deterruisset comprehensam ad. Pro erant affert assentior ex.

<p>Cu omnium integre molestiae vim, oratio liberavisse in qui. Has ad erat voluptatum, no ius antiopam tractatos. Meis dolor quaestio et per. Errem tibique accusamus has no, nulla senserit efficiantur id eam. Nam ignota integre at, his ut ancillae incorrupte definitionem. Ut eos civibus temporibus.

<p>Pri commune constituto cu. Ut nemore conceptam eum. Ne pro case ubique expetendis. Ad duo idque copiosae complectitur, pro bonorum blandit et, omnis maiorum expetenda mea ex. Qui et tamquam definiebas, exerci patrioque delicatissimi eos et.
</div>
<div class="tabcontent" id="4">
<div class="header2">feelings? what feelings</div>
<p>Lorem ipsum dolor sit amet, at justo iuvaret qui, id augue erant sea. Ei eius propriae similique nam. Pri viderer debitis conclusionemque ne. Nam ad modo graeci, pri ei modus mollis. Regione quaestio ut has, habeo signiferumque sed ne.

<p>Cu eum invenire recteque consequat, vix quaeque fastidii et. Vel brute graeci et, nulla labore aeterno per cu. No pri malorum maiorum disputando, eum at quod harum tantas. Sed solum veniam putent et, vocibus quaestio complectitur vim ut. Movet ancillae nec an.

<p>Sit cu impetus noluisse delicatissimi, ne soluta splendide eum. Nam altera accusamus temporibus ad, mea et debet albucius, ad pri esse lucilius perfecto. Ne aliquid vocibus fabellas vel. Mea impedit epicurei cu, ius feugait deterruisset comprehensam ad. Pro erant affert assentior ex.

<p>Cu omnium integre molestiae vim, oratio liberavisse in qui. Has ad erat voluptatum, no ius antiopam tractatos. Meis dolor quaestio et per. Errem tibique accusamus has no, nulla senserit efficiantur id eam. Nam ignota integre at, his ut ancillae incorrupte definitionem. Ut eos civibus temporibus.

<p>Pri commune constituto cu. Ut nemore conceptam eum. Ne pro case ubique expetendis. Ad duo idque copiosae complectitur, pro bonorum blandit et, omnis maiorum expetenda mea ex. Qui et tamquam definiebas, exerci patrioque delicatissimi eos et.
</div>
</div></div>
<div class="ooc">
<img src="https://c.tenor.com/hFcNzDcOVlkAAAAd/angry-pingu.gif" style="height: 150px; height: 150px; object-fit:cover;outline: 1px solid #fff; outline-offset: -10px;">
<div class="text" style="text-align: center">
<b>OOC</b>
<br>Name:
<br>Age:
<br>Contact:
<p><b>Open to</b>
<br>Topics
<br>Relationships
<br>IMs
<p><a href="https://finchscodes.tumblr.com" style="text-decoration: none;color: #A76571;  font-size: 12px;" target="_blank">CODED BY FINCH</a>
</div></div>
</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();
  });
var header = document.getElementByClassName("body");
var btns = header.getElementsByClassName("tablinks");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");
  current[0].className = current[0].className.replace(" active", "");
  this.className += " active";
  });
}
</script>