"you’re insecure" | backstory

<link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
<style>
@keyframes slideInLeft{
0%{transform: translate(-25%,0);opacity: 0}
100%{transform: translate(0,0);opacity: 1}
}
@keyframes fade{
0%{opacity: 1}
100%{opacity: 0}
}
.anne{
	background: #fff;
	font-family: 'Work Sans';
	border: 1px solid rgba(0,0,0,0.2);
  	width: 550px;
    margin: auto;
	padding: 20px;
	height: 770px;
}
.text{
	text-align: justify;
	border: 1px solid rgba(0,0,0,0.2);
	padding: 20px;
    overflow: auto;
  	height: 500px;
  width: 240px;
	font-size: 14px;
	margin: 10px
}
picture{
	background: url(https://data.whicdn.com/images/326304072/original.gif)center;
	background-size: cover;
	height: 540px;
	width: 245px;
    display: flex;
	flex-direction: column;
	margin: 10px;
	margin-left:0px;
	justify-content: center;
	float: left;
	border: 1px solid rgba(0,0,0,0.2);
	overflow: hidden
}
.header{
	background: #eee url(https://media1.tenor.com/images/7e4f54c0f22bf0b1f6fe347a3c4cf3bd/tenor.gif?itemid=9814240)center;
	background-size: cover;
	width: 500px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-transform: uppercase;
	padding: 20px;
	color: #fff;
	text-shadow: 1px 1px 3px #000;
	font-size: 25px;
}
.tablinks{
	border: none;
    outline: none;
	cursor: pointer;
	background: #6E4371;
	color: #fff;
	text-transform: uppercase;
	text-shadow: 1px 1px 3px #000;
	font-size: 20px;
	margin: 10px;
  	padding: 10px;
	height: 45px;
	animation: fade;
	animation-duration: 0.7s;
	animation-fill-mode: both;
	animation-delay: calc(var(--animation-order) * 200ms);
}
picture:hover .tablinks{
	display: block;
	animation: slideInLeft;
	animation-duration: 0.7s;
	animation-fill-mode: both;
	animation-delay: calc(var(--animation-order) * 200ms);

}
.succ{
	border: 1px solid rgba(0,0,0,0.2);
	margin: 10px;
	margin-left: 0px;
	width: 500px;
    height: 80px;
	font-size: 16px;
	text-align: center;
	overflow: hidden;
    padding: 20px;
	display: flex;
	align-items: center
}
</style>
<div class="anne">
<div class="header">cacti are gross</div>
<picture>
<button class="tablinks " onclick="openCity(event, '1')"id="defaultOpen" style="--animation-order: 1;"> section1</button>
<button class="tablinks" onclick="openCity(event, '2')"style="--animation-order: 2;">section2</button>
<button class="tablinks" onclick="openCity(event, '3')"style="--animation-order: 3;">section3</button>
<button class="tablinks" onclick="openCity(event, '4')"style="--animation-order: 4;">section4</button>
<button class="tablinks" onclick="openCity(event, '5')"style="--animation-order: 5;">section5</button>
</picture>
<div class="text">
<div class="tabcontent" id="1">
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="2">
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">
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">
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="5">
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 class="succ">
"how dull for you to live your life without any hills to die on, you. on your vast flat barren plains of compromise, acceptance, and accommodation, while I reign supreme over the lush, rolling highlands of stupid I have irrationally chosen to stake my entire identity on"
</div>
<div style="font-size: 13px;text-align: center;color: #000;">
OOC Name / Timezone / Contact Method / Age /<a href="https://finchscodes.tumblr.com" style="text-decoration: none;color: #000;" target="_blank"> Coded by Finch</a>
</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>