Reese

----------- PLACE IN STYLE ---------



@import url('//fonts.googleapis.com/css?family=Teko');
 @import url('//fonts.googleapis.com/css?family=Sriracha');
  @import url('//fonts.googleapis.com/css?family=Lobster');

::-webkit-scrollbar {width: .3vw; height: 1vw; background: #; }
::-webkit-scrollbar-thumb { background-color:#; border-radius:5vw;}

a:link, a:visited, a:active{color:#C62064;text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; text-decoration:none;}

a:hover { color: #000;text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; }

h1 {text-align: center;font-family:'Sriracha';text-align:center;color:#C9265C;text-shadow:1px 1px 0px #000;font-size: 30px;line-height:25px;letter-spacing:5px;}

i {color:#379255;font-style: italic;}
b {color:#379255;font-weight: bold;}

body{background-image: linear-gradient(to left, #D75AA5,#FEC2DB);overflow:hidden;-webkit-animation: fadein 5s;
 -moz-animation: fadein 5s;
 -ms-animation: fadein 5s;
 -o-animation: fadein 5s;
 animation: fadein 5s;}


@keyframes fadein {
 from { opacity: 0; }
 to { opacity: 1; }
}


@-moz-keyframes fadein {
 from { opacity: 0; }
 to { opacity: 1; }
}


@-webkit-keyframes fadein {
 from { opacity: 0; }
 to { opacity: 1; }
}

@-ms-keyframes fadein {
 from { opacity: 0; }
 to { opacity: 1; }
}


@-o-keyframes fadein {
 from { opacity: 0; }
 to { opacity: 1; }
}


#content {position: fixed;left: 0px;top: 0px; right: 0px; bottom: 0px;}


#tab1,#tab2{opacity:0;}

#tabbed1,#tabbed2{opacity: 0;position: absolute;transition: all 1s;-webkit-transition: all 1s;color:#fff;font-family:'Teko', sans-serif;z-index:6;font-size: 18px;left:-1500px;width:370px;height:230px;bottom:0px;overflow-y:scroll;line-height:18px;transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}

#Tab1:checked ~ #topt #tabbed1
{opacity: 1;z-index:6;left:55px;transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}



 #Tab1:checked ~ .text,#Tab1:checked ~ .text{left:60px;opacity:.5;z-index:2;}
 #Tab2:checked ~ .text,#Tab2:checked ~ .text{left:-1500px;opacity:.5;z-index:2;}


.holder{z-index:3;opacity:1;}

.button{background-image:url(http://i.picpar.com/Ct7e.gif);background-size:100%;height:70px;Width:70px;left:120px;bottom: 310px;position:absolute;opacity:1;z-index:10;transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
.button:hover{background-image:url(https://i.pinimg.com/originals/31/be/31/31be31b51107acade897943084a2abed.gif);background-size:100%;position:absolute;opacity:1;z-index:10;transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}

.button2{background-image:url(http://i.picpar.com/Ct7e.gif);background-size:100%;height:70px;Width:70px;left:190px;bottom: 310px;position:absolute;opacity:1;z-index:10;transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
.button2:hover{background-image:url(https://i.pinimg.com/originals/31/be/31/31be31b51107acade897943084a2abed.gif);background-size:100%;position:absolute;opacity:1;z-index:10;transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}

.text{background-color:#fff;position:absolute;z-index:5;border-radius:5px;width:380px;height:230px;bottom:60px;left:-1500px;border-radius:5px 5px 5px 5px;opacity:.5;transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}


#topt{width:380px;height:230px;bottom:60px;position:absolute;opacity:1;}

#topt{opacity: 1; transition: all 1s; -webkit-transition: all 1s;}

.overlay{background:url(https://www.transparenttextures.com/patterns/always-grey.png);background-repeat:repeat;position:absolute;width:100%;height:100%;bottom:0px;left:0px;}

.pic{position:absolute;background:url(http://i.picpar.com/mq7e.jpg);background-size:100%;background-position:50% 50%;background-repeat:no-repeat;width:200px;height:250px;bottom:50px;left:455px;z-index:2;opacity:1;border-radius:0px 5px 5px 0px;box-shadow: 10px 10px 0px #C9255B;}

.avatar{position:absolute;background:url(http://i.picpar.com/lt7e.png);background-size:400%;background-position:25% 15%;background-repeat:no-repeat;width:100px;height:100px;bottom:270px;left:10px;z-index:3;opacity:1;border-radius:5px 5px 5px 5px;box-shadow: 10px 10px 0px #C9255B;}

.back{background-image:url();position:absolute;background-color:#DF5F76;width:400px;height:250px;bottom:50px;left:50px;z-index:1;border-radius:5px 0px 0px 5px;box-shadow: 10px 10px 0px #C9255B;}

.title{position:absolute;z-index:6;bottom:290px;font-size:70px;width:400px;left:170px;opacity:1;line-height:80px;font-family:'Lobster';text-align:center;background-image:url(https://cdn165.picsart.com/221503071004202.gif?to=crop&r=256);-webkit-background-clip: text; -webkit-text-fill-color: transparent;-webkit-transition: all 1s;}

.title2{position:absolute;z-index:6;bottom:290px;font-size:70px;width:400px;opacity:1;left:170px;line-height:80px;font-family:'Lobster';text-align:center;text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;}


.chibi{position:absolute;background-image:url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/09d1bb39-e220-4c34-8d81-0d90553218fe/d8l2zlq-ffd7758c-07c0-4de9-bef4-4c3d618dadc4.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvMDlkMWJiMzktZTIyMC00YzM0LThkODEtMGQ5MDU1MzIxOGZlXC9kOGwyemxxLWZmZDc3NThjLTA3YzAtNGRlOS1iZWY0LTRjM2Q2MThkYWRjNC5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.EZrwa0PnCI8w1S4JLFoLwdlB15hBBmK63VpSdKEs1SA);background-size:100%;width:150px;height:150px;left:480px;bottom:290px;background-repeat:no-repeat;}

.div1 {float: left;color:#C9255B;text-shadow:1px 1px 0px #000;}

.div2 {float:right;text-align: right;color:#DF5F76;text-shadow:1px 1px 0px #000;}

.credit{bottom:0vw;left:96vw;width: 5vw;height: 6vw;opacity: 1;overflow: hidden;position: fixed;}




--------- PLACE IN BODY -------


<input type="radio" name="HubSwitch" id="Tab1">
<input type="radio" name="HubSwitch" id="Tab2">

<div class="back"></div><div class="overlay"></div><div class="chibi"></div>

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

<div class="pic"></div><div class="avatar"></div><div class="text"></div>

<div id="topt">
<div id="tabbed1">
<h1>Title</h1>
<div class="div1">info</div>
<div class="div2">info</div><Br>
<div class="div1">info</div>
<div class="div2">info</div><Br>
<div class="div1">info</div>
<div class="div2">info</div><Br>
<div class="div1">info</div>
<div class="div2">info</div><Br>

</div>
</div>

<div class="holder">
<label for="Tab1"><div class="button"></div></label>
<label for="Tab2"><div class="button2"></div></label>
</div>
</div>


<div class="credit"><a target="_blank" href="https://roleplay.chat/profile.php?user=ReverieStyles" target="_blank"><img src="https://i.imgur.com/fgKTyd3.png" width="100%"></a>