From 167cefea3f2b1b9a3efef8dade6f814efd3d4caf Mon Sep 17 00:00:00 2001
From: bluesaxman <bluesaxman@murkfall.net>
Date: Mon, 18 Aug 2025 11:25:22 -0600
Subject: [PATCH] added and updated stylesheets

---
 main.css | 34 +++++++++++++++++++++++++++++++---
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/main.css b/main.css
index 8ae3c43..81b9654 100644
--- a/main.css
+++ b/main.css
@@ -22,19 +22,27 @@ body {
 	display: grid;
 	grid-template-columns: 1fr 1fr 1fr 1fr;
 	grid-template-rows: 1fr 1fr 1fr 1fr;
+	justify-items: center;
 	grid-gap: 5%;
 	padding: 5%;
 }
 
-.pecSlot {
+.libSlot, .pecSlot {
 	border: solid 3px #666;
 	border-radius: 6px;
-	user-select: none;	
+	user-select: none;
+	position: relative;
+}
+
+.pecSlot {
+	--square-pec-size: calc( min( min( 100vh, 100vw ), hypot( 100vh, 100vw ) ) * 0.15);
+	height: var(--square-pec-size);
+	width: var(--square-pec-size);
 }
 
 .empty {
 	color: #666;
-	font-size: 300%;
+	font-size: 100%;
 	text-align: center;
 }
 
@@ -87,4 +95,24 @@ body {
 
 .pec {
 	text-align: center;
+	height: 100%;
+	width: 100%;
+}
+
+.pecImage {
+	height: 100%;
+	width: 100%;
+	object-fit: contain;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+.pecName {
+	position: absolute;
+	width: 100%;
+	bottom: 0;
+	left: 0;
+	text-align: center;
+	background: rgba(255,255,255,0.3);
 }