zoomed form in cards and center game div

styles/card.css

@@ -4,8 +4,8 @@
   justify-content: center;
   align-items: center;
   width: 6vw;
-  min-height: 26vh;
+  min-height: 30vh;
-  padding: 1.5em;
+  padding: 0.5em 1em 0.5em 1em;
   margin: 1.2rem; /* for better display */
   border: 0.3em solid black;
   border-radius: 2em;
@@ -18,8 +18,8 @@
 
 svg {
   rotate: 90deg;
-  height: 7vh;
+  height: 10vh;
-  width: 3vw;
+  width: 5vw;
 }
 
 .item {

views/deck-module.js

@@ -9,7 +9,7 @@ export default{
         return{
             card:new Card({"filling":"empty"}),
             id:0,
-            deck : new Deck([0,1,2,3],4),
+            deck : new Deck([0,1,2],3),
             selectedCards:[],
             selectedCardsindex:[],
             nbCardsSelected:0,
@@ -65,7 +65,7 @@ export default{
         <h2>Players: {{connected}}</h2>
     </div>
     
-    <div v-if="!win" v-bind:style="{border: '3px solid black', fontSize: '20px', display:'flex', 'flex-wrap':'wrap',margin:'1rem 20rem 20px 20px'}">
+    <div v-if="!win" v-bind:style="{border: '3px solid black', fontSize: '20px', display:'flex', 'flex-wrap':'wrap',margin:'1rem 17vw 20px 17vw'}">
             <card-module @selected='selected' :id=n :card=this.deck.outputCards[n-1] v-for="n in deck.outputCards.length"/>
     </div>
     <div  v-if="win">