diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..10acc9b
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,136 @@
+html {
+ overflow: hidden;
+}
+
+body {
+ margin: 0;
+ font-family: Roboto, Helvetica, Arial, sans-serif;
+ font-size: 1.4em;
+}
+
+.start-background {
+ width: 100vw;
+ height: 100vh;
+ background-color: #333;
+ -webkit-transition: background-color .5s;
+ -moz-transition: background-color .5s;
+ -o-transition: background-color .5s;
+ transition: background-color .5s;
+}
+
+.start-background.transparent {
+ background-color: transparent;
+}
+
+.start-container {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ -moz-transform: translate(-50%, -50%);
+ -ms-transform: translate(-50%, -50%);
+ -o-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ color: #fff;
+ text-align: center;
+}
+
+.start-container.slideDown {
+ animation: slideDown .5s ease-in-out forwards;
+}
+
+@keyframes slideDown {
+ 0% {
+ top: 50%;
+ }
+
+ 100% {
+ top: 150%;
+ }
+}
+
+.start-container h3 {
+ font-weight: lighter;
+}
+
+.start-container button {
+ border: none;
+ border-radius: 10px;
+ box-shadow: none;
+ background-color: #2272ff;
+ color: #fff;
+ padding: 20px 40px;
+ font-size: 28px;
+ -webkit-transition: all .2s;
+ -moz-transition: all .2s;
+ -o-transition: all .2s;
+ transition: all .2s;
+ cursor: pointer;
+}
+
+.start-container button:hover {
+ box-shadow: 0 10px 20px rgba(0,0,0,.18);
+ transform: translateY(-5px);
+}
+
+.start-container button:active {
+ background-color: #1e64cd;
+}
+
+.overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+.game-container {
+ position: absolute;
+ bottom: 2.5%;
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+.game-stats {
+ position: absolute;
+ top: calc(2.5vh / 2);
+ left: 50%;
+ height: 5vh;
+ width: 1592px;
+ transform: translateX(-50%);
+}
+
+.stat-container {
+ float: left;
+ background-color: black;
+ border-radius: 10px;
+ color: red;
+ font-size: 4vh;
+ font-family: "SF Digital Readout", Roboto, Arial, sans-serif;
+ margin: 0 10px;
+}
+
+.stat-container.right {
+ float: right;
+}
+
+#time, #bombs {
+ margin: 0 15px;
+}
+
+.main-container {
+ position: absolute;
+ top: -100%;
+ width: 100%;
+ height: 100%;
+ animation: slideIn .5s ease-in-out forwards;
+}
+
+@keyframes slideIn {
+ from {
+ top: -100%;
+ }
+
+ to {
+ top: 0;
+ }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index d853f99..2154f23 100644
--- a/index.html
+++ b/index.html
@@ -3,147 +3,11 @@
Minesweeper.js
-
-
-
+
+
+
-
+