body {background: #222;}



h1,h2,h3,h4,h5 {margin: 0;}

:root {
    --default:#a02e2e;
    --defaultDark:#672626;
    --defaultRGB:160, 46, 46;
}

.character-post { background: #111; width: 646px; padding: 50px; margin: 0 auto;}
.character-post-inside {border: rgba(255,255,255, 0.1) solid 1px; padding: 10%; position: relative;}
/* .character-post-inside .character-box{display: block; color: #111; background: rgba(--defaultRGB)0.5; width: 55px; font: 55px/100% benchNine; padding: 15px 10px; position: absolute; right: 50px; top: 50px;}*/
.character-post-inside h5 { color: var(--default); font: bold 12px Rubik; letter-spacing: 1px; display: inline-block; border: rgba(var(--defaultRGB),0.9) solid 2px; padding: 3px 5px;}
.character-post-inside h1 { font: bold 40px/100% Bodoni Moda; color: #ccc; text-transform: uppercase; margin: 50px 150px 30px 0; position: relative; z-index: 1;}
.character-post-inside p { color: #999; font: 12px/150% Rubik; text-align: justify; margin: 30px 0 0;}
.character-post-inside p b {color: var(--default); font:400px 18px Rubik;}
.character-post-inside p i {font: italic 14px Bodoni Moda; color: var(--default);}
.character-post-inside h3 { color: var(--default); font: italic 20px Bondoni Moda; margin: 40px 0 20px;}
.character-post-inside h3 span {border-bottom: rgba(255,255,255, 0.4) solid 2px;}
#aru { background-image: url(Aru_Sprite.webp); height: 200px; width: 350px; top: -1px; right: 2px; transform: scale(1.1); position: absolute; z-index: 2; filter: opacity(80%);}
.skills { display: flex; flex-flow:row wrap; justify-content: space-evenly; align-items: center;}
.skills, .skill {display: block; display: flex; margin: 10px; letter-spacing: 1px; text-align: center; max-width: auto;}
/*.skills .skill img { margin: 35px 35px; padding: 5px; width: 50px; height: 50px; transform: scale(0.9); position: absolute; } */
.skill h1 { font: 10px/100% Rubik;}