Paydirt

public/assets/css/style.css

@@ -15,6 +15,66 @@ body {
     justify-content: flex-start;
 }
 
+.header {
+    grid-area: header;
+    display: flex;
+    flex-direction: row;
+    height: 100px;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.header-left {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 20px;
+}
+
+.header-right {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+.nw {
+    grid-area: nw;
+}
+
+.ne {
+    grid-area: ne;
+}
+
+.se {
+    grid-area: se;
+}
+
+.sw {
+    grid-area: sw;
+}
+
+.box {
+    border: 2px solid white;
+    margin: 2px;
+    padding: 4px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    text-justify: center;
+}
+
+.grid-container {
+    display: grid;
+    grid-template-columns: 50px, 50px;
+    grid-template-rows: auto;
+    grid-template-areas: 
+    "header header"
+    "nw ne"
+    "sw se";
+}
+
 .center {
     display: flex;
     flex-direction: column;
@@ -40,7 +100,6 @@ a {
     color: white;
     padding-left: 5px;
     padding-right: 5px;
-    margin-top: 4px;
     text-decoration: none;
     text-align: center;
     align-items: center;
@@ -53,9 +112,7 @@ a {
 button {
     background-color: transparent;
     border: 2px solid #606060;
-    margin-left: 10px;
-    margin-top: 10px;
-    margin-bottom: 10px;
+    margin: 10px;
     width: 75px;
     border-radius: 5px;
     padding: 5px;
@@ -203,15 +260,12 @@ h2 {
     color: #ffffff;
     font: 32px "Verdana";
     margin: 0;
-    margin-top: 32px;
-    margin-bottom: 10px;
 }
 
 h3 {
     color: #CCCCCC;
     font: 24px "Verdana";
     margin: 0;
-    margin-bottom: 30px;
 }
 
 p {