stormy

add any description you want here

coding by [user=purring]


<style>
:root{
     --background:#222524;
     --primary-light:#00a8c0;
     --primary-dark:#2d305b;
     --text:#dfdcdc;
}

/* use below line if your pet has a long job name */
/* #pet_employment a{font-size:30px;line-height:25px;} */


 #header,#menu,#bookmarks,#sidebar,#page > a,#notice,.pet_wco_info_date,#pet_friends,#column_1 h2,#column_1 h2 + br{
    display:none;
}
 #main-content{
    background:transparent;
    text-transform:lowercase;
    color:var(--text);
}
 a,a:link,a:visited,a:active,a.hover-user,.pet_name,a:hover{
    color:var(--primary-light);
}
 a.hover-user{
    font-weight:bold;
}
 .legacy-name{
    color:var(--text)!important;
}
 #page{
    width:100%;
    margin:0!important;
}
 #content{
    padding:0;
    overflow:initial!important;
    background:transparent;
}
 #pet_info{
    width:875px;
    display:grid;
    position:relative;
    top:50px;
}
 #column_2{
    grid-area:1/1/2/2;
    width:480px;
    height:200px;
    text-align:left;
    margin:0 auto 50px;
    background:var(--primary-dark);
    position:relative;
    left:143px;
    padding:30px 50px;
}
 #pet_image{
    position:absolute;
    top:0;
    left:-285px;
    background-repeat:no-repeat;
    background-position:center;
    background-color:var(--primary-light);
    padding:29px;
}
 h1{
    line-height:17px;
}
 .pet_spotlight{
    display:none;
}
 #column_2{
    display:flex;
    flex-wrap:wrap;
    align-content:center;
}
 #column_2 h1,#column_2 span,#column_2 p{
    width:100%;
}
 #column_2 *{
    margin:0;
}
 #column_2 h1{
    padding-bottom:10px;
}
 .pet_like{
    padding-top:10px;
}
 #column_3{
    grid-area: 2/1/3/2;
    width:100%;
    padding:0;
    font-weight:bold;
}
 #column_3 h2{
    text-align:center;
    text-transform:uppercase;
    margin-bottom:25px;
}
 #column_3 h2 + br{
    display:none;
}
 #pet_stats{
    display:block;
    width:875px;
    height:450px;
    margin:auto;
    position:relative;
    text-align:center;
}
 #pet_stats li{
    width:200px;
    height:75px;
    margin:0 25px 25px 0;
    display:inline-flex;
    vertical-align:top;
    position:relative;
    z-index:1;
    align-items:center;
    justify-content:center;
    align-content:center;
}
 #pet_stats li:nth-of-type(4n){
    margin-right:0;
}
 #pet_stats li:before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    background:var(--primary-dark);
    width:100%;
    height:100%;
    z-index:-1;
}
 #pet_stats .statbar{
    position:absolute;
    top:0;
    left:0;
    margin:0;
    border:0;
    width:100%;
    height:100%;
    z-index:-1;
}
 #pet_stats .stat{
    height:100%;
    background:var(--primary-light);
}
 #stat_books_read,#stat_food_eaten,#pet_employment{
    position:absolute!important;
    display:block;
    width:33%!important;
    margin:0!important;
    height:200px!important;
    flex-wrap:wrap;
    font-size:11px;
}
 #stat_books_read{
    left:0;
    top:225px;
}
 #stat_food_eaten{
    left:33%;
    top:225px;
}
 #stat_food_eaten:before{
    background:var(--primary-light)!important;
}
 #pet_employment{
    left:66%;
    top:225px;
}
 #stat_books_read a,#stat_food_eaten a,#pet_employment a{
    display:block;
    width:100%;
    font-size:50px;
    line-height:42px;
    height:55px;
}
 #stat_food_eaten a{
    color:var(--primary-dark);
}
 #column_1{
    position:absolute;
    right:80px;
    top:60px;
    z-index:4;
    padding:0;
}
 #column_1 img{
    padding:10px;
    border-radius:100%;
}
 #pet_desc{
    width:600px;
    margin:0 auto 50px;
    text-transform:initial;
}
 #pet_treasure{
    display:block;
    text-align:center
}
 #pet_treasure h2{
    text-transform:uppercase;
    margin-bottom:25px;
}
 .treasure_item{
    background:var(--primary-dark);
    padding:25px;
    margin:0 25px 25px 0;
    display:inline-block;
    float:none!important
}
 .treasure_item:nth-of-type(2n){
    background:var(--primary-light);
}
 body{
    background:var(--background);
}

</style>