.dialoguebox {
    --dialoguebox-border-URL: url("/assets/img/interactables/dialogue\ box\ border.png");

    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    font-size: 1rem;
    overflow-x: hidden;
    overflow-y: auto;
    padding: .5rem;

    border-image-source: var(--dialoguebox-border-URL);
    border-image-slice: 40%;
    border-image-width: 9px;
    border-image-outset: 4px;
    border-image-repeat: stretch;

    background: linear-gradient(#CFCFCF, #EEEEEE);
}

/* Preload border image. */
/* https://stackoverflow.com/questions/1373142/how-to-preload-css-images */
body::after {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    z-index: -1;
    /* hide images */
    content: var(--dialoguebox-border-URL);
    /* load images */
}