<div id="bg-box"></div>
<div id="upside-down">U<u>PSIDE</u> D<u>OWN</u></div>
<div id="story">
Your story goes here!
[p]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare rutrum nulla, ac dapibus ante pellentesque in. Praesent ut consequat mi, quis tincidunt magna. Sed ut quam leo. Curabitur maximus euismod tortor eget tincidunt. Aliquam luctus erat diam, nec vehicula eros facilisis sit amet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam bibendum lacus et fermentum ullamcorper. Pellentesque ullamcorper lobortis iaculis. Quisque pellentesque ante eleifend magna venenatis, eu pulvinar nisi pharetra. Integer viverra tempor ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris dictum arcu augue, at ullamcorper felis placerat nec. Sed tempor dictum posuere. Nam in enim cursus, aliquet arcu non, euismod nisi.

[p]credits: profile by [user=Shakespeare]
</div>

<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Raleway:500');

@font-face{font-family:"Stranger";font-style:normal;src:url("https://vignette.wikia.nocookie.net/xraydeltaone/images/e/e0/Stranger.ttf") format("truetype")}

/* Pet Image --*/
#pet_image {position: fixed; left: 641px; top: 126px; height: 400px; width: 400px; background: url('https://i.imgur.com/O14JXym.png') no-repeat; background-size: contain;}

/* Background -------*/
body {background: url(https://i.imgur.com/i3FMtFI.jpg) #EF8409;  overflow: hidden; background-size: cover;}

/* Pet Name --------*/

#upside-down {
  color: #020835;
  position: fixed; left: 43px; top: 117px; height: 100px; font-size: 80px !important;  font-family:'Stranger', serif;  font-variant: small-caps; text-shadow: 2px 0px 2px #e00404, 0px 2px 2px #e00404, -2px 0px 2px #e00404, 0px -2px 2px #e00404;}

u {text-decoration: underline overline; font-size: 50px;}


/* Box background ---*/
#bg-box {
border: 1px solid #020835;
background-color: #0e3860;
background-image:url(https://www.transparenttextures.com/patterns/subtle-zebra-3d.png);
height: 241px; border-radius: 25px; width: 1200px; position: absolute; top: 239px; left: -153px; z-index: -100;
background-size: 50px;
}

/* Pet color and owner ---*/
.pet_color_info {position: fixed; left: 53px; top: 230px; text-transform: lowercase; color: white;}
.owner {position: fixed; left: 55px; top: 247px; text-transform: lowercase; color: white;}
.pet_like {position: fixed; left: 162px; top: 230px;}

#column_1 {position: absolute; top: 380px; left: 320px; width: 100px; padding: 0px; }
#column_2 {margin-left: 98px; margin-top: 3px; }

/* Minion and Spotlight hovers --*/
#pet_minion {display: none;}

.pet_spotlight {position: absolute; left: -50px; top: 472px; background: #0e3860; height: 10px;  -webkit-transition: height 2s; transition: height 2s; overflow: hidden; border-radius: 0px 0px 10px 10px; box-shadow: 1px 1px 1px black;}
.pet_spotlight:hover {height: 120px;}
.pet_spotlight a {color: #fff !important; position: relative; top: 10px;}

#story {width: 370px!important; height: 145px; margin-left: -159px; margin-top:  159px;  -webkit-border-radius: 5px !important; -moz-border-radius: 5px !important; border-radius: 5px !important; border: 1px solid #020835; padding: 1px; -webkit-border-radius: 5px !important; -moz-border-radius: 5px !important; border-radius: 5px !important; padding: 15px; overflow-y: scroll;}

#pet_treasure {width: 360px!important; height: 45px; margin-left: -154px; margin-top: -2px;  -webkit-border-radius: 5px !important; -moz-border-radius: 5px !important; border-radius: 5px !important; border: 1px solid #020835; -webkit-border-radius: 5px !important; -moz-border-radius: 5px !important; border-radius: 5px !important; padding-right: 15px; padding-left: 25px; overflow-y: scroll;}
.treasure_item {height:45px; width:45px; border:none; padding:0px 5px 5px 0px; opacity: 0.6}
.treasure_item:hover {-webkit-transition: opacity 2s; transition: opacity 2s; opacity: 1;}
.treasure_item img {border:1px solid #020835; border-radius:15px;}

/* Pet stats ---*/
#pet_stats {display: none;}

/* Positioning no touch --*/
#postcards, #menu, #sidebar, #rightbg, #bookmarks, #footer, #column_2 h2, #column_1 h2, .pet_wco_info_date, .pet_age_info_date, #header, #stat_books_read, #stat_food_eaten, #pet_employment, #column_3 a, #pet_friends, .hustler, .owner img, #random_events {display: none}

html, #page, #bookmarks, #content, #rightbg {background-color: transparent;}
#content {min-height: auto; max-height: 400px!important; width: 900px; overflow: visible; margin: -20px 0px 0px 180px; padding: 0px; position: absolute;  z-index: 1;}
#column_3 {width: auto; height: auto;}
.text {position: fixed; top: 0px; left: 0px;}

/* Fonts ---------*/
h2 {display: none;}
body, font, td, a, p, table, div, tr
{color: white; font-size: 10px; font-family: 'Raleway', 'Tahoma';}
a {color: #e00404 !important;}
.pet_name {display: none;}



</style>