body{
font-family: 'ms pgothic', sans-serif;
letter-spacing:.5px;
font-size:15px;
line-height:20px;
background-color: #6bffca;
background-blend-mode: soft-light;
}

    a{
        background-color: #EC77A9;
        color: #fff;
    }

    a:hover{
    color:#fff;
    background:#DD9EFF; 
    }

.holdbox{
        background-color: #10a072;
        border-color: #fff;
        border-radius: 10px;
        padding: 10px;
        background: rgba(7, 48, 100, 0.7);
        overflow: auto;
        }
    
    
.charbox, .descbox{
        width: 520px;
        border:solid;
        background-color: #9DF4EC;
        color: #000;
        border-radius: 10px;
        border-color: #EC77A9;
        margin:5px;
        padding:16px;
        padding-top:0px;
        width: 600px;
}

.charbox{
        display: inline-table;
        height: 300px;
    }

.descbox
{
    display:block;
    float:left;
    height: 630px;
}

.charbox img{border-radius: 30px; margin: 10px;}

    .rightImg{
        float: right;
    }
    
    .leftImg{
        float: left;
        padding-right: 10px;
    }
    
    .charbox img:hover{
        animation-name: hoverimage;
        animation-duration: 1s;
        animation-fill-mode: forwards
        
    }
    
    @keyframes hoverimage{
        0% {mix-blend-mode: exclusion;}
        100% {width:201px; mix-blend-mode: exclusion; box-shadow: 5px 10px;}
    }



/*MOBILE STYLES YAY*/

@media all and (max-width: 799px)
{
    
.charbox, .holdbox, .descbox{
top:0px;
width: 95%;
float: none;
margin:1%;
padding:1%;
}
    
img{
max-width:100%;
}

}