design changes

frontend/app/src/pages/MainPage.tsx

@@ -12,8 +12,9 @@ const MainPage = () => {
         {tr("Queuing has never been so simple")}
       </p>
       <div className="button-box">
-        <Button>{tr("Join a queue")}</Button>
-        <Button>{tr("Take a tour")}</Button>
+        <Button size="large">{tr("Join a queue")}</Button>
+        <div style={{ width: "3rem" }} />
+        <Button size="large">{tr("Take a tour")}</Button>
       </div>
     </div>
   );

frontend/app/src/pages/styles.css

@@ -6,6 +6,7 @@
 
 .main {
     font-family: "Comfortaa", sans-serif;
+    padding: 3rem;
     display: flex;
     flex-flow: column;
     justify-items: center;
@@ -21,8 +22,7 @@
 .button-box {
     width: 100%;
     display: flex;
-    align-self: center;
-    flex-flow: row;
-    justify-items: center;
-    align-content: space-around;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
 }