Autumn Vibes

<style type="text/css">

@import url('https://fonts.googleapis.com/css?family=Playfair+Display|Montserrat|Oswald|PT+Sans|Pacifico|Poppins|Ubuntu');

body
{overflow-x:hidden;
background-image:
url('https://www.transparenttextures.com/patterns/stardust.png');
background-position: bottom right;
background-repeat: repeat;
background-attachment: fixed;
background-color:#d4d0cf;
overflow:hidden;}

::-webkit-scrollbar-thumb:vertical {background-color:#302820; height:3px; }
::-webkit-scrollbar { height:3px; width:1px; background-color:transparent; }

::selection {
color: #fff;
background: #121212;}

a {
color: #c26e25;
text-decoration:underline;
text-transform:lowercase;
font-family: 'Pacifico', cursive;
font-size:15px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}

a:hover {color: #fff;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}

b {
 color: #c26e25;
 text-decoration: none;
 font-family: georgia, cursive;
 text-transform:lowercase;
 font-style:italic;
 font-size:10px;
 letter-spacing:0;}

h1 {
  margin-top:1px;
  line-height:25px;
  text-align:center;
  color:#1f1413;
  font-family: 'Playfair Display', serif;
  font-size:20px;
  letter-spacing:1px;
  text-transform:uppercase;
  border-bottom:1px dotted #c26e25;}

h2 {
  padding:5px;
  margin-top:1px;
  margin-bottom:5px;
  color:#c26e25;
  background:transparent;
  border-bottom:1px solid #1f1413;
  font-size:12px;
  font-family: 'Playfair Display', serif;
  text-transform:uppercase;
  letter-spacing:1px;
  text-align:right;
  font-weight:900;}

*{cursor: url('http://media.tumblr.com/7c3edb626c8cf9435c5c0b2d6acceffd/tumblr_inline_mh67v6xNXM1rdqsqf.png'), default;}

#bitch{position:absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;}

 #credit {
    overflow:hidden;
    position:fixed;
    text-align:justify;
    bottom:0px;
    right:0px;
    height:60px;
    width:60px;
    padding:0px;
    opacity: .8;
    background-image: url('https://i.imgur.com/MH0XSqe.png');
    background-position:top center;
    background-attachment: absolute;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}

#container {
   position:absolute;
   top:50%;
   margin-top:-300px;
   left:50%;
   margin-left:-300px;
   height:600px;
   width:610px;
   background:#1f1413;
   background-image:url('');
   background-repeat:repeat;
   background-size:100%;}

.mainimg {
   position:absolute;
   width:260px;
   height:576px;
   z-index:10;
   top:10px;
   right:10px;
   background-color: transparent;
   background-image: url('https://66.media.tumblr.com/e130a161891fadd42d579b12674b7f27/tumblr_pgnotkvKG91w7nb71_540.jpg');
   background-position:center center;
   background-attachment: absolute;
   background-repeat: no-repeat;}

#sidebar1 {
    width:300px;
    left:calc(50% - 650px);
    position:fixed;
    top: 50%;
    transform: translateY(-50%);}

#desc {
   padding:5;
   margin-bottom:10px;
   background:#362b2a;
   font-size:8px;
   line-height:10px;
   color: #fff;
   text-transform:uppercase;
   font-family:calibri, sans-serif;}

#title {
   font-weight:800;
   text-transform:uppercase;
   font-size:40px;
   font-family: 'Oswald', sans-serif;
   background: url(https://66.media.tumblr.com/7a38aab7efef5b7e5398d22536312f9a/tumblr_pgr49oK5A61w7nb71_400.jpg) no-repeat;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-size:cover;
   background-position:center;
   margin-bottom:0px;
   margin-top:0px;
   line-height:45px;}

.icon {
   height:100px;
   width:280px;
   z-index:10;
   margin-left:0px;
   border:10px solid #362b2a;
   background-color: transparent;
   background-image: url('https://static.tumblr.com/4bf6e36081ffa96e0b305e01bf254c7d/zo9roug/gXFp9imtm/tumblr_static_tumblr_static__640.gif');
   background-position:center center;
   background-attachment: absolute;
   background-repeat: no-repeat;}

#sidebar2 {
    width:250px;}

#links {
   position:fixed;
   text-transform:uppercase;
   font-size:20px;
   top:50%;
   width:250px;
   transform:translateY(-50%);
   left:calc(50% + 360px);
   line-height:45px;}

.link {
   color:#1f1413;
   text-decoration:none;
   font-weight:800;
   font-size:20px;
   text-transform:uppercase;
   font-family:'Oswald', sans-serif;
   transition:all 0.6s ease;}

.link:hover {
   padding-left:20px;}

#boxbg {
   background-color:#8f786a;
   position: absolute;
   width:300px;
   height:555px;
   left:10px;
   top:10px;
   padding:10px;
   margin:1px;
   overflow:auto;
   opacity:1;}

#box {
   background-color:#d4d0cf;
   text-transform: lowercase;
   text-align: left;
   color: #7d756b;
   font-size:10px;
   font-family: 'Montserrat', sans-serif;
   position: absolute;
   width:275px;
   height:530px;
   left:10px;
   top:10px;
   line-height:12px;
   padding:10px;
   margin:1px;
   overflow:auto;
   opacity:1;
   z-index:10;}

#history {
   background-color:#d4d0cf;
   text-transform: lowercase;
   text-align: left;
   color: #7d756b;
   font-size:10px;
   font-family: 'Montserrat', sans-serif;
   position: absolute;
   width:275px;
   height:530px;
   left:10px;
   top:10px;
   line-height:12px;
   padding:10px;
   margin:1px;
   overflow:auto;
   opacity:0;}

#abilities {
   background-color:#d4d0cf;
   text-transform: lowercase;
   text-align: left;
   color: #7d756b;
   font-size:10px;
   font-family: 'Montserrat', sans-serif;
   position: absolute;
   width:275px;
   height:530px;
   left:10px;
   top:10px;
   line-height:12px;
   padding:10px;
   margin:1px;
   overflow:auto;
   opacity:0;}

#relationships {
   background-color:#d4d0cf;
   text-transform: lowercase;
   text-align: left;
   color: #7d756b;
   font-size:10px;
   font-family: 'Montserrat', sans-serif;
   position: absolute;
   width:275px;
   height:530px;
   left:10px;
   top:10px;
   line-height:12px;
   padding:10px;
   margin:1px;
   overflow:auto;
   opacity:0;}

.rel {
    width:250px;
    height:150px;
    margin:20px;
    margin-top:1px;
    margin-bottom:10px;
    float:left;
    margin-left:1px;
    background:#1f1413;}

.rel img {
    position:absolute;
    width:100px;
    height:100px;
    border-radius:50%;
    border:10px solid #1f1413;
    box-shadow:1px 1px 10px #1f1413;
    margin-top:17px;
    right:10px;}

.wrds {
    position:absolute;
    padding:5;
    margin-left:10px;
    margin-top:8px;
    width:120px;
    height:120px;
    text-transform:uppercase;
    color:#000;
    background-color:#d4d0cf;
    font-size:8px;
    font-weight:900;
    font-family:calibri, sans-serif;}

#blanket1:target #history{
opacity:1;
z-index:100;}

#blanket1:target #box{
opacity:0;
z-index:1;}

#blanket2:target #abilities{
opacity:1;
z-index:100;}

#blanket2:target #box{
opacity:0;
z-index:1;}

#blanket3:target #relationships{
opacity:1;
z-index:100;}

#blanket3:target #box{
opacity:0;
z-index:1;}
</style>

<div id="bitch" oncontextmenu="return false;">
<div id="blanket"><div id="blanket1"><div id="blanket2"><div id="blanket3"><div id="blanket4">
<a href= "https://roleplay.chat/profile.php?user=UFO" target="_blank"><div id= "credit"></div></a>

<div id="sidebar1">
<div id="title">autumn vibes.</div>
<div id="desc">
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="icon"></div>
</div>

<div id="sidebar2">
<div id="links">
<a href="#blanket1"><div class="link">History</div></a>
<a href="#blanket2"><div class="link">Abilities</div></a>
<a href="#blanket3"><div class="link">Relationships</div></a>
<a href="#"><div class="link">Reset</div></a>
</div>
</div>

<div id= "container">
<div class="mainimg"></div>
<div id="boxbg">
<div id= "box">
<h1>chilly weather.</h1>
<font style=float:left><b>stat</b> </font> <font style=float:right>info</font><br>
<font style=float:left><b>stat</b> </font> <font style=float:right>info</font><br>
<font style=float:left><b>stat</b> </font> <font style=float:right>info</font><br>
<font style=float:left><b>stat</b> </font> <font style=float:right>info</font><br>
<font style=float:left><b>stat</b> </font> <font style=float:right>info</font><br>
<h2>words here.</h2>
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.
<br><br>
<font style=float:left><b>stat</b> </font> <font style=float:right>info</font><br>
<font style=float:left><b>stat</b> </font> <font style=float:right>info</font><br>
<font style=float:left><b>stat</b> </font> <font style=float:right>info</font><br>
<font style=float:left><b>stat</b> </font> <font style=float:right>info</font><br>
<font style=float:left><b>stat</b> </font> <font style=float:right>info</font><br>
</div>

<div id="history">
<h1>character history</h1>
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 id="abilities">
<h1>character abilities</h1>
<li><b>ability name</b> words go here.</li>
<li><b>ability name</b> words go here.</li>
<li><b>ability name</b> words go here.</li>
<li><b>ability name</b> words go here.</li>
<h2>subheader here</h2>
<li><b>ability name</b> words go here.</li>
<li><b>ability name</b> words go here.</li>
</div>

<div id="relationships">
<h1>relationships</h1>
<div class="rel">
<a target="_blank" href="URLHERE"><img src="https://66.media.tumblr.com/6e3e5a99980963a3589068a894b4f31c/tumblr_oy8sntXIBt1rlbdvro1_500.png"></a>
<div class="wrds">
<div class="t">
<li><b>name</b> words words</li>
<li><b>age</b> words words</li>
<li><b>location</b> words words</li>
<li><b>history</b> words words</li>
or you can just put a blurb about them here.
</div>
</div>
</div>

<div class="rel">
<a target="_blank" href="URLHERE"><img src="https://66.media.tumblr.com/6e3e5a99980963a3589068a894b4f31c/tumblr_oy8sntXIBt1rlbdvro1_500.png"></a>
<div class="wrds">
<div class="t">
<li><b>name</b> words words</li>
<li><b>age</b> words words</li>
<li><b>location</b> words words</li>
<li><b>history</b> words words</li>
or you can just put a blurb about them here.
</div>
</div>
</div>

<div class="rel">
<a target="_blank" href="URLHERE"><img src="https://66.media.tumblr.com/6e3e5a99980963a3589068a894b4f31c/tumblr_oy8sntXIBt1rlbdvro1_500.png"></a>
<div class="wrds">
<div class="t">
<li><b>name</b> words words</li>
<li><b>age</b> words words</li>
<li><b>location</b> words words</li>
<li><b>history</b> words words</li>
or you can just put a blurb about them here.
</div>
</div>
</div>
</div>

</div>
</div>