/* Base traits for all elements. */
* {
    font-family: 'Philosopher', sans-serif;
    color: #FFF;
}

/* Set color for main tags */
a, b, h1, h2, h3, h4, h5, h6 {
    color: #DD0;
}

/* Center all headers */
h1, h2, h3, h4, h5, h6 {
    text-align: center;
}

/* Background color for entire page */
body {
    background-color: #2b2b2b;
} 

/* Banner image div */
#eseria-banner-div {
    text-align: center;
    width: 100vw;
}

/* Banner image */
#eseria-banner-img { 
    width: 60vw;
    text-align: center;
}

/* Game info panel */
#gameinfo {
    padding: 2em;
    border-radius: 1em; 
    border: 3px solid #DD0;
    width: 60vw;
    background-color: #3b3b3b;
    margin: auto;
    text-align: left;
}

#gameinfo-header-main {
    text-align: center;
    border-bottom: 4px solid #DD0;
}

/* Character header */
#main-char-header {
    border-bottom: 4px solid #DD0;
}

/* Character name span */
.char-name {
    color: #FFA;
}

/* "Subject to change" disclaimer */
.disclaimer {
    font-style: italic;
    font-size: 12pt;
    color: #888;
}

/* Character info divider */
.character-div {
    width: 100%;
    margin-bottom: 2em;
}

/* Character name in info div */
.character-div-name {
    text-align: left;
    border-bottom: 1px solid #DD0;
    font-size: 2em;

    margin-bottom: 2px;
    margin-top: 2px;
}

/* Character description in info div */
.character-div-text {
    width: calc(100% - (128px + 16px));
    display: inline-block;
}

/* Character image divider*/
.character-div-image {
    width: 130px;
    display: inline-block;
}

.character-div-content {
    margin-top: 2px;
    margin-bottom: 2px;
}

/* Character image */
.character-div-image > img  {
    width: 128px;
    height: 128px;
    /* Nearest Neighbor scaling */
    image-rendering: pixelated;
    /*
    border: 1px solid #DD0;
    border-radius: 4px; 
    */
}

#banner-name {
    font-size: 2em;
}