add the lords

app/assets/stylesheets/application.css

@@ -105,10 +105,11 @@ body {
 }
 
 h1 {
-    color: #ebdbd2;
+    color: #fe8019;
     margin: auto;
     text-align: center;
     padding-top: 10px;
+    padding-bottom: 1em;
 }
 
 a {
@@ -117,4 +118,43 @@ a {
 
 a:visited {
     color: #b16286;
+}
+
+.throne {
+    display: flex;
+    justify-content: center; /* Centers the throne-boxes within the throne div */
+    gap: 20px; /* Adds padding between the two throne-box divs */
+    color: #ebdbd2;
+}
+
+.throne-box {
+    flex: 1;
+    border: 1px solid #928374;
+    padding: 10px 10px 0;
+    text-align: center;
+    max-width: 360px;
+}
+
+.throne-title {
+    margin-top: 10px;
+    margin-bottom: 10px; /* Adds space below the title */
+    font-size: 1.5em; /* Adjust title font size */
+}
+
+.gambalord {
+    color: #fabd2f;
+}
+
+.gumbalord {
+    color: #fb4934;
+}
+
+.throne-name {
+    margin-bottom: 5px; /* Adds space below the name */
+    font-size: 1.3em; /* Adjust name font size */
+}
+
+.throne-purse {
+    margin-top: 10px;
+    font-size: 1.1em; /* Adjust purse font size */
 }

app/views/leaderboard/index.html.erb

@@ -1,5 +1,18 @@
 <h1>Force Kin Gamba Leaderboard</h1>
 
+<div class="throne">
+  <div class="throne-box">
+    <h3 class="throne-title gambalord">Gambalord</h3>
+    <h4 class="throne-name"><%= @players.first.name %></h4>
+    <h5 class="throne-purse"><%= @players.first.purse %></h5>
+  </div>
+  <div class="throne-box">
+    <h3 class="throne-title gumbalord">Gumbalord</h3>
+    <h4 class="throne-name"><%= @players.last.name %></h4>
+    <h5 class="throne-purse"><%= @players.last.purse %></h5>
+  </div>
+</div>
+
 <% if @players.any? %>
 <div class="wrapper">
   <div class="table">