/*
----- POSITIONING -----
*/
#avatarInfos {width: 100%; }
#avatarBodyContainer {width: 100%; text-align: center;}

@media only screen and (min-width: 800px) {
#avatarInfos {width: 40%; }
#avatarBodyContainer {width: 50%;}
}

/*
----- AVATARBODY -----
Responsive size of the avatar
*/
#avatarBody {
    width: calc(30px + 20vw);
    z-index: -1;
}


/*
Positions the clothing pieces on the avatar
*/

#avatarBodyContainer {
    position: relative;
}

#avatarLetterContainer {
    position: absolute;
    top: 20%;
    left: 10%;
}



#avatarLetter {
    width: calc(9px + 6vw);
}

/*
Adding the clothing
*/

.avatarExtra {
    opacity: 0;
    pointer-events: none;
    transition: opacity 2s ease-in;
}

.avatarVisible {
    opacity: 1;
    pointer-events: auto;
}



/*
----- AVATARTABLE -----
Speficies the design for the table next to the avatar-Image
*/
th, td {
    border: 1px solid;
}

.trh {
    background-color: rgb(184, 217, 232);
}

.trh:hover {
    background-color: rgb(143, 194, 218);
}

.trh.avatarVictory {
    background-color: rgb(169, 205, 221);
}

.trh.avatarVictory:hover {
    background-color: rgb(119, 175, 201);
}

.trh.avatarVictory:active {
    background-color: rgb(82, 130, 153);
}



tr {
    background-color: beige;
}

tr.evenTR {
    background-color: cornsilk;
}

tr:hover {
    background-color: blanchedalmond;
}

tr.avatarVictory {
    background-color: rgb(255, 229, 133);
}

tr.avatarVictory:hover {
    background-color: rgb(204, 178, 91);
}

tr.avatarVictory:active {
    background-color: rgb(214, 174, 72);
}