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


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

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

	body { background-color: #990c0a; background-image: url("https://www.transparenttextures.com/patterns/checkered-pattern.png"); cursor: url(https://cur.cursors-4u.net/cursors/cur-6/cur531.cur), auto !important; overflow: hidden; }

	.image {z-index: 1; position: fixed; bottom: 0vh; left: 26vw; height: 80vh; width: 45vw; background: url('https://i.imgur.com/jFYZO1j.png') no-repeat; background-size: 100vh; filter: drop-shadow(-.8vh 0vh 0vh #36011E);}

	.container { position: absolute; bottom: 5vh; left: 5vw; height: 40vh; width: 30vw; background: #AC1A12; outline: solid 10px maroon; box-shadow: -2vh 2vh 1vh #0003;}


	.title { z-index: 1; position: absolute; top: 43vh; left: 4vw; font-family: 'Nova Flat', cursive; color: maroon; font-size: 6vw; letter-spacing: 1vw; text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000; filter: drop-shadow(0px 0px 5px maroon);}


	.tabbox { position: absolute; bottom: 0vh; left: 0vw; height: 4vh; width: 8vw;}

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

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

.three { position: absolute; bottom: 0vh; right: 4vw; font-family: 'Bahianita'; font-size: 2vw; color: maroon; text-decoration: none; }

.four { position: absolute; bottom: 0vh; right: 6vw; font-family: 'Bahianita'; font-size: 2vw; color: maroon; text-decoration: none; ;}

.info { z-index: 1; position: absolute; overflow: auto; bottom: 5vh; left: .2vw; height: 30vh; width: 23vw; padding: 1vh; background: #AC1A12; font-family: 'Ubuntu Condensed', sans-serif;  font-size: 1.7vh; color: #fff; opacity: 0;  text-transform: ; 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: maroon; letter-spacing: 0.1vh; text-decoration: none; text-transform: uppercase; transition: all .7s ease-in-out;}

a:hover{ color: maroon; text-shadow: 0px 0px 5px #000;  cursor: url(https://cur.cursors-4u.net/cursors/cur-6/cur531.cur), auto !important; }

	r { line-height: 1vh; }

	H1 { text-decoration: none; text-transform: uppercase; text-align: center; background-color: maroon; font-weight: 400; 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: maroon; }

</style>
<div class="image"></div>
<div class="container"><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</h1>
<r><div style="border-bottom: 1px dotted white;"><u>stat</u><font style="float:right;"> answer</font></div><br>

<r><div style="border-bottom: 1px dotted white;"><u>stat</u><font style="float:right;"> answer</font></div><br>
<r><div style="border-bottom: 1px dotted white;"><u>stat</u><font style="float:right;"> answer</font></div><br>
<r><div style="border-bottom: 1px dotted white;"><u>stat</u><font style="float:right;"> answer</font></div><br>
<r><div style="border-bottom: 1px dotted white;"><u>stat</u><font style="float:right;"> answer</font></div><br>
<r><div style="border-bottom: 1px dotted white;"><u>stat</u><font style="float:right;"> answer</font></div><br>
<r><div style="border-bottom: 1px dotted white;"><u>stat</u><font style="float:right;"> answer</font></div><br>
<r><div style="border-bottom: 1px dotted white;"><u>stat</u><font style="float:right;"> answer</font></div><br>
<r><div style="border-bottom: 1px dotted white;"><u>stat</u><font style="float:right;"> answer</font></div><br>
<r><div style="border-bottom: 1px dotted white;"><u>stat</u><font style="float:right;"> answer</font></div><br>
<r><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>
put whatever here babe

</div>

<div class="info" id="three">
<h1>header</h1>
same here, it scrolls.
</div>

<div class="info" id="four">
🞜 code made by <a target="_blank" href="https://roleplay.chat/profile.php?user=scoob">scoob,</a> for <b>my</b> use only.<br>
🞜 ooc bullet.<br>
🞜 ooc bullet.<br>
🞜 ooc bullet.<br>
🞜 ooc bullet.<br>
🞜 ooc bullet.<br>
🞜 ooc bullet.<br>
🞜 ooc bullet.<br>
🞜 ooc bullet.<br>

</div></div></div>
<div class="title">K9999</div>