1 files changed, 77 insertions, 8 deletions
diff --git a/land-and-freedom.scss b/land-and-freedom.scss
index 65694fc..9c68e03 100644
--- a/land-and-freedom.scss
+++ b/land-and-freedom.scss
@@ -1,12 +1,81 @@
+// @use "sass:math";
+@use 'sass:map';
+
+main {
+  // background-color: rgb(213, 196, 131);
+	background-color: darkolivegreen;
+}
+
+/* MAP */
+
+#mapwrap {
+  width: 1000px;
+  height: 850px;
+  // background-color: #999f85;
+  box-shadow: 1px 2px 4px #0004;
+}
+
+// #map {
+// 	background-repeat: no-repeat;
+// 	background-size: cover;
+// 	width: 1275px;
+// 	height: 1650px;
+// 	overflow: clip;
+// }
+
 #map {
-	background-repeat: no-repeat;
-	background-size: 100% 100%;
-	width: 1000px;
-	height: 850px;
-	overflow: clip;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 1000px;
+  height: 850px;
+  overflow: clip;
 }
 
-#map { background-image: url(images/map75.png) }
+#map {
+  background-image: url(images/map75.png);
+}
 @media (min-resolution: 97dpi) {
-	#map { background-image: url(images/map100.png) }
-}
-\ No newline at end of file
+  #map {
+    background-image: url(images/map100.png);
+  }
+}
+
+#hand {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  margin-top: 16px;
+  padding: 16px;
+  justify-content: center;
+}
+
+.front {
+  position: absolute;
+  box-sizing: border-box;
+  width: 93px;
+  height: 102px;
+  // background-color: yellow;
+  // opacity: 0.5;
+}
+
+.front[data-front-id='3'] {
+  width: 104px;
+  height: 114px;
+}
+
+.card {
+  background-size: 100% 100%;
+  // width: 275px;
+  // height: 375px;
+	width: 198px;
+  height: 270px;
+  // border: 1px solid black;
+  border-radius: 5px;
+	box-shadow: 0 0 0 1px #333;
+}
+
+@for $i from 1 through 62 {
+  .card[data-card-id='#{$i}'] {
+    background-image: url('images/cards100/card_#{$i}.png');
+  }
+}