body {
     margin: 0;
     background-color: black;
     line-height: 30px;
     font-feature-settings: "kern" 1;
     color: white;
     font-family: 'Cassia', 'Times New Roman', Times, serif;
     height: 100%;
}

 html {
    height: 100%;
 }

 p {
    margin: 0;
 }

 .investigation-bg {
    z-index: -2;
 }

 .trial-bg {
     width: 100%;
     height: 100%;
     position: absolute;
     z-index: -1;
     background: linear-gradient(90deg, #800000 0%, black 15% 85%, #800000 100%);
     position: fixed;
     display: none;
}

 .text-area {
     padding: 30px 0;
     margin: auto;
     z-index: 5;
     display: grid;
     place-items: center;
}
 .trial-container {
     position: relative;
     width: 1174px;
     height: 150px;
     border-right: 0px;
     margin-bottom: 20px;
}

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

 .trial-portrait {
     display: inline-block;
     vertical-align: top;
     width: 150px;
     height: 150px;
     border: 4px solid red;
     padding-right: 200px;
     user-select: none;
     background-image: url(assets/accordion_trial_secondary.png?trialupdating);
     position: relative;

}
 .name .trial-portrait {
     background-color: #111111;
     background-image: url(assets/accordion_trial.png?trialupdating);
}
 
 .trial-container .portrait-box {
     z-index: 10;
 }

 .portrait-box {
     border: 4px solid red;
      top: -4px;
 }

.portrait-box img {
     position: relative;
     width: 150px;
     height: 150px;
     border-bottom: 0px;
     pointer-events: none;

}

.point img {
     width: 225px;
     height: 225px;
     margin-top: -75px;
     margin-left: 0px;
}


 .trial-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);
     
}


 .trial-text-area-wrapper {
     background: black;
     background-image: linear-gradient(black 0% 25%, #00000000 75%), url(assets/checkerboard_red.png?trialupdating);
     background-position: right bottom;
}
 .trial-text-area-border > .trial-text-area-wrapper {
     position: absolute;
     height: 150px;
     top: 4px;
     left: 7px;
     right: 7px;
     bottom: 4px;
     clip-path: polygon(86px 0%, 100% 0%, 690px 150px, 0% 150px);
     overflow: hidden;
}

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

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

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

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





 .narration .trial-text-area-wrapper {
    background-image: none;
 }
 .trial-textbox > .trial-text-area-wrapper {
     border: 4px solid red;
     width: 600px;
     margin: auto;
     min-height: 150px;
     margin-bottom: 12px;
}

.trial-textbox .text {
   left: 10px;
}




.trial-textbox .text {
   left: 12px;
}


.textbox-right .text {
    left: -10px;
}

.investigation-textbox-right .text {
    left: 0px;
}

.writing-box .text {
   left: 0px;
}
 
 .narration .text {
    text-align: center;
    color: #aaaaaa;
 }

 .narration {
    padding-bottom: 20px;
    font-weight: bold;
 }

 .text-highlight {
    color: #ff2222;
    -webkit-text-stroke: 3px #770000;
    paint-order: stroke fill;
 }

 .text-thinking {
    color: #6ca5fb;
 }

 .trial-nameplate-container {
     position: relative;
     top: 1px;
     left: 6px;
     z-index:0;
}

 .textbox-right .trial-nameplate-container {
     left: -6px;
}


 .textbox-right .trial-portrait, .textbox-right .portrait-box img, .textbox-right .secondary-nameplate, .textbox-right .trial-mnp-text, .textbox-right .trial-nameplate-container{
     transform: scaleX(-1);
}

 .trial-header {
     position: relative;
}
 .trial-nameplate {
     position: absolute;
     top: 4px;
     --p: 27px;
    /* control the shape (can be percentage) */
     height: 46px;
     width: 275px;
     clip-path: polygon(var(--p) 0,calc(100% - var(--p)) 0,100% 100%,0 100%);
     background: #111111;
     color: white;
     z-index: 1;
     font-family: 'Courier New', Courier, monospace;
     text-align: center;
     font-size: 20px; 
     vertical-align: middle;
}
 .trial-nameplate-border {
     --p: 24px;
    /* control the shape (can be percentage) */
     height: 42px;
     width: 275px;
     clip-path: polygon(var(--p) 0,calc(100% - var(--p)) 0,100% 100%,0 100%);
     background: #ff0000;
     z-index: 0;
}

 .mnp-phoenix:after {
     content: "Phoenix Wright";
}
 .snp-phoenix:after {
     content: "P h o e n i x";
}

 .mnp-JE:after {
    content: "JK-EX-7000"
 }
 .snp-JE:after {
     content: "J K - E X - 7 K";
}

 .mnp-junko:after {
     content: "Junko Enoshima";
}
 .snp-junko:after {
     content: "J u n k o";
}

 .snp-monokuma, .mnp-monokuma {
    color: black;
    -webkit-text-stroke: 2px #ffffff;
    paint-order: stroke fill;
    font-weight: 700;
}

 .snp-monokuma {
    -webkit-text-stroke: 1.8px #ffffff; 
 }

 .mnp-monokuma:after {
     content: "Monokuma";
}

 .snp-monokuma:after {
     content: "M o n o k u m a";
}
 .plated {
     margin-top: -42px;
}
 .trial-banner {
     position: fixed;
     top: 0;
     left: 0;
     height: 30px;
     width: 100%;
     overflow: hidden;
     z-index: 0;
     opacity: 25%;
}
 .trial-banner-bottom {
     top: auto;
     bottom: 0;
}
 .trial-banner-bottom .scroll-track {
     animation-direction: reverse;
}
 .scroll-track {
     display: flex;
     width: 3200px;
     height: 100%;
     animation: scroll-left 60s linear infinite;
}
 .banner-strip {
     width: 800px;
     height: 100%;
     background-image: url('assets/trialbanner.png?trialupdating');
}
 .image-wrapper {
     margin: auto;
     padding: 3px;
     border: 3px solid white;
}
 .image-wrapper img {
     display: block;
     max-width: 100%;
     height: auto;
}

 .bubble {
    width: 600px;
 }

 .image-container {
     --s: 20px;
    /* size of the corners */
     border: 7px solid #ff0000;
     padding: 5px;
     display: inline-block;
     max-width: 47%;
     background: #ff0000 content-box;
     mask: conic-gradient(#000 0 0) content-box, conic-gradient(at var(--s) var(--s),#0000 75%,#000 0) 0 0/calc(100% - var(--s)) calc(100% - var(--s));
     margin-bottom: 10px;
     user-select: none;
}

 .container-blue {
    border: 7px solid #007AFF;
    background: #007AFF content-box;
}

.doodle {
    width: 70%; 
    margin: auto;
    padding: 20px 0;
    z-index: 10;
}

.doodle img {
    max-width: 100%;
    margin: auto;
    display: block;
}

.cool-title {
    color: #03ED00; 
    text-align: center; 
    line-height: 1em; 
    width: 80%; 
    margin: auto; 
    background-image: 
        linear-gradient(90deg, black 0%, #00000000 40% 60%, black 100%), 
        url(assets/checkerboard_blue.png?trialupdating); 
    font-size: 2.2em;
    padding: 30px;
}

.cool-line {
    width: 100%;
    height: 4px; 
    background-image: linear-gradient(90deg, #ff000000 0%, #007AFF 30% 70%, #ff000000 100%);
}

.flashback-line {
    width: 100%;
    height: 4px; 
    background-image: linear-gradient(90deg, #ff000000 0%, red 20% 80%, #ff000000 100%);
    margin-bottom: 20px; margin-top: 9px;
}

 .flashback {
    filter: grayscale(80%) brightness(125%);
 }

 .flashback .flashback-line {
    margin-top: 29px;
 }

#special-junko-bit {
    position: relative;
}

 .special-junko {
     position: absolute;
     left: 0;
     margin-left: 280px;
     z-index: 10;
}

 .special-junko img {
     display: inline-block;
     width: 40px;
}

#special-junko-bit .secondary-nameplate {
    margin-left: 0px;
}

 .special-junko-small {
    font-size: .5em;
    line-height: 2;
 }

 .special-junko-small img {
    width: 20px;
 }

 .special-junko-text-highlight {
    font-size: 1.2em;
    color: #ff2222;
    -webkit-text-stroke: 3px #770000;
    paint-order: stroke fill;
 }


 .special-reddit {
    color: rgb(255, 208, 0);
}

 @supports (background-clip: text) {
    .special-reddit {
        background-image: linear-gradient(180deg, orange 0% 25%, rgb(255, 255, 145) 100%);
        background-clip: text;
        color: transparent;
    }
 }

 @keyframes scroll-left {
     0% {
         transform: translateX(0%);
    }
     100% {
         transform: translateX(-25%);
    }
}
 @media (prefers-reduced-motion: reduce) {
     .scroll-track {
         animation-play-state: paused;
    }
}

@keyframes redworld {
    from {opacity: 1}
    to {opacity: .5;}
}