hallow

<style>
@import url('https://fonts.googleapis.com/css?family=Oswald');

 body {
 background: #050F1B;
 overflow: hidden;
 }



@font-face {
 font-family: Hunters;
 src: url(https://dl.dropboxusercontent.com/s/uc0a1lyuqzven52/Hunters.otf);
}





 .box {
 position: absolute;
 background: url(https://www.pixelstalk.net/wp-content/uploads/2016/05/Happy-Halloween-Pumpkins-Wallpaper-HD.jpg);
 background-size: cover;
 left: 4vh;
 top: 20vh;
 right: 4vh;
 bottom: 2vh;
 z-index: -1;
 filter: blur(.9vh) brightness(1.3);
 }



.hlw img {
top: 10vh;
left: 0vh;
 position: absolute;
 height: 80vh;
width:80vh;
overflow:auto;
 filter: drop-shadow(0 0 .9vh #000);
 }


 .divider {
 filter: drop-shadow(.5vh .4vh .1vh orange);
 position: absolute;
 left: 50%;
 transform: translate(-50%);
 top: 12vh;
 }



 .divider img {
 height: 13vh;
 }



 .seat {
 bottom: -.4vh;
 left: -.4vh;
 position: absolute;
 background: #02001D;
 width: 38vh;
 height: 32vh;
 border: .1vh solid #FE9600;
 filter: blur(.3vh);
 }



 .skele img {
 width: 26vh;
 bottom: 0vh;
 left: 0vh;
 position: absolute;
 filter: hue-rotate(120deg) drop-shadow(0 0 .5vh orange);
 transform: scaleX(-1);
 }



 .title {
 font-family: Hunters;
 color: #78477E;
 font-size: 16vh;
 top: -.5vh;
 position: absolute;
 left: 50%;
 transform: translate(-50%);
 z-index: 3;
 font-weight: bold;
 }

 .title2 {
 font-family: Hunters;
 color: #FF9600;
 font-size: 16vh;
 top: -.5vh;
 -webkit-text-stroke-color: #FF9600;
 -webkit-text-stroke-width: 2vh;
 position: absolute;
 left: 50%;
 transform: translate(-50%);
 }



 .divider2 img {
 position: absolute;
 filter: invert(1);
 left: 50%;
 transform: translate(-50%);
 top: 40vh;
 width: 40vh;
 margin-left: 13vh;
 }

 .alts {
 position: absolute;
 bottom: 0;
 right: .3vh;
}

.alts img {
 position: relative;
 height: 7vh;
 width: 7vh;
 border: .12vh solid orange;
}

.alts a {
 text-decoration: none;
 color: orange;
}

.show {
 position: absolute;
 bottom: 8vh;
 left: 0;
 right: 0;
 background: #050F1B;
 padding: .5vh;
 height: 5vh;
 transition: ease 0s;
 opacity: 0;
 font-family: Oswald;
 font-size: 1.2vh;
}



img:hover + .show {
 opacity: 1;
 transition: ease .5s;
}





.tab label {
 position: relative;
 float: left;
 margin-left: 4.5vh;
 font-family: Hunters;
 color: white;
 font-size: 3vh;
 left: 50%;
 transform: translate(-50%);
 top: 44.5vh;
 border: .2vh solid white;
 height: 3.5vh;
 width: 3.5vh;
 text-align: center;
 border-radius: 50%;
}

.tab label:hover {
 cursor: pointer;
}

.tab [type=radio] {
 display: none;
}

.content {
 position: absolute;
 opacity: 0;
 left: 50%;
 transform: translate(-50%);
 margin-left: 13vh;
 text-align: center;
width: 70vh;
 top: 49.5vh;
 height: 40vh;
 font-family: Oswald;
 color: white;
 transition: ease 0s;
 font-size: 1.7vh;
}

.content h1 {
 font-family: Hunters;
 font-size: 10vh;
 font-weight: 300;
 margin-bottom: 0;
 top: -26.6vh;
 position: absolute;
 left: 50%;
 transform: translate(-50%);
 transition: 0s;
}

[type=radio]:checked ~ label {

 filter: drop-shadow(0 0 .4vh white);

}

[type=radio]:checked ~ label ~ .content {

 opacity: 1;

 z-index: 5;

 transition: ease .6s;

}



.content a {

 color: orange;

}
</style>

<div class="alts">

<a target="blank" href="https://roleplay.chat/profile.php?user=WURM"><img src="https://i.imgur.com/n9yra4j.png">
<span class="show">I wish I didn't care so much. Did you mean it when you said you loved me? I want to believe you, but it's so hard. Please don't hurt me again.</span>
</img></a>

<a target="blank" href="https://roleplay.chat/profile.php?user=wife"><img src="https://c4.wallpaperflare.com/wallpaper/184/780/955/jinx-league-of-legends-league-of-legends-video-games-video-game-art-video-game-girls-hd-wallpaper-preview.jpg">
<span class="show">(OOC) my future husband. h8 this stupid mf.</span>
</img></a>

<a target="blank" href="https://roleplay.chat/profile.php?user=Hallow"><img src="https://i.imgur.com/P7C9neW.png">
<span class="show">Placeholder.</span>
</img></a>
</div>

<div class="divider2">
 <img src="https://i1.wp.com/micechat.com/wp-content/uploads/2016/09/Halloween-Divider-Fab.png?ssl=1">
</div>

<div class="title">Hallow</div>
<div class="title2">Hallow</div>
</div>

<div class="divider">
 <img src="https://i.pinimg.com/originals/0f/fc/e5/0ffce5287f1a67625800b5496155f3f2.gif">
</div>

<div class="hlw">
 <img src="https://i.imgur.com/TiOjgK1.png"
</div>

<div class="box"></div>
<div class="bg"></div>

<div class="tabs">

 <div class="tab">

 <input type="radio" id="tab-1" name="tab-group-1" checked>

 <label for="tab-1">1</label>



 <div class="content">

 <h1>spooky</h1>

 Hallow is a Holiday spirit, no doubt for Halloween. She is incredibly powerful and confident in her abilities close to her holiday, but is otherwise easily exhausted and more prone to feeling emotions. Though many people think she's a witch, they would be wrong and she'd likely take offense to being called one. She's generally a friendly person but can become irritable and grumpy at the drop of a hat. Hallow talks a big game but almost never follows through.

<br><br>

Hallow has made some friends in her time wandering the human world, mostly due to her being more vulnerable in what she calls the 'off season'. She's seen kindness from many people and she couldn't be more grateful for that. Every day is a new learning experience for the spirit and learning about the world she was a part of couldn't be more exciting! <br><br>
<br><br><br>



 </div>

 </div>



 <div class="tab">
 <input type="radio" id="tab-2" name="tab-group-1">
 <label for="tab-2">2</label>



 <div class="content">

 <h1>scary stats</h1>

<font style="float:left; left: 10vh; position: absolute;"><b>Name</b> </font> <font style="float:right; right: 10vh; position: absolute;">Hallow.</font><br>

<font style="float:left; left: 10vh; position: absolute;"><b>Nicknames</b> </font><font style="float:right; right: 10vh; position: absolute;">Witch.</font><br>

<font style="float:left; left: 10vh; position: absolute;"><b>Age</b> </font> <font style="float:right; right: 10vh; position: absolute;">Eternal.</font><br>

<font style="float:left; left: 10vh; position: absolute;"><b>Race</b> </font> <font style="float:right; right: 10vh; position: absolute;">Holiday spirit.</font><br>

<font style="float:left; left: 10vh; position: absolute;"><b>Disposition</b> </font> <font style="float:right; right: 10vh; position: absolute;">Grumpy, needy, possessive.</font><br>

<hr>

<font style="float:left; left: 10vh; position: absolute;"><b>Orientation</b> </font> <font style="float:right; right: 10vh; position: absolute;">Straight.</font><br>

<font style="float:left; left: 10vh; position: absolute;"><b>Marital</b> </font> <font style="float:right; right: 10vh; position: absolute;">Single.</font><br>

<font style="float:left; left: 10vh; position: absolute;"><b>Height</b> </font> <font style="float:right; right: 10vh; position: absolute;">5'4"</font><br>

<font style="float:left; left: 10vh; position: absolute;"><b>Weight</b> </font> <font style="float:right; right: 10vh; position: absolute;">129 lbs.</font><br>


<br>



 </div>

 </div>



 <div class="tab">

 <input type="radio" id="tab-3" name="tab-group-1">

 <label for="tab-3">3</label>


 <div class="content">

 <h1>out of spells</h1>

 profile was commissioned specifically for Hallow by <a target="_blank" href="https://roleplay.chat/profile.php?user=notcookie">cookie</a>, please do not steal anything from this profile.<br>

<hr>

<div style="text-align: left; position: absolute; left: 50%; transform: translate(-50%);">

<b>001</b> | Real life always comes first.<br>

<b>002</b> | IC isn't OOC, they're easy to distinguish.<br>

<b>003</b> | Somewhat experienced writer.<br>

<b>004</b> | Disappears sometimes.<br>

<b>005</b> | Smut or story. Whatever works.<br>

</div>

 </div>