.ccc-text-area-border {
     z-index: 4;
     position: relative;
     display: inline-block;
     vertical-align: top;
     width: 790px;
     height: 158px;
     background-color: red;
     left: -182px;
     clip-path: polygon(90px 0px, 790px 0px, 700px 158px, 0px 158px);
     
}


 .ccc-text-area-wrapper {
    background-image: url(assets/ccc.png);
    border: 0px solid #eaeaea;
    border-bottom: 8px solid #eaeaea;
    clip-path: polygon(86px 0%, 100% 0%, 690px 150px, 86px 150px);
}
 .ccc-text-area-border > .ccc-text-area-wrapper {
     position: absolute;
     height: 150px;
     top: 4px;
     left: 7px;
     right: 7px;
     bottom: 4px;
     clip-path: polygon(86px 0%, 100% 0%, 690px 150px, 86px 150px);
     overflow: hidden;
}




.ccc-textbox .text {
    font-family: 'Seurat Pro DB';
    font-size: 18px;
    left: 20px;
}

.ccc-textbox-right .text {
    left: -14px;
}




.ccc-textbox .ccc-text-area-border {
    clip-path: polygon(88px 0px, 790px 0px, 700px 158px, 88px 158px);
    background-color: #eaeaea;
}

.ccc-textbox .investigation-text-area-wrapper {
    font-family: 'Seurat Pro DB';
}

.ccc-textbox .trial-nameplate-border {
    clip-path: polygon(8px 0,calc(100% - var(--p)) 0,100% 100%, 8px 100%);
    background-color: #eaeaea;
}


.textbox-right .trial-portrait-box {
        padding-left: 0px;
        margin-right: 24px;        
}

.textbox-right .ccc-text-area-border {
     left: 202px;
     clip-path: polygon(calc(100% - 90px) 0%, 0% 0%, 90px 100%, calc(100% - 90px) 100%);
}

.textbox-right .ccc-text-area-border .ccc-text-area-wrapper {
     position: absolute;
     top: 4px;
     left: 7px;
     right: 7px;
     bottom: 4px;
     clip-path: polygon(calc(100% - 88px) 0%, 0% 0%, 90px 100%, calc(100% - 88px) 100%);
     overflow: hidden;
}

.textbox-right .trial-portrait {
    float: right;
}

.ccc-textbox .trial-nameplate {
    clip-path: polygon(12px 0,calc(100% - var(--p)) 0,100% 100%, 12px 100%);
    background-color: #eaeaea;
    color: black;
    font-family: 'Ace Futurism';
    font-size: 30px;
    margin-top: -4px;
}

.ccc-textbox .secondary-nameplate {
    font-family: 'Ace Futurism';
    background-color: #eaeaea;
    color: black;
    font-size: 20px;
    opacity: 100%;
    line-height: .9;
    font-weight: bold;
}

.ccc-textbox .investigation-portrait {
    border: 4px solid #eaeaea;
    background: none;
    background: linear-gradient(90deg, #eaeaea 25px, #111 25px 100%);
}

.ccc-textbox .portrait-box {
    border: 4px solid #eaeaea;
}


.ccc-textbox .mnp-monokuma {
    color: black;
    -webkit-text-stroke: 0px;
    font-weight: normal;
}

 .ccc-textbox .snp-monokuma {
    -webkit-text-stroke: 0; 
 }

 .ccc-narration {
    font-family: 'Seurat Pro DB', sans-serif; font-weight: normal; font-size: 20px;
 }

 .breakdown .text {
    font-family: 'Seurat Pro DB', sans-serif;
    font-weight: normal;
    font-size: 30px;
    text-align: center;
    padding: 2em;
    padding-bottom: 2.4em;
    color:#A1A6B2;
    line-height: 1em;
 }

@font-face {
     font-family: 'Seurat Pro DB';
     src: url('./assets/FOT-SeuratPro-DB-2.woff') format('woff');
     src: url('./assets/FOT-SeuratPro-DB-2.woff2') format('woff2');
     font-weight: normal;
     font-style: normal;
}

@font-face {
   font-family: 'Ace Futurism';
   src: url('./assets/Ace\ Futurism.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'Curlz MT';
   src: url('./assets/Curlz\ MT.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}