improve graphics design in game

src/Mine/SeekerBundle/Resources/public/css/style.mineseeker.css

@@ -1,10 +1,29 @@
-/*@import 'https://fonts.googleapis.com/css?family=Open+Sans:700';*/
 @import url('https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:700');
 @import 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css';
 
+html {
+    height: 100%;
+    padding: 0;
+    margin: 0;
+}
+
 body {
-    background: url("/bundles/mineseeker/images/bg-mineseeker-outbg.jpg") no-repeat center center;
+    height: 100%;
+    min-height: 100%;
+    padding: 0;
+    margin: 0;
+}
+
+.mine-container {
+    background: url("/bundles/mineseeker/images/bg-mineseeker-outbg.jpg") no-repeat;
     background-size: cover;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
 }
 
 .clear {
@@ -18,21 +37,21 @@ body {
 }
 
 #mine-wrapper {
-    background: #000;
     display: table;
     width: 842px;
-    padding: 10px;
     margin: 0 auto;
-
-    -webkit-border-radius: 10px;
-    border-radius: 10px;
 }
 
 #mine-wrapper .game-wrapper {
+    background: #000;
     position: relative;
     display: flex;
     flex-direction: row;
     align-items: flex-start;
+    padding: 10px;
+
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
 }
 
 #mine-wrapper .game-wrapper .game-overlay {
@@ -48,6 +67,9 @@ body {
     left: 0;
 
     z-index: 200;
+
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
 }
 
 #mine-wrapper .game-wrapper .game-overlay.hide {

src/Mine/SeekerBundle/Resources/views/Game/play.html.twig

@@ -1,10 +1,12 @@
 {% extends '::base.html.twig' %}
 
 {% block body %}
+    <div class="mine-container">
         <div id="mine-wrapper"
              data-env="{{ env }}"
              data-game-id="{{ app.request.get('gameAssoc') }}">
         </div>
+    </div>
 {% endblock %}
 
 {% block stylesheets %}