SWDB/public/css/home.css

article#profile{
    text-align: center;
}

article#profile h3 span#user_name{
    font-size: 160%;
    font-weight: bold;
    display: block;
}

article#profile h3 span#user_level{
    font-size: 100%;
}

article#profile h3 span#user_level span#user_exp{
    font-style: italic;
    font-weight: normal;
}

article#profile div.profile_section{
    border: 0.2em solid var(--ui-color-border);
    max-width: 45%;
    margin: 0.5em;
    padding: 0 0.5em 0.5em 0.5em;
    border-radius: 0.5em;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    background-color: #00000033;
}
@media screen and (max-width : 990px){
    article#profile div.profile_section{
        display: block;
        margin: 0.5em auto;
        max-width: 95%;
        width: 95%;
    }
}

article#profile div.profile_section h4{
    margin: 0 -0.5em 0.5em -0.5em;
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
    padding: 0.2em;
    border-bottom: 0.1em solid var(--ui-color-border);
    background-color: #00000033;
}

article#profile div#rep div.monster_panel{
    font-size: 50%;
    margin: 0.2em;
}
@media screen and (max-width : 990px){
    article#profile div#rep div.monster_panel{font-size: 70%;}
}

article#profile div#defense{
    position: relative;
}

article#profile div#defense div.monster_panel{
    font-size: 50%;
    margin: 0.2em;
}

article#profile div#defense div.skill{
    position: absolute;
    left: 0.2em;
    top: 4em;
}
article#profile div#defense div.skill img{
    width: 1.5em;
    height: 1.5em;
}

article#profile div#building div.building_panel{
    display: inline-block;
    width: 2em;
    height: 2em;
    margin: 0.2em 0em;
    position: relative;
    border-radius: 15%;
    vertical-align: middle;
}

article#profile div#building div.building_panel img.building, img.decoration{
    width: 2em;
    height: 2em;
    border-style: solid;
    border-width: 0.1em;
    border-radius: 15%;
}

article#profile div#decoration div.building_panel{
    display: inline-block;
    width: 2em;
    height: 2em;
    margin: 0.2em 0em;
    position: relative;
    border-radius: 15%;
    vertical-align: middle;
}

article#profile div#decoration div.building_panel img.building, img.decoration{
    width: 2em;
    height: 2em;
    border-style: solid;
    border-width: 0.1em;
    border-radius: 15%;
}

article#profile div#decoration div.building_panel span.level{
    position: relative;
    bottom: 1.6em;
    font-weight: bold;
    color: #000;
    text-shadow: 0 0 0.1em #fff, 0 0 0.2em #fff, 0 0 0.4em #fff, 0 0 0.4em #fff;
    bottom: 1.4em;
    z-index: 1;
    font-size: 1em;
    display: block;
    text-align: right;
    pointer-events: none;
}


article#profile div.inventory div.item_panel{
    display: inline-block;
    width: 2em;
    height: 2em;
    margin: 0.2em 0em;
    position: relative;
    border-radius: 15%;
    vertical-align: middle;
}

article#profile div.inventory div.item_panel img.item{
    width: 2em;
    height: 2em;
    border-style: solid;
    border-width: 0.1em;
    border-radius: 15%;
}

article#profile div.inventory div.item_panel span.amount{
    position: relative;
    font-weight: bold;
    color: #000;
    text-shadow: 0 0 0.1em #fff, 0 0 0.2em #fff, 0 0 0.4em #fff, 0 0 0.4em #fff;
    font-size: 0.8em;
    bottom: 1.6em;
    z-index: 1;
    display: block;
    text-align: right;
    pointer-events: none;
}

article#profile div#currency{
    text-align: left;
}

article#profile div#currency ul{
    column-count: 2;
}


article#profile div#currency ul li img{
    height: 1.2em;
    width: 1.2em;
    vertical-align: middle;
}