historiography byzantium profile

<a href="#story"><div class="button1">story.</div></a>
<a href="#pet_treasure"><div class="button2">treasures.</div></a>
<a href="#credits"><div class="button3">credits.</div></a>
</div>

<div id="story"><h1>Lorem ipsum dolor sit amet,</h1>
consectetur adipiscing elit. Curabitur molestie eu mauris a suscipit. Mauris orci purus, porta non orci dictum, sodales laoreet purus. Quisque finibus turpis at neque pretium maximus. Suspendisse pretium suscipit neque quis dapibus. Morbi venenatis interdum leo. Vestibulum fermentum commodo ipsum, quis accumsan dolor tincidunt vel. Aenean et elementum justo. Vestibulum malesuada nisi at efficitur viverra. Quisque eu vulputate dui. Ut accumsan urna urna, quis finibus eros pulvinar ut. In ac dolor lacus. Vivamus suscipit dapibus elit eget dapibus. Phasellus scelerisque hendrerit arcu, ac ullamcorper nisi.
[p][b]Curabitur dapibus arcu et sapien tincidunt, vitae placerat dolor auctor. Morbi in molestie odio. Maecenas consectetur dapibus nisi et accumsan. Ut sed mi ipsum. Pellentesque id feugiat magna, ac laoreet libero. Donec ultricies diam nec pulvinar viverra. Curabitur molestie purus non metus lobortis ornare. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec semper mi eu ligula sodales, vulputate accumsan elit scelerisque. Duis egestas dui sit amet leo condimentum, id dictum purus malesuada.[/b]
[p][i]Pellentesque viverra porttitor massa, non faucibus neque lacinia ultrices. Duis suscipit et quam id sodales. Etiam semper orci nunc, non cursus justo accumsan gravida. Nam in libero pulvinar, tristique ex id, sagittis metus. Duis ut nisl sed odio ullamcorper rhoncus. Nullam placerat libero eu nulla egestas elementum. Curabitur sodales neque at quam auctor, sit amet porttitor tortor posuere. Quisque eu lectus quam. Nam nulla felis, malesuada id nibh vitae, viverra maximus lorem. Nam mauris lacus, sollicitudin eget felis vitae, finibus euismod felis. Nullam quis dui ligula. Quisque porta gravida ipsum. In vitae tristique turpis.[/i]
[p][u]Nunc volutpat euismod enim, at feugiat ante semper eu. Maecenas condimentum dolor lectus, et imperdiet tortor gravida id. Aenean id velit eu felis suscipit tincidunt. Suspendisse sollicitudin, ipsum vitae porta eleifend, quam sapien tempus lacus, nec efficitur arcu metus vel turpis. Aenean quis dolor est. Vivamus dapibus nisi nec mauris finibus, nec tempus risus tempor. Curabitur sit amet mi felis. Fusce vitae nisi et purus auctor ultrices. Ut dui nunc, euismod sed varius nec, tincidunt ac dui. Maecenas faucibus eu purus ut dapibus. Sed consectetur nunc ac porta pharetra. Donec ut gravida massa. Ut iaculis massa elit, nec faucibus diam ultricies eleifend. Phasellus mollis dictum lorem vitae auctor. Sed et vulputate ipsum. Nulla convallis, risus eu rutrum ultricies, dui quam vestibulum ante, sed semper magna ligula nec libero.[/u]
[p][url=https://subeta.net/users/kenny]Etiam congue justo et vehicula condimentum. In sagittis et velit eget convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi interdum mi tortor, id lobortis felis euismod eu. Maecenas ipsum tortor, rhoncus sagittis lectus ut, gravida convallis dui. Aenean et magna commodo, porttitor arcu a, posuere tortor. Ut consequat, felis in porttitor facilisis, turpis risus posuere risus, vel rutrum ante neque in magna. Nam bibendum egestas ultrices. Aliquam sit amet accumsan ante. Vestibulum maximus convallis auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.[/url]
</div>


<div id="credits">
[p][br]<h1>credits:</h1>
[center]profile and coding by [userid=526420].
[br]custom cursors from [url=http://oficinadehtml.tumblr.com/tagged/cursores]oficinadehtml[/url].
[br]map from [url=http://legacy.lib.utexas.edu/maps/historical/shepherd/byzantine_empire_1265.jpg]here[/url].[/center]
</div>


<style>
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');

html {background:#b1892e url(https://i.imgur.com/YKMNST3.png) repeat-x;}
body {background:url(https://i.imgur.com/1lNhgZd.png) no-repeat; cursor:url('https://78.media.tumblr.com/51aa4b0cb73356472f4336df13b2fc6b/tumblr_inline_p7nrx1388N1r1shc4_75sq.png'), auto;
   width:1400px!important; height:800px!important; overflow:hidden; position: absolute;}

html,body,#page,#main-content,#content{position:static!important;}
.container-fluid {position:absolute;top:0;left:0;right:0;bottom:0;}

#content {height:auto!important; margin:0; padding:0; background-color:transparent;}
#pet_info {margin:0; width:auto;}
#page {margin:0; width:auto; background-color:transparent;}
#column_1, #column_2, #column_3 {width:auto; padding:0;}

#postcards, #menu, #sidebar, #rightbg, #bookmarks, #footer, .statbar, #column_1 h2, #column_3 h2, #pet_treasure h2, .pet_wco_info_date, .pet_age_info_date, #header, #stat_books_read, #stat_food_eaten, #pet_employment, #column_3 a, .statbar, .pet_wco_info_date, .pet_age_info_date, #pet_friends, .hustler, #cs_notice, .new-news-announcement-banner, .owner img, #pet_stats, .pet_name, #pet_image, .pet_color_info img {display: none}
#page, #header-lrc, #header-ban, #header-ban-main, #header-rrc {background: transparent}

/* fonts and colors */

td, p, body, div, a {font-family: 'Playfair Display', serif; font-weight:600; font-size:11px; color:#483b24;}
a:link, a:active, a:visited, a h3 {color:#996521;
  cursor:url('https://78.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_p7nrx1hoRW1r1shc4_75sq.png'), auto;}
a:hover, .icon.heart:hover, a h3:hover{color: #000; text-decoration:none;}
.icon.heart, .icon.heart.red {color:#8de8f7; font-size:10px;}

::-webkit-scrollbar{width:2px; border-radius:10px;}
::-webkit-scrollbar-thumb{background:#e78100;}
::-webkit-scrollbar-track{background:rgba(0,0,0,0.1);}

.hr{background: -webkit-linear-gradient(left, transparent, #b5faff, transparent);}

h1{font-size:24px!important; text-align:center; font-weight:bold; font-style:italic; font-family:'Playfair Display', serif;
    text-transform:uppercase; letter-spacing:1px; color:#835b3a; padding-bottom:3px;}
h2{font-size:14px !important; display:inline-block;
font-weight: normal}
h3{font-size: 14px !important}

/* Pet Info */

#pet_minion, .pet_spotlight {position:absolute; border-radius:20px; font-size:10px;
    width:130px; height:93px; padding-top:7px;}
#pet_minion {left:785px; top:141px;}
#pet_minion img {margin-top:4px;}
.pet_spotlight {left:965px; top:131px;}
.pet_spotlight img, #pet_minion img {width:50px; height:50px; border-radius:34px; border:1px solid #e78100;}

#story, #pet_treasure, #credits {position:fixed; top:352px; left:674px; overflow:auto; padding-right:10px;
    background-color:#f8cd7d; border-radius:0px 0px 10px 10px; scrollbar-width:thin;
    border-top:10px solid #f8cd7d; border-bottom:10px solid #f8cd7d; border-left:10px solid #f8cd7d; border-right:5px solid #f8cd7d;}
#story, #credits {width:533px; height:278px;}
#pet_treasure {width:523px; height:268px;}

.pet_color_info, .owner {position:absolute; left:1066px; width:186px;
    color:#e1b361; font-family: 'Playfair Display', serif; font-size:0px; text-align:center;}
.pet_color_info {top:283px;}
.owner {top:298px;}
.pet_color_info:before {font-size:10px; content: 'the male graveyard legeica'}
.owner:before {font-size:10px; content: 'owned by ';}
.owner a {font-size:10px; color:#e1b361;}
.owner a:hover {color:#fff;}
.pet_like {position:absolute; left:1238px; top:295px; transform: rotate(-45deg);}
.icon.heart {color:#e1b361;}

#story {z-index:2; text-align:justify;}
#pet_treasure, #credits {opacity: 0; z-index: 1}
#pet_treasure:target, #credits:target {opacity: 1; z-index: 5}

.button1, .button2, .button3 {position:absolute; top:327px; font-weight:600; font-style:italic; font-size:12px; padding:0px 5px 2px 5px; text-align:center;
    border-radius:10px; background-color:#f8cd7d; color:#4d3919; z-index:9;}
.button1 {left:834px;}
.button2 {left:904px;}
.button3 {left:997px;}
.button1:hover, .button2:hover, .button3:hover {color:#000; text-shadow:1px 1px 0px rgba(255,255,176,0.5);}

/* pet treasure item display */

.treasure_item img{padding:3px; margin:3px; width:50px; height:50px; border-radius:30px;
    background-color: #ffffff; border:1px solid #993500;}
.treasure_item{margin:3px; height:63px; width:68px}

/* transitions */

.treasure_item img, #pet_minion img, .pet_spotlight img {filter: sepia(80%);}
.treasure_item img:hover, #pet_minion img:hover, .pet_spotlight img:hover {filter: sepia(0);}

a, .icon.heart, a:hover, .icon.heart:hover, a h3, a h3:hover, .button1, .button1:hover, .button2, .button2:hover, .button3, .button3:hover, .treasure_item img, .treasure_item img:hover, #pet_minion img, .pet_spotlight img, #pet_minion img:hover, .pet_spotlight img:hover, .owner a, .owner a:hover {transition: all .6s ease-in-out}

#pet_treasure, #pet_treasure:target, #story, #credits, #credits:target {transition: all .3s ease-in-out}

</style>