HTML/CSS - Snake Xenzia 🎮 [GAME] Online Editor and JavaScript Compiler

html
<!---Created by Moses Odhiambo--->
<!---Special thanks to Hello World--->
<html> 
<head>
    <title>Snake Xenzia</title>
    <link href='https://fonts.googleapis.com/css?family=Aclonica' rel='stylesheet'>
    <style>
        *{padding:0; margin:0;  -webkit-user-select: none;}
        .snake {position:absolute; top:20px; left:20px; font-family: 'Aclonica';font-size: 25px; color: teal;}
        .xenzia {color:teal; position:absolute; top:45px; left:70px; font-family: 'Aclonica';font-size: 25px;}
        .by {position:absolute; top:50px; left:280px; }
        .img-circle {position:absolute; top:5px; left:430px; height:70px; width:70px; border: 1px solid teal; border-radius: 50%;}
        canvas {position:absolute; top:80px; left:20px; background: #eee; display: block;}
        div {width:520px; height:700px; transform: scale(1.0); transform-origin: 0 0;}
        .left {position:absolute; top:580px; left:20px; padding:0px; width:140px; height:100px; border:none; background:#eee; text-align:center; vertical-align: middle;line-height:100px;}
        .right {position:absolute; top:580px; left:360px; padding:0px; width:140px; height:100px; border:none; background:#eee; text-align:center; vertical-align: middle;line-height:100px;}
        .up {position:absolute; top:580px; left:180px; padding:0px; width:160px; height:40px; border:none; background:#eee; text-align:center; vertical-align: middle;line-height:40px;}
        .down {position:absolute; top:640px; left:180px; padding:0px; width:160px; height:40px; border:none; background:#eee; text-align:center; vertical-align: middle;line-height:40px;}
        label:active { background-color: teal; opacity: 0.8;}
    </style>
</head>
<body>
<div id="div">
<h1 class="snake">SNAKE </h1>
<h1 class="xenzia">XENZIA</h1>
<p class="by">by Moses Odhiambo</p>
<a href="https://www.sololearn.com/Profile/9545431/?ref=app">
css
BROWSER
Console