1 files changed, 287 insertions, 0 deletions
diff --git a/land-and-freedom.css b/land-and-freedom.css
index 0d6b494..5928f57 100644
--- a/land-and-freedom.css
+++ b/land-and-freedom.css
@@ -1,3 +1,14 @@
+main {
+  background-color: darkolivegreen;
+}
+
+/* MAP */
+#mapwrap {
+  width: 1000px;
+  height: 850px;
+  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2666666667);
+}
+
 #map {
   background-repeat: no-repeat;
   background-size: 100% 100%;
@@ -15,3 +26,279 @@
     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;
+}
+
+.front[data-front-id="3"] {
+  width: 104px;
+  height: 114px;
+}
+
+.card {
+  background-size: 100% 100%;
+  width: 198px;
+  height: 270px;
+  border-radius: 5px;
+  box-shadow: 0 0 0 1px #333;
+}
+
+.card[data-card-id="1"] {
+  background-image: url("images/cards100/card_1.png");
+}
+
+.card[data-card-id="2"] {
+  background-image: url("images/cards100/card_2.png");
+}
+
+.card[data-card-id="3"] {
+  background-image: url("images/cards100/card_3.png");
+}
+
+.card[data-card-id="4"] {
+  background-image: url("images/cards100/card_4.png");
+}
+
+.card[data-card-id="5"] {
+  background-image: url("images/cards100/card_5.png");
+}
+
+.card[data-card-id="6"] {
+  background-image: url("images/cards100/card_6.png");
+}
+
+.card[data-card-id="7"] {
+  background-image: url("images/cards100/card_7.png");
+}
+
+.card[data-card-id="8"] {
+  background-image: url("images/cards100/card_8.png");
+}
+
+.card[data-card-id="9"] {
+  background-image: url("images/cards100/card_9.png");
+}
+
+.card[data-card-id="10"] {
+  background-image: url("images/cards100/card_10.png");
+}
+
+.card[data-card-id="11"] {
+  background-image: url("images/cards100/card_11.png");
+}
+
+.card[data-card-id="12"] {
+  background-image: url("images/cards100/card_12.png");
+}
+
+.card[data-card-id="13"] {
+  background-image: url("images/cards100/card_13.png");
+}
+
+.card[data-card-id="14"] {
+  background-image: url("images/cards100/card_14.png");
+}
+
+.card[data-card-id="15"] {
+  background-image: url("images/cards100/card_15.png");
+}
+
+.card[data-card-id="16"] {
+  background-image: url("images/cards100/card_16.png");
+}
+
+.card[data-card-id="17"] {
+  background-image: url("images/cards100/card_17.png");
+}
+
+.card[data-card-id="18"] {
+  background-image: url("images/cards100/card_18.png");
+}
+
+.card[data-card-id="19"] {
+  background-image: url("images/cards100/card_19.png");
+}
+
+.card[data-card-id="20"] {
+  background-image: url("images/cards100/card_20.png");
+}
+
+.card[data-card-id="21"] {
+  background-image: url("images/cards100/card_21.png");
+}
+
+.card[data-card-id="22"] {
+  background-image: url("images/cards100/card_22.png");
+}
+
+.card[data-card-id="23"] {
+  background-image: url("images/cards100/card_23.png");
+}
+
+.card[data-card-id="24"] {
+  background-image: url("images/cards100/card_24.png");
+}
+
+.card[data-card-id="25"] {
+  background-image: url("images/cards100/card_25.png");
+}
+
+.card[data-card-id="26"] {
+  background-image: url("images/cards100/card_26.png");
+}
+
+.card[data-card-id="27"] {
+  background-image: url("images/cards100/card_27.png");
+}
+
+.card[data-card-id="28"] {
+  background-image: url("images/cards100/card_28.png");
+}
+
+.card[data-card-id="29"] {
+  background-image: url("images/cards100/card_29.png");
+}
+
+.card[data-card-id="30"] {
+  background-image: url("images/cards100/card_30.png");
+}
+
+.card[data-card-id="31"] {
+  background-image: url("images/cards100/card_31.png");
+}
+
+.card[data-card-id="32"] {
+  background-image: url("images/cards100/card_32.png");
+}
+
+.card[data-card-id="33"] {
+  background-image: url("images/cards100/card_33.png");
+}
+
+.card[data-card-id="34"] {
+  background-image: url("images/cards100/card_34.png");
+}
+
+.card[data-card-id="35"] {
+  background-image: url("images/cards100/card_35.png");
+}
+
+.card[data-card-id="36"] {
+  background-image: url("images/cards100/card_36.png");
+}
+
+.card[data-card-id="37"] {
+  background-image: url("images/cards100/card_37.png");
+}
+
+.card[data-card-id="38"] {
+  background-image: url("images/cards100/card_38.png");
+}
+
+.card[data-card-id="39"] {
+  background-image: url("images/cards100/card_39.png");
+}
+
+.card[data-card-id="40"] {
+  background-image: url("images/cards100/card_40.png");
+}
+
+.card[data-card-id="41"] {
+  background-image: url("images/cards100/card_41.png");
+}
+
+.card[data-card-id="42"] {
+  background-image: url("images/cards100/card_42.png");
+}
+
+.card[data-card-id="43"] {
+  background-image: url("images/cards100/card_43.png");
+}
+
+.card[data-card-id="44"] {
+  background-image: url("images/cards100/card_44.png");
+}
+
+.card[data-card-id="45"] {
+  background-image: url("images/cards100/card_45.png");
+}
+
+.card[data-card-id="46"] {
+  background-image: url("images/cards100/card_46.png");
+}
+
+.card[data-card-id="47"] {
+  background-image: url("images/cards100/card_47.png");
+}
+
+.card[data-card-id="48"] {
+  background-image: url("images/cards100/card_48.png");
+}
+
+.card[data-card-id="49"] {
+  background-image: url("images/cards100/card_49.png");
+}
+
+.card[data-card-id="50"] {
+  background-image: url("images/cards100/card_50.png");
+}
+
+.card[data-card-id="51"] {
+  background-image: url("images/cards100/card_51.png");
+}
+
+.card[data-card-id="52"] {
+  background-image: url("images/cards100/card_52.png");
+}
+
+.card[data-card-id="53"] {
+  background-image: url("images/cards100/card_53.png");
+}
+
+.card[data-card-id="54"] {
+  background-image: url("images/cards100/card_54.png");
+}
+
+.card[data-card-id="55"] {
+  background-image: url("images/cards100/card_55.png");
+}
+
+.card[data-card-id="56"] {
+  background-image: url("images/cards100/card_56.png");
+}
+
+.card[data-card-id="57"] {
+  background-image: url("images/cards100/card_57.png");
+}
+
+.card[data-card-id="58"] {
+  background-image: url("images/cards100/card_58.png");
+}
+
+.card[data-card-id="59"] {
+  background-image: url("images/cards100/card_59.png");
+}
+
+.card[data-card-id="60"] {
+  background-image: url("images/cards100/card_60.png");
+}
+
+.card[data-card-id="61"] {
+  background-image: url("images/cards100/card_61.png");
+}
+
+.card[data-card-id="62"] {
+  background-image: url("images/cards100/card_62.png");
+}