#mainContainer {
    width: 70%;
    height: auto;
    font-family: Trebuchet MS, arial, verdana, sans-serif;
}
#characterContainer{
    width:100%;
    overflow:auto;
    border-top:dotted black 1px;
    border-bottom:dotted black 1px;
    padding-top:5px;
    padding-bottom:5px;
    position:relative;
    display:flex;
}
#characterImage{
    position:relative;
    top:0px;
    width: 20%;
    max-width:75px;
    height:75px;
    border:solid 1px black;
}
#characterText{
    max-height:60px;
    margin-left:10px;
}
#characterText h3,p{
    margin-top:0px;
    margin-bottom:0px;
}
#characterText p {
    font-size: 12px;
}
#skillsContainer{
    width: 100%;
    display:flex;
    flex-wrap: wrap;
}
#skillsContainer .first{
    padding-right:5%;
}
.skillsContainer{
    width:46%;
    height:auto;
    padding-top:20px;
}
.skillsContainer p,span{
    font-size:12px;
}
.mainPart{
    width:100%;
    overflow:auto;
    word-wrap: break-word;
    border-top:dotted 1px black;
    border-bottom:dotted 1px black;
    padding-top:5px;
    padding-bottom:5px;
}
.skillsContainer h5{
    margin-bottom:0px;
}
.skillImage{
    width:75px;
    height:75px;
    border:solid black 1px;
    float:left;
    margin-right:5px;
}
.cooldownAndCost{
    width:100%;
    display:flex;
}
.energy{
    text-align:right;
    flex:1;
}
.energy img{
    width:8px;
    height:8px;
    border:1px solid black;
}