feat: add shadow border to the code editor and to the game screen (#10)

## How does this PR impact the user?

### Now

<img width="1608" alt="image"
src="https://github.com/move-fast-and-break-things/aibyss/assets/4187729/4129b538-9c8b-4a76-baa7-06ed8d8d1564">

### Before

<img width="1608" alt="image"
src="https://github.com/move-fast-and-break-things/aibyss/assets/4187729/7e1dd3cf-31df-4ca5-8a76-db65ee7fd21d">

## Description

Ditto.

## Limitations

N/A

## Checklist

- [x] my PR is focused and contains one wholistic change
- [x] I have added screenshots or screen recordings to show the changes

components/CodeEditor.vue

@@ -84,7 +84,7 @@ function onSubmit(event: Event) {
       <MonacoEditor
         v-model="state.code"
         lang="javascript"
-        class="flex-grow mb-4"
+        class="flex-grow mb-4 shadow"
       />
       <div class="flex justify-end">
         <button

components/GameScreen.vue

@@ -63,6 +63,9 @@ watch(gameState, (newState) => {
     class="h-full w-full"
     data-testid="game-screen"
   >
-    <canvas ref="canvas" />
+    <canvas
+      ref="canvas"
+      class="shadow m-4 mt-0"
+    />
   </div>
 </template>