Tiri Dear

<STYLE>
@import url('https://fonts.googleapis.com/css2?family=Sail&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');

body {
 margin:auto;
 overflow:hidden;
 background: #eee;
 cursor: url(https://cur.cursors-4u.net/others/oth-6/oth589.cur), auto !important;
}
.badbaby {
 position:fixed;
 bottom:20px;
 right:20px;
 z-index:99;
 }
.badbaby img{
 height:85px;
 }
a {
 text-decoration:none;
}
::-webkit-scrollbar {display:none}

.grass1 {
 opacity:0.8;
}
a.returnlink {
 padding:10px;
 background-color:#fff;
 border-radius:10px;
 font-size:30px;
 font-family: 'Sail', cursive;
 font-weight:bold;
 color:#77886B;
}
a.returnlink:hover {color:#D82CD4;}

.MAINcontainer {
 position:absolute;
 left:0px;
 right:0px;
 top:0px;
 bottom:0px;
 bottom:0px;
 margin:auto;
 height:600px;
 width:921px;
 border:20px solid #fff;
}
.hello {
 position:absolute;
 margin-left:-200px;
 margin-top:-480px;
}
.INTROspeech {
 position:fixed;
 border-radius:12px;
 display:inline-block;
 margin-top:-580px;
 width:200px;
 height:150px;
 padding:20px;
 margin-left:160;
 position:relative;
 font-weight:bold;
 text-align:center;
 font-size:14px;
 border:10px solid #fff;
 background-color:#F8F0E2;
 color:#AE5448;
 text-align:justify;
 font-family: 'Fredoka One', cursive;
 z-index:999999999;
}
.INTROspeech:before {
 border:solid 12px transparent;
 border-left:solid 12px #fff;
 border-top:solid 12px #fff;
 bottom:-24px;
 content:"";
 left:24px;
 position:absolute;
 transform:skew(-15deg);
}
.INTROspeech:after {
 border:solid 10px transparent;
 border-left:solid 10px #F8F0E2;
 border-top:solid 10px #F8F0E2;
 bottom:-19px;
 content:"";
 left:27px;
 position:absolute;
 transform:skew(-15deg);
 }
.INTROspeech a {
 font-weight:normal;
 color:#D1ADC9;
}
.INTROspeech a:hover {color:#FFFC7A;}

	/*stats*/

#stats {
 opacity: 0.0;
 position:fixed;
 margin-top:-350px;
 margin-left:250px;
 width:255px;
 height:275px;
 text-align:justify;
 font-size:12px;
 z-index: 99;
 overflow:hidden;
 transition: all 0.4s ease-in-out;
 border-radius:12px;
 border:10px solid #fff;
 background-color:#F8F0E2;
}
#stats:target {
 z-index:99;
 opacity:1;
 overflow:hidden;
 transition: all 0.4s ease-in-out;
 z-index:99999999;
}
.STATSbox {
 width:250px;
 height:245px;
 overflow:auto;
 margin-top:10px;
 margin-left:10px;
 padding:5px;
 font-size:14px;
}
.STATSbox b {
 background-color:#FFF;
 padding:5px;
 margin-top:2px;
 margin-bottom:2px;
 display:inline-block;
 width:100px;
 text-align:center;
 border-radius:10px;
 color:#9BB2A0;
 box-shadow:-1px 1px 1px #ccc;
  font-family: 'Fredoka One', cursive;
}
.STATSbox i {
 background-color:#CEDEBB;
 padding:5px;
 margin:2px;
 margin-top:2px;
 margin-bottom:2px;
 display:inline-block;
 width:100px;
 color:#FFF;
 text-align:center;
 border-radius:10px;
 letter-spacing:1px;
 font-family: 'Fredoka One', cursive;
 text-transform:lowercase;
}
.WORDbasic {
 position:fixed;
 margin-left:360px;
 margin-top:-430px;
 font-size:80px;
 width:250px;
 font-family: 'Fredoka One', cursive;
 color:#fff;
 text-shadow:2px 2px 2px #000;
}
.WORDinformation1 {
 position:fixed;
 margin-left:250px;
 margin-top:-360px;
 font-size:80px;
 width:250px;
 color:#fff;
 font-family: 'Sail', cursive;
 text-shadow:2px 2px 2px #555;
}
	/*personality*/

#personality {
 opacity: 0.0;
 position:fixed;
 margin-top:-540px;
 margin-left:420px;
 width:450px;
 height:650px;
 text-align:justify;
 font-size:12px;
 z-index: 99;
 overflow:hidden;
 transition: all 0.4s ease-in-out;
}
#personality:target {
 z-index:99;
 opacity:1;
 overflow:hidden;
 transition: all 0.4s ease-in-out;
 z-index:99999999;
}
.standing {
 position:fixed;
 margin-top:-100px;
 margin-left:150px;
}
.personalitybox {
 position:fixed;
 margin-top:200px;
 height:250px;
 width:260px;
 padding:20px;
 border-radius:12px;
 border:12px solid #fff;
 background-color:#F8F0E2;
 margin-left:-170px;
 font-family: 'Fredoka One', cursive;
 color:#63536B;
 font-size:14px;
 font-weight:bold;
 line-height:18px;
}
.personality2 {
 overflow:auto;
 height:250px;
}

/*backstory*/

#BACKSTORY{
 opacity:0.0;
 background: linear-gradient(0deg, #DAEBB5 20%, #FAFAE0 60%);
 position:fixed;
 left:0px;
 right:0px;
 top:0px;
 bottom:0px;
 margin:auto;
 width:100%; height:100%;
 text-align:justify;
 font-size:12px;
 z-index: 9;
 overflow:hidden;
 transition: all 0.4s ease-in-out;
}
#BACKSTORY:target {
 z-index:999999999;
 opacity:1;
 overflow:hidden;
 transition: all 0.4s ease-in-out;
 z-index:999999999999999;
}
.BACKSTORYcontainer {
 position:absolute;
 left:0px;
 right:0px;
 top:0px;
 bottom:0px;
 bottom:0px;
 margin:auto;
 height:650px;
 width:870px;
 padding:20px;
 background-color:#fff;
 box-shadow:5px 5px 5px #ccc;
}
.BACKSTORYback1 {
 position:absolute;
 height:650px;
 width:270px;
 background-color:#714B51;
 margin-top:-650px;
 opacity:0.2;
}
.BACKSTORYback2 {
 position:absolute;
 background-color:#fff;
 width:190px;
 height:300px;
 margin-top:-400px;
 margin-left:20px;
 padding:20px;
 opacity:0.7;
 border-radius:20px;
 box-shadow:3px 3px 3px 3px #5A3B38;
}
.BACKSTORYtitle {
 position:absolute;
 background-color:#fff;
 padding:20px;
 font-size:56px;
 margin-top:-40px;
 font-weight:bold;
 font-family: 'Sail', cursive;
 color:#D05A68;
 text-shadow:1px 1px 1px #555;
 border-radius:20px;
 margin-left:9px;
}
.BACKSTORYcontent {
 position:absolute;
 width:190px;
 height:300px;
 margin-top:-380px;
 margin-left:40px;
 overflow:auto;
 text-align:justify;
 font-weight:bold;
 font-family: 'Fredoka One', cursive;
 color:#815F82;
 font-size:15px;
 line-height:19px;
}
.BACKSTORYcontent b {color:#EA9576;}
.BACKSTORYcontent i {color:#F587DD;}

.backstoryRETURN {
 position:absolute;
 margin-top:-630px;
 margin-left:760px;
}
	/*NSFW*/

#NSFW {
 opacity: 0.0;
 position:fixed;
 margin-top:20px;
 margin-left:270px;
 width:700px;
 height:400px;
 text-align:justify;
 font-size:12px;
 z-index: 99;
 overflow:hidden;
 transition: all 0.4s ease-in-out;
}
#NSFW:target {
 z-index:99;
 opacity:1;
 overflow:hidden;
 transition: all 0.4s ease-in-out;
 z-index:99999999;
}
.SIT {
 position:fixed;
 margin-left:20px;
 margin-top:-645px;
 z-index:2;
}
.SITONBOX {
 position:fixed;
 width:400px;
 height:200px;
 background-color:#F8F0E2;
 margin-top:-260px;
 margin-left:210px;
 border-radius:20px;
 border:10px solid #fff;
}
.KINKS {
 position:fixed;
 width:130px;
 height:140px;
 margin-left:340px;
 margin-top:-244px;
 overflow:auto;
 z-index:9;
}
.KINKS b {
 background-color:#FFF;
 padding:5px;
 margin-top:2px;
 margin-bottom:2px;
 display:inline-block;
 width:120px;
 text-align:center;
 color:#9BB2A0;
 font-family: 'Fredoka One', cursive;
}
.LIMITS {
 position:fixed;
 width:130px;
 height:140px;
 margin-left:476px;
 margin-top:-244px;
 overflow:auto;
 z-index:9;
}
.LIMITS b {
 background-color:#FFF;
 padding:5px;
 margin-top:2px;
 margin-bottom:2px;
 display:inline-block;
 width:120px;
 text-align:center;
 color:#E568C2;
 font-family: 'Fredoka One', cursive;
}
.KINKStitle {
 position:fixed;
 width:130px;
 margin-left:340px;
 text-align:center;
 font-size:40px;
 margin-top:-100px;
 font-family: 'Sail', cursive;
 font-weight:bold;
 color:#CF5B6F;
}
.LIMITStitle {
 position:fixed;
 width:130px;
 margin-left:476px;
 margin-top:-100px;
 font-family: 'Sail', cursive;
 font-weight:bold;
 font-size:40px;
 text-align:center;
 color:#CF5B6F;
}
.NSFWword {
 position:fixed;
 margin-top:-355px;
 margin-left:458px;
 color:#fff;
 font-size:60px;
 font-family: 'Fredoka One', cursive;
 text-transform:uppercase;
 text-shadow:2px 2px 2px #000;
}
.NSFWINFORMATIONword {
 position:fixed;
 margin-top:-300px;
 margin-left:440px;
 color:#fff;
 font-size:40px;
 font-family: 'Sail', cursive;
 text-transform:lowercase;
 text-shadow:2px 2px 2px #000;
}
	/*ooc*/

#OOC {
 opacity: 0.0;
 position:fixed;
 margin-top: -340px;
 margin-left:250px;
 width:500px;
 text-align:justify;
 font-size:12px;
 z-index: 99;
 overflow:auto;
 transition: all 0.4s ease-in-out;
}
#OOC:target {
 z-index:99;
 opacity:1;
 overflow:hidden;
 transition: all 0.4s ease-in-out;
 z-index:99999999;
}
p {
 border:10px solid #fff;
 background-color:#F8F0E2;
 border-radius:10px;
 padding:10px;
 font-size:14px;
 font-family: 'Fredoka One', cursive;
 color:#9EB5A1;
}
.OOC2 {
 position:fixed;
 margin-left:300px;
 margin-top:-170px;width:250px;
}
.outof {
 position:fixed;
 margin-left:-10px;
 margin-top:100px;
 font-size:80px;
 width:250px;
 font-family: 'Fredoka One', cursive;
 color:#fff;
 text-shadow:2px 2px 2px #000;
}
.character {
 position:fixed;
 margin-left:50px;
 margin-top:160px;
 font-size:80px;
 width:250px;
 color:#fff;
 font-family: 'Sail', cursive;
 text-shadow:2px 2px 2px #555;
}

</STYLE>

<BODY>

<div class="MAINcontainer">
<img src="https://i.imgur.com/tzeIlKH.png" class="grass1" height="600">
<img src="https://i.imgur.com/sLga2om.png"  class="hello" height="600">


<div class="INTROspeech">
<div style="overflow:auto; height:150px;">
	hello! my name is _____ and i'm a deer!
	here are my <a href="#STATS">stats</a>.
	if you want to know what i'm like, then check out
	<a href="#PERSONALITY">my personality</a>.
	curious about my <a href="#BACKSTORY">my history</a>?
	maybe you just want to take a naughty <a href="#NSFW">peep</a> at me?
	thanks for stopping by.	<a href="#OOC">goodbye!</a>
</div></div>



<div class='STATS'>
<div id='STATS'>
<div class="STATSbox">
 	<b>Stat</b> <i>Answer</i> <br>
	<b>Stat</b> <i>Answer</i> <br>
	<b>Stat</b> <i>Answer</i> <br>
	<b>Stat</b> <i>Answer</i> <br>
	<b>Stat</b> <i>Answer</i> <br>
	<b>Stat</b> <i>Answer</i> <br>
	<b>Stat</b> <i>Answer</i> <br>
	<b>Stat</b> <i>Answer</i> <br>
	<b>Stat</b> <i>Answer</i> <br>
	<b>Stat</b> <i>Answer</i> <br>
	<b>Stat</b> <i>Answer</i> <br>
	<b>Stat</b> <i>Answer</i> <br>
</div>

<div class="WORDbasic">basic</div>
<div class="WORDinformation1">information</div>
</div></div>



<div class='PERSONALITY'>
<div id='PERSONALITY'>
<img src="https://i.imgur.com/HMyVmYz.png" class="standing" height="650">
<div class="personalitybox">
<div class="personality2">
    [DESCRIBE PERSONALITY OR APPEARANCE HERE ]
	Lorem ipsum dolor sit amet, consectetur adipiscing elit,
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
     Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
     Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     Lorem ipsum dolor sit amet, consectetur adipiscing elit,
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
     Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
     Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div></div>



<div class='BACKSTORY'>
<div id='BACKSTORY'>
<div class="BACKSTORYcontainer">
<img src="https://i.imgur.com/UjT42Uu.jpg" height="650">
<div class="BACKSTORYback1"></div>
<div class="BACKSTORYback2"></div>
<div class="BACKSTORYtitle">backstory</div>
<div class="BACKSTORYcontent">
[BACKSTORY BOX ]
<i>italic</i> <b>bold</b>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="backstoryRETURN"><a href="#" class="returnlink">return</a></div>
</div>
</div></div>



<div class='NSFW'>
<div id='NSFW'>
<div class="SIT"><img src="https://i.imgur.com/FQfxsBq.png" height="750"></div>
<div class="SITONBOX"></div>

<div class="KINKS">
	<b>kink here</b>
	<b>kink here</b>
	<b>kink here</b>
	<b>kink here</b>
	<b>kink here</b>
	<b>kink here</b>
	<b>kink here</b>
	<b>kink here</b>
	<b>kink here</b>
	<b>kink here</b>
	<b>kink here</b>
	<b>kink here</b>
	<b>kink here</b>
	<b>kink here</b>
	<b>kink here</b>
	<b>kink here</b>
</div>

<div class="LIMITS">
 	<b>limit here</b>
 	<b>limit here</b>
 	<b>limit here</b>
 	<b>limit here</b>
 	<b>limit here</b>
	<b>limit here</b>
	<b>limit here</b>
	<b>limit here</b>
	<b>limit here</b>
	<b>limit here</b>
	<b>limit here</b>
	<b>limit here</b>
	<b>limit here</b>
	<b>limit here</b>
	<b>limit here</b>
</div>


<div class="KINKStitle">Kinks</div>
<div class="LIMITStitle">Limits</div>
<div class="NSFWword">nsfw</div>
<div class="NSFWINFORMATIONword">information</div>
</div></div>




<div class='OOC'>
<div id='OOC'>
<div class="OOC2">
<p>All art here is owned by me.</p>
<p>Pm friendly, also enjoys goofing around in main.</p>
<p>Short term is fine, but long-term is adored.</p>
<p>Will put up an F-list at some point</p>
</div>
<div class="outof">out of</div>
<div class="character">character</div>
</div></div>


</div>
<div class="badbaby"><a target="_blank" href="https://roleplay.chat/profile.php?user=badbaby"><img src="https://i.imgur.com/GvurzKt.png"></a></div>
</BODY>