Site Title Randomizer

I wanted ASCII art for my title but couldn't choose which one to use so I decided on a randomizer(ish) javascript.

So I started by creating an array(Line 1) with const titles = new Array (); with each ASCII title in an index (0-4). To keep the title from being a jumbled mess add \n for a new line. When using the backslash \ for the first title I had to add another backslash after each one. The backslash is an escape character so adding one after each one was a simple fix. After creating the array of titles, I used a simple one line randomizer with var i = Math.floor(5*Math.random()) and then use i as the index for the array titles and tie it to the zerotitle id tag document.getElementById("zerotitle").innerHTML = document.write(titles[i]);. I call this tag in the HTML which you can view in the page source. The titles kept aligning to the left of the page. The text-align: center property was not being inherited from the parent tag so I had to add the property to the title class in the main CSS file.

title.js

const titles = new Array ();
titles[0] = '<a class="title" style="font-size: .60em" href="index.html">\n' +
'<pre>\n' +
' ________    _______   _______     ______    ____    _______   _______  _________  \n' +
'("      "\\  /"     "| /"      \\   /    " \\  /  " \\  /" __   ) /" __   )("       "\\ \n' +
' \\___/   :)(: ______)|:        | // ____  \\/__|| | (__/ _) ./(__/ _) ./ \\___/   :/ \n' +
'   /  ___/  \\/    |  |_____/   )/  /    ) :)  |: |     /  //     /  //     /   //  \n' +
'  //  \\__   // ___)_  //      /(: (____/ //  _\\  |  __ \\_ \\\\  __ \\_ \\\\   __\\  ./   \n' +
' (:   / "\\ (:      "||:  __   \\ \\        /  /" \\_|\\(: \__) :\\(: \\__) :\\ (:  \\_/ \\  \n' +
'  \\_______) \\_______)|__|  \\___) \\"_____/  (_______)\\_______) \\_______)  \\_______) \n' +
'                                                                                   \n' +
'\n' +
'</pre>\n' +
'</a>';

titles[1] = '<a class="title" style="font-size: .65em" href="index.html">\n' +
'<pre>\n' +
'\n' +
'▒███████▒▓█████  ██▀███   ▒█████  \n' +
'▒ ▒ ▒ ▄▀░▓█   ▀ ▓██ ▒ ██▒▒██▒  ██▒\n' +
'░ ▒ ▄▀▒░ ▒███   ▓██ ░▄█ ▒▒██░  ██▒\n' +
'  ▄▀▒   ░▒▓█  ▄ ▒██▀▀█▄  ▒██   ██░\n' +
'▒███████▒░▒████▒░██▓ ▒██▒░ ████▓▒░\n' +
'░▒▒ ▓░▒░▒░░ ▒░ ░░ ▒▓ ░▒▓░░ ▒░▒░▒░ \n' +
'░░▒ ▒ ░ ▒ ░ ░  ░  ░▒ ░ ▒░  ░ ▒ ▒░ \n' +
'░ ░ ░ ░ ░   ░     ░░   ░ ░ ░ ░ ▒  \n' +
'  ░ ░       ░  ░   ░         ░ ░  \n' +
'░                                 \n' +
'</pre>\n' +
'</a>';

titles[2] = '<a class="title" style="font-size: .65em" href="index.html">\n' +
'<pre>\n' +
'\n' +
'\n' +
'███████╗███████╗██████╗  ██████╗  ██╗██████╗ ██████╗ ███████╗\n' +
'╚══███╔╝██╔════╝██╔══██╗██╔═══██╗███║╚════██╗╚════██╗╚════██║\n' +
'  ███╔╝ █████╗  ██████╔╝██║   ██║╚██║ █████╔╝ █████╔╝    ██╔╝\n' +
' ███╔╝  ██╔══╝  ██╔══██╗██║   ██║ ██║ ╚═══██╗ ╚═══██╗   ██╔╝ \n' +
'███████╗███████╗██║  ██║╚██████╔╝ ██║██████╔╝██████╔╝   ██║  \n' +
'╚══════╝╚══════╝╚═╝  ╚═╝ ╚═════╝  ╚═╝╚═════╝ ╚═════╝    ╚═╝  \n' +
'                                                             \n' +
'\n' +
'</pre>\n' +
'</a>';

titles[3] = '<a class="title" style="font-size: .47em" href="index.html">\n' +
'<pre>\n' +
'\n' +
'\n' +
' ▄▄▄▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄▄▄▄▄     ▄▄▄▄      ▄▄▄▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄▄▄▄▄ \n' +
'▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌  ▄█░░░░▌    ▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌\n' +
' ▀▀▀▀▀▀▀▀▀█░▌▐░█▀▀▀▀▀▀▀▀▀ ▐░█▀▀▀▀▀▀▀█░▌▐░█▀▀▀▀▀▀▀█░▌ ▐░░▌▐░░▌     ▀▀▀▀▀▀▀▀▀█░▌ ▀▀▀▀▀▀▀▀▀█░▌ ▀▀▀▀▀▀▀▀▀█░▌\n' +
'          ▐░▌▐░▌          ▐░▌       ▐░▌▐░▌       ▐░▌  ▀▀ ▐░░▌              ▐░▌          ▐░▌         ▐░▌ \n' +
' ▄▄▄▄▄▄▄▄▄█░▌▐░█▄▄▄▄▄▄▄▄▄ ▐░█▄▄▄▄▄▄▄█░▌▐░▌       ▐░▌     ▐░░▌     ▄▄▄▄▄▄▄▄▄█░▌ ▄▄▄▄▄▄▄▄▄█░▌        ▐░▌  \n' +
'▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌▐░▌       ▐░▌     ▐░░▌    ▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌       ▐░▌   \n' +
'▐░█▀▀▀▀▀▀▀▀▀ ▐░█▀▀▀▀▀▀▀▀▀ ▐░█▀▀▀▀█░█▀▀ ▐░▌       ▐░▌     ▐░░▌     ▀▀▀▀▀▀▀▀▀█░▌ ▀▀▀▀▀▀▀▀▀█░▌      ▐░▌    \n' +
'▐░▌          ▐░▌          ▐░▌     ▐░▌  ▐░▌       ▐░▌     ▐░░▌              ▐░▌          ▐░▌     ▐░▌     \n' +
'▐░█▄▄▄▄▄▄▄▄▄ ▐░█▄▄▄▄▄▄▄▄▄ ▐░▌      ▐░▌ ▐░█▄▄▄▄▄▄▄█░▌ ▄▄▄▄█░░█▄▄▄  ▄▄▄▄▄▄▄▄▄█░▌ ▄▄▄▄▄▄▄▄▄█░▌    ▐░▌      \n' +
'▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌▐░▌       ▐░▌▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌   ▐░▌       \n' +
' ▀▀▀▀▀▀▀▀▀▀▀  ▀▀▀▀▀▀▀▀▀▀▀  ▀         ▀  ▀▀▀▀▀▀▀▀▀▀▀  ▀▀▀▀▀▀▀▀▀▀▀  ▀▀▀▀▀▀▀▀▀▀▀  ▀▀▀▀▀▀▀▀▀▀▀     ▀        \n' +
'                                                                                                        \n' +
'\n' +
'\n' +
'</pre>\n' +
'</a>';

titles[4] = '<a class="title" style="font-size: .55em" href="index.html">\n' +
'<pre>\n' +
'\n' +
'\n' +
'::::::::: :::::::::: :::::::::   ::::::::    :::   ::::::::   ::::::::  ::::::::::: \n' +
'     :+:  :+:        :+:    :+: :+:    :+: :+:+:  :+:    :+: :+:    :+: :+:     :+: \n' +
'    +:+   +:+        +:+    +:+ +:+    +:+   +:+         +:+        +:+        +:+  \n' +
'   +#+    +#++:++#   +#++:++#:  +#+    +:+   +#+      +#++:      +#++:        +#+   \n' +
'  +#+     +#+        +#+    +#+ +#+    +#+   +#+         +#+        +#+      +#+    \n' +
' #+#      #+#        #+#    #+# #+#    #+#   #+#  #+#    #+# #+#    #+#     #+#     \n' +
'######### ########## ###    ###  ########  ####### ########   ########      ###     \n' +
'\n' +
'\n' +
'</pre>\n' +
'</a>';

var i = Math.floor(5*Math.random())

document.getElementById("zerotitle").innerHTML = document.write(titles[i]);