index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Deadwood South</title>
    <style>
        *{
            user-select: none; /* Prevents user from highlighting element on screen */
        }
        body{
            background-image: url(gameAssets/level1background.png);
            background-size: cover;
        }
        #start{
            position: absolute;
            transform: translateX(calc(50vw - 50%)) translateY(calc(50vh - 50%));
            height: fit-content;
            width: fit-content;
            font-size: 4vh;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            background-color: white;
            color: black;
            border-radius: 2vh;
            padding: 4px 6px 4px 6px;
            opacity: 0.9;
        }

        #start:hover{
            transform: translateX(calc(50vw - 50%)) translateY(calc(50vh - 50%)) scale(1.1);
            opacity: 1;
        }
    </style>
</head>
<body>
    <div id="start">Run Deadwood South</div>
</body>
<script>
    const button = document.getElementById("start");
    button.addEventListener('click', function () {
        window.location.href = 'startScreen.html';
    });
</script>
</html>