@import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');
	@import url('https://fonts.googleapis.com/css2?family=Bahianita&family=Changa&family=Cookie&family=Ubuntu+Condensed&display=swap');



	body { background: linear-gradient(to right, #dad299, #b0dab9); cursor: url('https://64.media.tumblr.com/tumblr_lqs4owrr9t1qfoi4t.png'), default;}

	.image {  z-index: 1; position: fixed; bottom: 0vh; left: 0vw; height: 68vh; width: 30vw; background: url('https://i.ibb.co/S7MKmKW/1LwZPxV.png') no-repeat; background-size: cover; filter: drop-shadow(-.8vh .8vh 1px #0003);}

	.container { position: absolute; bottom: 0vh; left: 20vw; height: 40vh; width: 40vw; background: #dad299; border-radius: 10px; border: solid 10px #b0dab9; filter: drop-shadow(.8vh .8vh 0vh #0003);}

	.title { z-index: 1; position: absolute; bottom: 37.5vh; left: 23vw; font-family: 'Staatliches', cursive; color: #fff; font-size: 8vw; letter-spacing: 1vw; -webkit-text-stroke: 2px #b0dab9; filter: drop-shadow(.8vh 0vh 0vh #0003);}

	.image2 { position: absolute; top: 1vh; left: 10vw; height: 38vh; width: 8vw; background: url('https://i.ibb.co/Jzvj4Xk/furrycom2.png') no-repeat; background-size: cover; background-position: ; opacity: .5; border-radius: 3px; transition:all .8s ease-in-out; border: solid 3px #b0dab9;}
	.image2:hover { opacity: 1;}

	.tabbox { position: absolute; top: 10vh; right: 0vw;}

.one { position: absolute; bottom: 2vh; right: 0vw; font-family: 'Bahianita'; font-size: 3vw; color: #fff; text-decoration: none; }

.two { position: absolute; bottom: 2vh; right: 3vw; font-family: 'Bahianita'; font-size: 3vw; color: #fff; text-decoration: none; }

.three { position: absolute; bottom: 2vh; right: 6vw; font-family: 'Bahianita'; font-size: 3vw; color: #fff; text-decoration: none; }

.four { position: absolute; bottom: 2vh; right: 9vw; font-family: 'Bahianita'; font-size: 3vw; color: #fff; text-decoration: none; ;}

.info { z-index: 1; position: absolute; overflow: auto; bottom: .5vh; right: .2vw; height: 28vh; width: 20vw; padding: 1vh; background: #dad299; font-family: 'Ubuntu Condensed', sans-serif;  font-size: 1.7vh; color: #fff; opacity: 0;  text-transform: uppercase; text-align: left;}

.info:target { z-index: 100; opacity: 1; transition: all .7s ease-in-out; }

U { text-decoration: none; text-transform: uppercase; font-family: changa; color:#eee; padding-right:.2vw; padding-top:0vh; padding-bottom:0vh; padding-left: .2vw; font-size:1vh; letter-spacing:.1vh;   transition: all .7s ease-in-out;}

a, a:link, a:visited {  color: #95bd9e; letter-spacing: 0.1vh; text-decoration: none; text-transform: uppercase; transition: all .7s ease-in-out;}

a:hover{ color: #fff; text-shadow: 0px 0px 5px #fff; cursor: url('https://64.media.tumblr.com/tumblr_lqs4qdUu8n1qfoi4t.png'), default; }

::selection { background:transparent;  color: transparent;  text-shadow: 0 0 5px #fff;}

::-webkit-scrollbar { width: 5px; height:0px; } ::-webkit-scrollbar-thumb:vertical { background-color: #fff; border: none; }

		r { line-height: 1vh; }

	ul, li {
 list-style: none;
 margin-left: -15px;   margin-bottom: 5px;
 text-align: justify;
 }

li:before {
 content:"🞜";  margin-right: 5px;
 }

	H1 {
 text-decoration:none;
 text-transform:uppercase;
 text-align:center;
 background-color: #95bd9e;
 color:#fff;
 padding-right:0px;
 padding-top:6px;
 padding-bottom: 6px;
 padding-left:16px;
 font-size:15px;
 line-height:11px;
 letter-spacing:6px;}

	b { color: #9A603A;}

	i {color: #95bd9e; }
</style>
<div class="image"></div>
<div class="container">
<div class="image2"></div><div class="tabbox"><a class='one' href='#one'>01.</a>
<a class='two' href='#two'>02.</a>
<a class='three' href='#three'>03.</a>
<a class='four' href='#four'>04.</a></div>
<div class="info" id="one">
<h1>header here!</h1>
<r><div style="border-bottom: 1px dotted white;"><u>stat</u><font style="float:right;">answer</font></div><br>

	<div style="border-bottom: 1px dotted white;"><u>stat</u><font style="float:right;">answer</font></div><br>

	<div style="border-bottom: 1px dotted white;"><u>stat</u><font style="float:right;">answer</font></div><br>

	<div style="border-bottom: 1px dotted white;"><u>stat</u><font style="float:right;">answer</font></div><br>

	<div style="border-bottom: 1px dotted white;"><u>stat</u><font style="float:right;">answer</font></div><br>

	<div style="border-bottom: 1px dotted white;"><u>stat</u><font style="float:right;">answer</font></div><br>

	<div style="border-bottom: 1px dotted white;"><u>stat</u><font style="float:right;">answer</font></div><br>

	<div style="border-bottom: 1px dotted white;"><u>stat</u><font style="float:right;">answer</font></div><br>

	<div style="border-bottom: 1px dotted white;"><u>stat</u><font style="float:right;">answer</font></div><br>

	<div style="border-bottom: 1px dotted white;"><u>stat</u><font style="float:right;">answer</font></div><br>

	<div style="border-bottom: 1px dotted white;"><u>stat</u><font style="float:right;">answer</font></div><br>

	<div style="border-bottom: 1px dotted white;"><u>stat</u><font style="float:right;">answer</font></div><br>

	<div style="border-bottom: 1px dotted white;"><u>stat</u><font style="float:right;">answer</font></div><br>

	<div style="border-bottom: 1px dotted white;"><u>stat</u><font style="float:right;">answer</font></div><br>

	<div style="border-bottom: 1px dotted white;"><u>stat</u><font style="float:right;">answer</font></div><br>


	</r>





	</div>

<div class="info" id="two">
<h1>header</h1>
<center><a target="_blank" href="profile link" title="friend blurb here">
<img src="img here" style="width:45px;padding:4px;background-color:#95bd9e;"></a>
just copy paste as many friend things as you want.
</div>

<div class="info" id="three">
<h1>header!</h1>
</div>

<div class="info" id="four">
<ul><li>coded for <i>alt name</i> by <a target="_blank" href="https://roleplay.chat/profile.php?user=scoob">scoob</a></li>
<li><b>bold</b> <i>italic</i> <u>underline</u> <a title="">hover</a> <a target="_blank" href="link">link</a></li>
	<li>ooc bullet</li>
	<li>ooc bullet</li>
	<li>ooc bullet</li></ul>
</div></div>
<div class="title">title here</div>