public and private buttons

src/ui/App.tsx

@@ -15,7 +15,10 @@ function App() {
   return (
     <div className="App">
       <Topbar />
-      <BigButton text="PLAY DA GAME :D" onClick={playGame} id="officialPlay" />
+      <div id="playButtons">
+        <BigButton text="PLAY DA GAME :D" onClick={playGame} id="officialPlay" />
+        <BigButton text="PLAY PRIV GAME :D" onClick={playGame} id="privatePlay" />
+      </div>
     </div>
   )
 }

src/ui/components/common/BigButton.css

@@ -11,9 +11,6 @@
   color: #704a1d;
   font-weight: bold;
 
-  height: 60px;
-  max-width: 20%;
-
   font-size: 20px;
 }
 

src/ui/custom.css

@@ -1,5 +1,17 @@
-#officialPlay {
+#playButtons {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+
   position: absolute;
-  top: 75%;
-  left: 60%;
+  top: 80%;
+  left: 40%;
+
+  width: 50%;
+  height: 10%;
+}
+
+#playButtons .BigButton {
+  height: 100%;
 }