Untitled

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">

    <title> PONG </title>

    <style>
        #myCanvas {
            outline: 1px solid black;
        }
        body {
            padding: 10px;
        }

        #container {
            height: 400px;
            position: relative;
            width: 400px;
        }

        #viewport {
            height: 100%;
            width: 100%;
        }

        #controls {
            bottom: 0;
            left: 0;
            position: absolute;
            width: 100%;
            float: right;
        }

        .button {
            display: inline-block;
            border-radius: 10px;
            background-color: black;
            border: none;
            color: #FFFFFF;
            text-align: center;
            font-size: 32px;
            font-family: Impact;
            padding: 9px;
            width: 200px;
            transition: all 0.5s;
            cursor: pointer;
        }


        #singButt{
            display: inline-block;
            border-radius: 10px;
            background-color: black;
            border: none;
            color: #FFFFFF;
            text-align: center;
            font-size: 28px;
            font-family: Impact;
            padding: 9px;
            width: 170px;
            transition: all 0.5s;
            cursor: pointer;
            margin: 5px;
        }

        #multButt{
            display: inline-block;
            border-radius: 10px;
            background-color: black;
            border: none;
            color: #FFFFFF;
            text-align: center;
            font-size: 28px;
            font-family: Impact;
            padding: 9px;
            width: 170px;
            transition: all 0.5s;
            cursor: pointer;
            margin: 5px;
        }

        .button span {
            cursor: pointer;
            display: inline-block;
            position: relative;
            transition: 0.5s;
        }

        .button span:after {
            content: '\00bb';
            position: absolute;
            opacity: 0;
            top: 0;
            right: -20px;
            transition: 0.5s;
        }

        .button:hover span {
            padding-right: 25px;
        }

        .button:hover span:after {
            opacity: 1;
            right: 0;
        }
    </style>

</head>

<body>
     <div id="container">
        <canvas id="myCanvas" width="600" height="400" style="z-index: 1;"></canvas>
        <canvas id="gameOver" width="600" height="400" style="z-index: 2;">></canvas>
        <menu id="controls">
            <button id="newGameButton" class="button" style="position: absolute; top:20px; left:0px;" onclick="newGame()"><span>New Game</span></button>

            <button id="singButt" style="position: absolute; top:20px; left:250px;" onclick="singleplayerButt()" width="5"><span>Singleplayer</span></button>
            <button id="multButt" style="position: absolute; top:20px; left: 430px;" onclick="multiplayerButt()" width="5"><span>Multiplayer</span></button>

        </menu>
    </div>
    <script src="pongGame1.js"></script>
</body></html>