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

 .investigation-container {
     position: relative;
     width: 1174px;
     height: 150px;
     border-right: 0px;
     margin-bottom: 20px;
}
 .investigation-portrait {
     display: inline-block;
     vertical-align: top;
     width: 150px;
     height: 150px;
     border: 4px solid #007AFF;
     padding-right: 200px;
     user-select: none;
     background-image: url(assets/accordion_secondary.png);
     position: relative;
}
 .name .investigation-portrait {
     background-color: #111111;
     background-image: url(assets/accordion.png);
}
 
 .investigation-portrait .portrait-box {
    border: 4px solid #007AFF; z-index: 10; top: -4px;
 }



 .investigation-text-area-border {
     z-index: 4;
     position: relative;
     display: inline-block;
     vertical-align: top;
     width: 690px;
     height: 150px;
     background-color: #007AFF;
     left: -124px;
     background-image: linear-gradient(black 0% 25%, #00000000 75%), url(assets/checkerboard_blue.png);
     background-position: right bottom;
     border: 4px solid #007AFF;
     
}

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

 .textbox-right .investigation-text-area-border {
     left: 238px;
}

.textbox-right .investigation-portrait {
    float: right;
}
 
 .narration .investigation-text-area-wrapper {
    background-image: none;
 }

 .textbox > .investigation-text-area-border {
     border: 4px solid #007AFF;
     width: 600px;
     margin: auto;
     min-height: 150px;
     margin-bottom: 12px;
     height: 100%;
     left: 0;
}



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

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

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




 .investigation-header {
     position: relative;
}
 .investigation-nameplate {
     position: absolute;
     top: 4px;
     margin-left: 10px;
     height: 46px;
     width: 206px;
     background: #111111;
     color: white;
     z-index: 3;
     font-family: 'Courier New', Courier, monospace;
     text-align: center;
     font-size: 20px; 
     vertical-align: middle;
}
 .investigation-nameplate-border {
     height: 42px;
     width: 214px;
     background: #007AFF;
     z-index: 2;
     margin-left: 6px;
}

.investigation-mnp-text {
     margin: 4px;
}




 .image-container {
     --s: 20px;
    /* size of the corners */
     border: 7px solid #007AFF;
     padding: 5px;
     display: inline-block;
     max-width: 47%;
     background: #007AFF 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;
}

.cool-title {
    color: #007AFF; 
    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); 
    font-size: 2.5em;
}

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

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

 .button-container > .nav {
    border: 4px solid #007AFF;
    margin: 0 5px;
}