index.html

<link href="https://fonts.googleapis.com/css2?family=Skranji&display=swap" rel="stylesheet">

<style>
    body {
        font-family: 'Skranji', cursive;
        background: #fff4e3;
        text-align: center;
    }
    h1 {
        margin-top: 1.5em;
        margin-bottom: 10px;
    }
    .container {
        width: 800px;
        margin: 0 auto;
    }
    @media screen and (max-width: 900px) {
        .container {
            width: 90%;
        }
    }
    canvas {
        width: 100%;
        display: block;
        margin: 40px auto;
        margin-bottom: 20px;
    }
    .button-container {
        display: inline-flex;
    }
    .button {
        padding: 0.5em 1em;
        font-size: 1.5em;
        background: #3F4045;
        color: #FFF4E3;
        border: 1px solid #3F4045;
        border-radius: 5px;
        display: block;
        width: 4em;
        margin: 0 1em;
        cursor: pointer;
        text-decoration: none;
    }
    .button:hover {
        background: none;
        border: 1px solid #3F4045;
        color: #3F4045;
    }
</style>
<h1> RunicJs </h1>
<subtitle>Generate rune tablets</subtitle>
<div class="container">
    <canvas id="canva"></canvas>
    <div class="button-container">
        <a class="button" href="#" onclick="populate_rune_table()">Generate</a>
        <a class="button" target="_blank" href="https://github.com/batman-nair/Runicjs">Github</a>
    </div>
</div>

<script src="runic.js">
</script>