diff --git a/index.html b/index.html
index 37d4af0..16752a4 100644
--- a/index.html
+++ b/index.html
@@ -1,449 +1,622 @@
-
- Javascript Tetris
-
-
-
-
-
-
-
-
-
-
+
+ //-------------------------------------------------------------------------
+ // FINALLY, lets run the game
+ //-------------------------------------------------------------------------
-
+ run();
+
+
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..61936fe
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,188 @@
+body {
+ font-family: Helvetica, sans-serif;
+ }
+ #tetris {
+ margin: 1em auto;
+ padding: 1em;
+ border: 4px solid black;
+ border-radius: 10px;
+ background-color: #f8f8f8;
+ }
+ #stats {
+ display: inline-block;
+ vertical-align: top;
+ }
+ #canvas {
+ display: inline-block;
+ vertical-align: top;
+ background: url(texture.jpg);
+ box-shadow: 10px 10px 10px #999;
+ border: 2px solid #333;
+ }
+ #menu {
+ display: inline-block;
+ vertical-align: top;
+ position: relative;
+ }
+ #menu p {
+ margin: 0.5em 0;
+ text-align: center;
+ }
+ #menu p a {
+ text-decoration: none;
+ color: black;
+ }
+ #upcoming {
+ display: block;
+ margin: 0 auto;
+ background-color: #e0e0e0;
+ }
+ #score {
+ color: red;
+ font-weight: bold;
+ vertical-align: middle;
+ }
+ #rows {
+ color: blue;
+ font-weight: bold;
+ vertical-align: middle;
+ }
+ #stats {
+ position: absolute;
+ bottom: 0em;
+ right: 1em;
+ }
+ @media screen and (min-width: 0px) and (min-height: 0px) {
+ #tetris {
+ font-size: 0.75em;
+ width: 250px;
+ }
+ #menu {
+ width: 100px;
+ height: 200px;
+ }
+ #upcoming {
+ width: 50px;
+ height: 50px;
+ }
+ #canvas {
+ width: 100px;
+ height: 200px;
+ }
+ } /* 10px chunks */
+ @media screen and (min-width: 400px) and (min-height: 400px) {
+ #tetris {
+ font-size: 1em;
+ width: 350px;
+ }
+ #menu {
+ width: 150px;
+ height: 300px;
+ }
+ #upcoming {
+ width: 75px;
+ height: 75px;
+ }
+ #canvas {
+ width: 150px;
+ height: 300px;
+ }
+ } /* 15px chunks */
+ @media screen and (min-width: 500px) and (min-height: 500px) {
+ #tetris {
+ font-size: 1.25em;
+ width: 450px;
+ }
+ #menu {
+ width: 200px;
+ height: 400px;
+ }
+ #upcoming {
+ width: 100px;
+ height: 100px;
+ }
+ #canvas {
+ width: 200px;
+ height: 400px;
+ }
+ } /* 20px chunks */
+ @media screen and (min-width: 600px) and (min-height: 600px) {
+ #tetris {
+ font-size: 1.5em;
+ width: 550px;
+ }
+ #menu {
+ width: 250px;
+ height: 500px;
+ }
+ #upcoming {
+ width: 125px;
+ height: 125px;
+ }
+ #canvas {
+ width: 250px;
+ height: 500px;
+ }
+ } /* 25px chunks */
+ @media screen and (min-width: 700px) and (min-height: 700px) {
+ #tetris {
+ font-size: 1.75em;
+ width: 650px;
+ }
+ #menu {
+ width: 300px;
+ height: 600px;
+ }
+ #upcoming {
+ width: 150px;
+ height: 150px;
+ }
+ #canvas {
+ width: 300px;
+ height: 600px;
+ }
+ } /* 30px chunks */
+ @media screen and (min-width: 800px) and (min-height: 800px) {
+ #tetris {
+ font-size: 2em;
+ width: 750px;
+ }
+ #menu {
+ width: 350px;
+ height: 700px;
+ }
+ #upcoming {
+ width: 175px;
+ height: 175px;
+ }
+ #canvas {
+ width: 350px;
+ height: 700px;
+ }
+ } /* 35px chunks */
+ @media screen and (min-width: 900px) and (min-height: 900px) {
+ #tetris {
+ font-size: 2.25em;
+ width: 850px;
+ }
+ #menu {
+ width: 400px;
+ height: 800px;
+ }
+ #upcoming {
+ width: 200px;
+ height: 200px;
+ }
+ #canvas {
+ width: 400px;
+ height: 800px;
+ }
+ } /* 40px chunks */
+
+ .header {
+ font-weight: bold;
+ }
+
+ .option {
+ font-size: 0.75em;
+ }
\ No newline at end of file