diff --git a/audio/typing.mp3 b/audio/typing.mp3
new file mode 100644
index 0000000..134d083
Binary files /dev/null and b/audio/typing.mp3 differ
diff --git a/audio/typing.ogg b/audio/typing.ogg
new file mode 100644
index 0000000..c97b581
Binary files /dev/null and b/audio/typing.ogg differ
diff --git a/config.rb b/config.rb
index fc42b67..7fe8be7 100644
--- a/config.rb
+++ b/config.rb
@@ -19,7 +19,7 @@
 # output_style = :expanded or :nested or :compact or :compressed
 
 # To enable relative paths to assets via compass helper functions. Uncomment:
-# relative_assets = true
+relative_assets = true
 
 # To disable debugging comments that display the original location of your selectors. Uncomment:
 # line_comments = false
diff --git a/css/style.css b/css/style.css
index 2c3c91d..b5e18c9 100644
--- a/css/style.css
+++ b/css/style.css
@@ -21,13 +21,13 @@
 
 /* line 256, spritesheet/*.png */
 .spritesheet-sprite, .laptop, .body, .mouth, .rage-quit .mouth, .unhappy .mouth, .enraged .mouth, .joyous .mouth, .overjoyed .mouth, .happy .mouth, .eyes, .rage-quit .eyes, .enraged .eyes, .happy .eyes, .joyous .eyes, .overjoyed .eyes, .bored .body, .gurgle, .bags, .snore, .hungry .mouth, .tired.happy .bags, .tired.joyous .bags, .tired.overjoyed .bags, .sleeping .body, .sleeping .mouth, .sleeping .eyes, .huff, .playing .body, .choco, .snacking .choco, .burrito, .eating .burrito, .book {
-  background-image: url('/img/spritesheet-s02e10d4fe9.png');
+  background-image: url('../img/spritesheet-s02e10d4fe9.png');
   background-repeat: no-repeat;
 }
 
 /* line 256, spritesheet-2x/*.png */
 .spritesheet-2x-sprite {
-  background-image: url('/img/spritesheet-2x-sdd0bb7a30f.png');
+  background-image: url('../img/spritesheet-2x-sdd0bb7a30f.png');
   background-repeat: no-repeat;
 }
 
@@ -85,7 +85,7 @@ button:disabled {
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   /* line 82, ../scss/_mixins.scss */
   .laptop {
-    background-image: url('/img/spritesheet-2x-sdd0bb7a30f.png');
+    background-image: url('../img/spritesheet-2x-sdd0bb7a30f.png');
     background-position: 0 85.61898%;
   }
 }
@@ -109,7 +109,7 @@ button:disabled {
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   /* line 82, ../scss/_mixins.scss */
   .body {
-    background-image: url('/img/spritesheet-2x-sdd0bb7a30f.png');
+    background-image: url('../img/spritesheet-2x-sdd0bb7a30f.png');
     background-position: 0 29.8826%;
   }
 }
@@ -127,7 +127,7 @@ button:disabled {
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   /* line 82, ../scss/_mixins.scss */
   .mouth {
-    background-image: url('/img/spritesheet-2x-sdd0bb7a30f.png');
+    background-image: url('../img/spritesheet-2x-sdd0bb7a30f.png');
     background-position: 0 98.57007%;
   }
 }
@@ -140,7 +140,7 @@ button:disabled {
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   /* line 50, ../scss/style.scss */
   .rage-quit .mouth {
-    background-image: url('/img/spritesheet-2x-sdd0bb7a30f.png');
+    background-image: url('../img/spritesheet-2x-sdd0bb7a30f.png');
     background-position: 0 93.04099%;
   }
 }
@@ -152,7 +152,7 @@ button:disabled {
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   /* line 53, ../scss/style.scss */
   .unhappy .mouth, .enraged .mouth {
-    background-image: url('/img/spritesheet-2x-sdd0bb7a30f.png');
+    background-image: url('../img/spritesheet-2x-sdd0bb7a30f.png');
     background-position: 0 91.65872%;
   }
 }
@@ -164,7 +164,7 @@ button:disabled {
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   /* line 57, ../scss/style.scss */
   .joyous .mouth {
-    background-image: url('/img/spritesheet-2x-sdd0bb7a30f.png');
+    background-image: url('../img/spritesheet-2x-sdd0bb7a30f.png');
     background-position: 0 94.42326%;
   }
 }
@@ -176,7 +176,7 @@ button:disabled {
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   /* line 60, ../scss/style.scss */
   .overjoyed .mouth, .happy .mouth {
-    background-image: url('/img/spritesheet-2x-sdd0bb7a30f.png');
+    background-image: url('../img/spritesheet-2x-sdd0bb7a30f.png');
     background-position: 0 87.51192%;
   }
 }
@@ -194,7 +194,7 @@ button:disabled {
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   /* line 82, ../scss/_mixins.scss */
   .eyes {
-    background-image: url('/img/spritesheet-2x-sdd0bb7a30f.png');
+    background-image: url('../img/spritesheet-2x-sdd0bb7a30f.png');
     background-position: 0 75.55934%;
   }
 }
@@ -207,7 +207,7 @@ button:disabled {
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   /* line 68, ../scss/style.scss */
   .rage-quit .eyes, .enraged .eyes {
-    background-image: url('/img/spritesheet-2x-sdd0bb7a30f.png');
+    background-image: url('../img/spritesheet-2x-sdd0bb7a30f.png');
     background-position: 0 65.19942%;
   }
 }
@@ -219,7 +219,7 @@ button:disabled {
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   /* line 72, ../scss/style.scss */
   .happy .eyes, .joyous .eyes, .overjoyed .eyes {
-    background-image: url('/img/spritesheet-2x-sdd0bb7a30f.png');
+    background-image: url('../img/spritesheet-2x-sdd0bb7a30f.png');
     background-position: 0 72.10603%;
   }
 }
@@ -232,7 +232,7 @@ button:disabled {
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   /* line 80, ../scss/style.scss */
   .bored .body {
-    background-image: url('/img/spritesheet-2x-sdd0bb7a30f.png');
+    background-image: url('../img/spritesheet-2x-sdd0bb7a30f.png');
     background-position: 0 16.38207%;
   }
 }
@@ -251,7 +251,7 @@ button:disabled {
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   /* line 82, ../scss/_mixins.scss */
   .gurgle {
-    background-image: url('/img/spritesheet-2x-sdd0bb7a30f.png');
+    background-image: url('../img/spritesheet-2x-sdd0bb7a30f.png');
     background-position: 0 79.22458%;
   }
 }
@@ -270,7 +270,7 @@ button:disabled {
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   /* line 82, ../scss/_mixins.scss */
   .bags {
-    background-image: url('/img/spritesheet-2x-sdd0bb7a30f.png');
+    background-image: url('../img/spritesheet-2x-sdd0bb7a30f.png');
     background-position: 0 1.28571%;
   }
 }
@@ -289,7 +289,7 @@ button:disabled {
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   /* line 82, ../scss/_mixins.scss */
   .snore {
-    background-image: url('/img/spritesheet-2x-sdd0bb7a30f.png');
+    background-image: url('../img/spritesheet-2x-sdd0bb7a30f.png');
     background-position: 0 100%;
   }
 }
@@ -302,7 +302,7 @@ button:disabled {
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   /* line 94, ../scss/style.scss */
   .hungry .mouth {
-    background-image: url('/img/spritesheet-2x-sdd0bb7a30f.png');
+    background-image: url('../img/spritesheet-2x-sdd0bb7a30f.png');
     background-position: 0 97.1878%;
   }
 }
@@ -386,7 +386,7 @@ button:disabled {
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   /* line 124, ../scss/style.scss */
   .tired.happy .bags, .tired.joyous .bags, .tired.overjoyed .bags {
-    background-image: url('/img/spritesheet-2x-sdd0bb7a30f.png');
+    background-image: url('../img/spritesheet-2x-sdd0bb7a30f.png');
     background-position: 0 0;
   }
 }
@@ -399,7 +399,7 @@ button:disabled {
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   /* line 136, ../scss/style.scss */
   .sleeping .body {
-    background-image: url('/img/spritesheet-2x-sdd0bb7a30f.png');
+    background-image: url('../img/spritesheet-2x-sdd0bb7a30f.png');
     background-position: 0 16.38207%;
   }
 }
@@ -411,7 +411,7 @@ button:disabled {
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   /* line 139, ../scss/style.scss */
   .sleeping .mouth {
-    background-image: url('/img/spritesheet-2x-sdd0bb7a30f.png');
+    background-image: url('../img/spritesheet-2x-sdd0bb7a30f.png');
     background-position: 0 95.80553%;
   }
 }
@@ -423,7 +423,7 @@ button:disabled {
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   /* line 142, ../scss/style.scss */
   .sleeping .eyes {
-    background-image: url('/img/spritesheet-2x-sdd0bb7a30f.png');
+    background-image: url('../img/spritesheet-2x-sdd0bb7a30f.png');
     background-position: 0 68.65272%;
   }
 }
@@ -448,7 +448,7 @@ button:disabled {
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   /* line 82, ../scss/_mixins.scss */
   .huff {
-    background-image: url('/img/spritesheet-2x-sdd0bb7a30f.png');
+    background-image: url('../img/spritesheet-2x-sdd0bb7a30f.png');
     background-position: 0 81.17394%;
   }
 }
@@ -463,7 +463,7 @@ button:disabled {
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   /* line 159, ../scss/style.scss */
   .playing .body {
-    background-image: url('/img/spritesheet-2x-sdd0bb7a30f.png');
+    background-image: url('../img/spritesheet-2x-sdd0bb7a30f.png');
     background-position: 0 2.88154%;
   }
 }
@@ -575,7 +575,7 @@ button:disabled {
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   /* line 82, ../scss/_mixins.scss */
   .choco {
-    background-image: url('/img/spritesheet-2x-sdd0bb7a30f.png');
+    background-image: url('../img/spritesheet-2x-sdd0bb7a30f.png');
     background-position: 0 61.61542%;
   }
 }
@@ -592,7 +592,7 @@ button:disabled {
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   /* line 228, ../scss/style.scss */
   .snacking .choco {
-    background-image: url('/img/spritesheet-2x-sdd0bb7a30f.png');
+    background-image: url('../img/spritesheet-2x-sdd0bb7a30f.png');
     background-position: 0 57.80869%;
   }
 }
@@ -684,7 +684,7 @@ button:disabled {
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   /* line 82, ../scss/_mixins.scss */
   .burrito {
-    background-image: url('/img/spritesheet-2x-sdd0bb7a30f.png');
+    background-image: url('../img/spritesheet-2x-sdd0bb7a30f.png');
     background-position: 0 53.36467%;
   }
 }
@@ -701,7 +701,7 @@ button:disabled {
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   /* line 261, ../scss/style.scss */
   .eating .burrito {
-    background-image: url('/img/spritesheet-2x-sdd0bb7a30f.png');
+    background-image: url('../img/spritesheet-2x-sdd0bb7a30f.png');
     background-position: 0 48.17103%;
   }
 }
@@ -759,7 +759,7 @@ button:disabled {
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   /* line 82, ../scss/_mixins.scss */
   .book {
-    background-image: url('/img/spritesheet-2x-sdd0bb7a30f.png');
+    background-image: url('../img/spritesheet-2x-sdd0bb7a30f.png');
     background-position: 0 41.36352%;
   }
 }
diff --git a/index.html b/index.html
index 38ec126..8fcd214 100644
--- a/index.html
+++ b/index.html
@@ -1,58 +1,62 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <title>A Game of Work/Life Balance</title>
-        <meta name="viewport" content="width=device-width initial-scale=1, maximum-scale=1, user-scalable=0">
-        <link href="/css/style.css" rel="stylesheet" type="text/css">
-    </head>
-    <body>
-        <div class="container">
-            <div class="meters" role="status" aria-label="Levels of Contentment">
-                <label for="meter-rest">Alertness</label>
-                <meter id="meter-rest" min="0" low="1" optimum="2" high="3" max="3" role="progressbar" aria-valuemin="0" aria-valuemax="3" aria-live="assertive"></meter>
-                <label for="meter-hunger">Fullness</label>
-                <meter id="meter-hunger" min="0" low="1" optimum="2" high="3" max="3" role="progressbar" aria-valuemin="0" aria-valuemax="3" aria-live="assertive"></meter>
-                <label for="meter-engagement">Engagement</label>
-                <meter id="meter-engagement" min="0" low="1" optimum="2" high="3" max="3" role="progressbar" aria-valuemin="0" aria-valuemax="3" aria-live="assertive"></meter>
+	<head>
+		<meta charset="utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<title>A Game of Work/Life Balance</title>
+		<meta name="viewport" content="width=device-width initial-scale=1, maximum-scale=1, user-scalable=0">
+		<link href="css/style.css" rel="stylesheet" type="text/css">
+	</head>
+	<body>
+		<div class="container">
+			<div class="meters" role="status" aria-label="Levels of Contentment">
+				<label for="meter-rest">Alertness</label>
+				<meter id="meter-rest" min="0" low="1" optimum="2" high="3" max="3" role="progressbar" aria-valuemin="0" aria-valuemax="3" aria-live="assertive"></meter>
+				<label for="meter-hunger">Fullness</label>
+				<meter id="meter-hunger" min="0" low="1" optimum="2" high="3" max="3" role="progressbar" aria-valuemin="0" aria-valuemax="3" aria-live="assertive"></meter>
+				<label for="meter-engagement">Engagement</label>
+				<meter id="meter-engagement" min="0" low="1" optimum="2" high="3" max="3" role="progressbar" aria-valuemin="0" aria-valuemax="3" aria-live="assertive"></meter>
 
-            </div>
-            <div class="observation-window">
-                <div class="forest">
-                  <div class="forest-bg trees"></div>
-                  <div class="forest-mg trees"></div>
-                  <div class="forest-fg trees"></div>
-                </div>
-                <div id="character" class="body">
-                    <div class="bags"></div>
-                    <div class="eyes"></div>
-                    <div class="mouth"></div>
-                    <div class="huff"></div>
-                </div>
-                <div class="book"></div>
-                <div class="laptop"></div>
-                <div class="snore"></div>
-                <div class="gurgle"></div>
-                <div class="choco"></div>
-                <div class="burrito"></div>
-            </div>
-            <div id="controls" role="menu" aria-label="Things you can do:">
-                <button id="meal" aria-controls="meter-hunger meter-rest" title="feed a meal"disabled>Full Meal</button>
-                <button id="snack" aria-controls="meter-hunger meter-rest" title="feed a snack" disabled>Snack</button>
-                <button id="sleep" title="put to bed" disabled>Sleep</button>
-                <button id="play" title="go for a jog" disabled>Exercise</button>
-                <button id="read" title="read a book" disabled>Read</button>
-            </div>
-            <div id="winState" class="state" hidden role="alert" aria-live="assertive">
-                <p>You acheived work/life balance!</p>
-                <button id="playAgain">Play again!</button>
-            </div>
-            <div id="loseState" class="state" hidden role="alert" aria-live="assertive">
-                <p>Rachel rage quit.</p>
-                <button id="tryAgain">Try again?</button>
-            </div>
-        </div>
-        <script src="js/core.js"></script>
-    </body>
+			</div>
+			<div class="observation-window">
+				<div class="forest">
+				  <div class="forest-bg trees"></div>
+				  <div class="forest-mg trees"></div>
+				  <div class="forest-fg trees"></div>
+				</div>
+				<div id="character" class="body">
+					<div class="bags"></div>
+					<div class="eyes"></div>
+					<div class="mouth"></div>
+					<div class="huff"></div>
+				</div>
+				<div class="book"></div>
+				<div class="laptop"></div>
+				<div class="snore"></div>
+				<div class="gurgle"></div>
+				<div class="choco"></div>
+				<div class="burrito"></div>
+			</div>
+			<div id="controls" role="menu" aria-label="Things you can do:">
+				<button id="meal" aria-controls="meter-hunger meter-rest" title="feed a meal"disabled>Full Meal</button>
+				<button id="snack" aria-controls="meter-hunger meter-rest" title="feed a snack" disabled>Snack</button>
+				<button id="sleep" title="put to bed" disabled>Sleep</button>
+				<button id="play" title="go for a jog" disabled>Exercise</button>
+				<button id="read" title="read a book" disabled>Read</button>
+			</div>
+			<div id="winState" class="state" hidden role="alert" aria-live="assertive">
+				<p>You acheived work/life balance!</p>
+				<button id="playAgain">Play again!</button>
+			</div>
+			<div id="loseState" class="state" hidden role="alert" aria-live="assertive">
+				<p>Rachel rage quit.</p>
+				<button id="tryAgain">Try again?</button>
+			</div>
+		</div>
+		<audio id="audio" preload="auto" loop autoplay>
+			<source src="audio/typing.mp3" type="audio/mp3" />
+			<source src="audio/typing.ogg" type="audio/ogg" />
+		</audio>
+		<script src="js/core.js"></script>
+	</body>
 </html>
\ No newline at end of file
diff --git a/js/core.js b/js/core.js
index f453e1b..aefa18d 100644
--- a/js/core.js
+++ b/js/core.js
@@ -258,6 +258,15 @@ function depreciateMeters() {
     }
 };
 
+// Music
+// Get the audio element
+// var soundTyping = document.querySelector('audio');
+
+// // Wait till the music loads (or get a nasty error!)
+// soundTyping.addEventListener("canplaythrough", function () {
+
+// }, false);
+
 window.addEventListener("load", function load(event){
     window.removeEventListener("load", load, false); //remove listener, no longer needed