more style changes

src/lib/styles/main.css

@@ -12,10 +12,11 @@
     --button-color: var(--bg-color);
     --button-bg-color-hover: var(--bingo-cell-bg-color-hover);
 
-    --warning-bg-color: rgb(132, 86, 0);
+    --warning-bg-color-hover: #454545;
 
     --overlay-bg-color: rgba(0, 0, 0, 0.7);
     --overlay-content-bg-color: #1b1b1b;
+    --overlay-content-border-color: #454545;
 
     --settings-bg-color: black;
     --settings-element-bg-color: #1c1c1c;
@@ -45,6 +46,7 @@
 
     --overlay-bg-color: rgba(255, 255, 255, 0.7);
     --overlay-content-bg-color: #f0f0f0;
+    --overlay-content-border-color: #ccc;
 
     --settings-bg-color: #f0f0f0;
     --settings-element-bg-color: #f0f0f0;
@@ -136,12 +138,16 @@ button:hover {
     width: 20vw;
     padding: 1rem;
     margin: 20px;
-    background-color: var(--warning-bg-color);
     border-radius: 10px;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
+    border: 5px solid var(--text-color);
+}
+
+.bingo-running-warning:hover {
+    background-color: var(--warning-bg-color-hover);
 }
 
 .overlay-background {
@@ -164,6 +170,7 @@ button:hover {
     min-width: 300px;
     text-align: center;
     box-shadow: 0 4px 8px var(--shadow-color);
+    border: 2px solid var(--overlay-content-border-color);
 }
 
 .settings-container {
@@ -227,11 +234,29 @@ button:hover {
     box-shadow: inset 0 0 10px var(--shadow-color);
 }
 
-.cookie-notice {
+.notice-box {
+    display:flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
     background-color: var(--bg-color);
     padding: 15px;
     margin: 10px;
-    margin-top: auto;
     border-radius: 8px;
     box-shadow: inset 0 4px 8px var(--shadow-color);
 }
+
+.button-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+    margin-bottom: 10px
+}
+
+.button-container > button {
+    margin: 0 10px;
+}
+
+.cookie-notice {
+    margin-top: auto;
+}

src/routes/+page.svelte

@@ -262,26 +262,26 @@ Bingo Item 25`;
     <h1>Randomized Bingo Generator</h1>
     <div style="margin-bottom: 10px;">
     </div>
-    <p>NOTE: If there are more lines than Bingo cells, not all Items will be in the Bingo. The selection is still randomized.</p>
-    <div>
-      <button on:click={generateBingo}>Regenerate Bingo</button>
-      <button on:click={downloadPDF}>Download as PDF</button>
-      <button on:click={openSettings}>Configure Bingo</button>
-    </div>
-    {#if running_bingo && tried_to_regen}
-      <div class="bingo-running-warning">
-        <p>You are currently playing this game of Bingo and it therefore doesn't Refresh changes or Regenerate the table. If you would like to End the Game, Click the Button below.</p>
-        <button style="background-color: darkred;" on:click={resetBingo}>Stop Bingo and Regenerate</button>
+    <div class="notice-box">
+      <div class="button-container">
+        <button on:click={generateBingo}>Regenerate Bingo</button>
+        <button on:click={downloadPDF}>Download as PDF</button>
+        <button on:click={openSettings}>Configure Bingo</button>
       </div>
-    {/if}
-    {#if running_bingo && !tried_to_regen}
-      <i style="margin-bottom: 10px;">A game is currently running. Changes made to the configuration are not being updated to the grid.</i>
-    {/if}
-    <div class="settings-element cookie-notice">
+      {#if running_bingo && tried_to_regen}
+        <div class="bingo-running-warning">
+          <p>You are currently playing this game of Bingo and it therefore doesn't Refresh changes or Regenerate the table. If you would like to End the Game, Click the Button below.</p>
+          <button on:click={resetBingo}>Stop Bingo and Regenerate</button>
+        </div>
+      {/if}
+      {#if running_bingo && !tried_to_regen}
+        <i style="margin-bottom: 10px;">A game is currently running. Changes made to the configuration are not being updated to the grid.</i>
+      {/if}
+    </div>
+    <div class="notice-box cookie-notice">
       <p>Notice: This Website uses functional Cookies to store the Running Bingo Game as well as the Entered Bingo Entries.</p>
     </div>
   </div>
-
   <div class="bingo-container bingo-grid-container">
     {#if grid.length > 0}
     <div class="bingo-grid" style="grid-template-columns: repeat({cols}, 1fr);">
@@ -320,7 +320,7 @@ Bingo Item 25`;
         <div class="flex-row-item settings-box">
           <h3>Bingo Items</h3>
           <div class="settings-element">
-            <p></p>
+            <p>NOTE: If there are more lines than Bingo cells, not all Items will be in the Bingo. The selection is still randomized.</p>
             <textarea class="bingo-item-input" bind:value={inputText} placeholder="Enter items line by line" on:input={generateBingo}></textarea>
           </div>
         </div>