I'm currently redoing my portfolio from scratch and wanted to do some ASCII art, decided to go with this design here. However, when rendered on my android phone, I get this mess. As you can see, lines with more spaces have larger deviations that drag the characters to the left. For some reason, chrome on android is rendering the spaces to be smaller than they look on desktop. Is there any way I can fix this?

Here's the CSS:

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&display=swap');

body {
    background: rgba(0,30,25,1);

    font-family: 'JetBrains Mono', 'Courier New', Courier, monospace;
    color: rgba(0,230,255,1);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

body::-webkit-scrollbar {
  display: none;
}

.asciiArt {
    font-size: 18px;
    white-space: pre;
    word-break: normal;
    line-height: 0.5;
}

And here's the HTML:

         
▄▄                                                                           

██⠀         ▀▀                                                               

████▄ ████▄ ██   ▀▀█▄ ████▄    ▀▀█▄ ▀▀▀██  ▀▀█▄ ████▄ ████▄  ▀▀█▄ ▄████  ▀▀█▄

██ ██ ██ ▀▀ ██  ▄█▀██ ██ ██   ▄█▀██   ▄█▀ ▄█▀██ ██ ▀▀ ██ ▀▀ ▄█▀██ ██ ██ ▄█▀██

████▀ ██    ██▄ ▀█▄██ ██ ██   ▀█▄██ ▄██▄▄ ▀█▄██ ██    ██    ▀█▄██ ▀████ ▀█▄██

                                                                     ██      

backend development, remote sensing, embedded systems              ▀▀▀