.character-index
{
	padding: 5px;
	
	margin: 5px;
}

#character-icon 
{
    display: inline-block;

    background: darkgrey;

    width: 175px;
    height: auto;

    padding: 0;

    margin: 0;
    margin-right: 5px;
    margin-bottom: 10px;

    border-bottom: 4px solid dimgrey;
	border-right: 4px solid dimgrey;
	border-top: 2px solid white;
	border-left: 2px solid white;
}

#overlay-color
{
    display: inline-block;

    padding: 5px;

    position: absolute;
    top: -1px;
    left: -1px;
    z-index: 100;

    background-color: dimgrey;
    opacity: 50%;

    width: stretch;
    height: stretch;
}

#character-bio-div
{
    
    display: inline-block;

    position: absolute;
    z-index: 101;

    width: stretch;
    height: stretch;

    background: lightgrey;
    
    max-height: 75%;
    opacity: 100%;

    border: 2px solid white;
    border-right: 4px solid dimgrey;
    border-bottom: 4px solid dimgrey;

    margin-left: 20%;
    margin-right: 20%;
    margin-top: 5%;
    margin-bottom: 0;
}

#character-bio-title
{
    display: inline-block;

    font-size: 15pt;
    
    box-sizing: border-box;

    width: 95%;
    
    padding: 5px;

    margin: 0;

    border: 2px solid cyan;
    border-bottom: 4px solid mediumblue;
    border-right: 4px solid mediumblue;
    
    background-color: dodgerblue;
}

#character-bio-paragraph
{
    display: inline-block;

    padding-left: 5px;

    margin: 5px;
    margin-right: 0;

    width: 70%;
    height: fit-content;

    background: white;

    border: 2px solid dimgrey;
    border-right: 4px solid white;
    border-bottom: 4px solid white;

}

#character-bio-paragraph p
{
    	text-indent: 20px;
}

#exit-button
{
    font-size: 15pt;

    display: inline-block;

    box-sizing: border-box;

    text-align: center;

    width: 5%;

    padding: 5px;

    margin: 0;

    border: 2px solid pink;
    border-bottom: 4px solid darkred;
    border-right: 4px solid darkred;
    
    background-color: red;
}


#name-bar
{
    display: block;

	width: 170px;
    position: relative;
    left: -2px;
    top: -2px;
	
    text-align: left;
    font-size: 15pt;

    border-top: 2px solid cyan;
    border-left: 2px solid cyan;
    border-bottom: 4px solid mediumblue;
    border-right: 4px solid mediumblue;
	
    padding: 0;
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 5px;

	margin: 0;
	
    background-color: dodgerblue;
}

#character-image
{
    display: inline-block;
    width: 100%;
    height: 100%;

    padding: 0;

    border: 0;

    margin: 0;

    object-fit: cover;
}

#bio-side-bar
{
    display: inline-block;

    position: absolute;

    background: lightgrey;

    width: stretch;
    margin-top: 5px;

    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;


    border-left: 2px solid white;
    border-bottom: 4px solid dimgray;

}

#bio-side-bar img
{
    width: stretch;
    height: 100%;

    border: 2px solid dimgray;
    border-bottom: 4px solid white;
    border-right: 4px solid white;

    padding: 0;

    margin: 0;

    object-fit: fill;
}