card horizontal -> vertical

styles/card.css

@@ -1,10 +1,10 @@
 .card {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: 12vh;
-  min-width: 14vw;
+  width: 6vw;
+  min-height: 26vh;
   padding: 1.5em;
   margin: 1.2rem; /* for better display */
   border: 0.3em solid black;
@@ -12,13 +12,17 @@
   background-color: white;
 }
 
+.card:hover {
+  cursor: pointer;
+}
+
 svg {
-  height: 12vh;
+  rotate: 90deg;
+  height: 7vh;
   width: 3vw;
 }
 
 .item {
-  margin: 1rem;
 }
 
 #main {

views/deck-module.js

@@ -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 18rem 20px 20px'}">
+    <div v-if="!win" v-bind:style="{border: '3px solid black', fontSize: '20px', display:'flex', 'flex-wrap':'wrap',margin:'1rem 20rem 20px 20px'}">
             <card-module @selected='selected' :id=n :card=this.deck.outputCards[n-1] v-for="n in deck.outputCards.length"/>
     </div>
     <div  v-if="win">