added and updated stylesheets

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;
+	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);
 }