.char,
.Boss{
    padding-top: 1%;
    margin-top: 20px;
    margin-left: 1%;
    margin-right: 1%;
    text-align: center;
    border-radius: 10px;
    background-color: #95BDFF;/*Gainsboro*/
    box-shadow: 5px 5px 32px 2px rgba(0,0,0,0.4);
}
/*------------------------------------*/
.char span#color img#element{
    width: 32px;
    height: 32px;
    float: left ;
    position: absolute ;
    top: 3px;
    left: 3px;
    z-index: 2;
}

.char span#color img,
.boss img{
    height: 130px;
    width: 133px;
    position: relative;
    z-index: 1;
}

.char span#color img#five-star{
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../image/Character/bg/Background_Item_5_Star.png);
    border-radius: 16px 16px 28px 0px;
}
.char span#color img#four-star{
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../image/Character/bg/Background_Item_4_Star.png);
    border-radius: 16px 16px 28px 0px;
}
.boss img{
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../image/Character/bg/Background_Item_5a_Star.webp);
    border-radius: 16px 16px 28px 0px;
}

.char .box span#color{
    padding-top: 95%;
    padding-bottom: 0px;    
    border-radius: 16px 16px 0px 0px;
    margin-bottom: 0;
}
.char .box,
.boss.box{ 
    display: grid;
    display: inline-table;
    padding-top: -5%;
    margin-top: 1%;
    background-color: #e2eff1;
    cursor: pointer;
    scale: 100%;
    border-radius: 16px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 15px;
    transition: all .2s ease-in-out;
}

.char .box:hover,
.boss.box:hover{
    scale: 106%;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, 
    rgba(0, 0, 0, 0.12) 0px -12px 30px, 
    rgba(0, 0, 0, 0.12) 0px 4px 6px, 
    rgba(0, 0, 0, 0.17) 0px 12px 13px, 
    rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.char .box h1,
.boss h1{
    color: #000;
    font-size: 17px;
    margin-left: 0px;
    margin-top: 5px;
    margin-bottom: 15px;
    text-align: center;
    height: 10px;
}

/*------------------------------------*/

.boss h1{
    font-size: 15px;
}

.displaycharacter button,
.displayboss button,
.selectall_char button,
.unselectall_char button,
.selectall_boss button,
.unselectall_boss button,
.random_again button{
    color: #e2eff1;
    background-color: #2CD3E1;
    border-radius: 8px;
    border: none;
    margin-top: 1.5%;
    margin-left: 1.5%;
    padding-left: 0.5%;
    padding-right: 0.7%;
    cursor: pointer;
    transition: all .2s ease-in-out;
}
.displaycharacter button:hover,
.displayboss button:hover,
.selectall_char button:hover,
.selectall_boss button:hover{
    background-color: #00FFAB;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, 
    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, 
    rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.unselectall_char button:hover,
.unselectall_boss button:hover{
    background-color: #FF1700;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, 
    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, 
    rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}


.random_again button{
    padding-top: 0;
    padding-bottom: 0;
}

.displaycharacter h1,
.displayboss h1,
.selectall_char h1,
.unselectall_char h1,
.selectall_boss h1,
.unselectall_boss h1,
.return h1,
.random_again h1{
    display: inline-block;
    margin: 0px;
}

.random_again h1{
    margin-top: 2%;
    margin-bottom: 2%;
}

.displaycharacter i,
.displayboss i{
    display: inline-block;
    font-size: 1.3rem;
}

.detect{
    display: inline-block;
}