Added game rules

public/css/components.css

@@ -12,7 +12,7 @@ body {
     overflow: hidden;
 }
 
-main {
+#main {
     display: grid;
     grid-template-columns: 80% 20%;
     height: calc(100% - 3em - 10px);
@@ -32,4 +32,61 @@ main {
     direction: ltr;
     -webkit-font-feature-settings: "liga";
     -webkit-font-smoothing: antialiased;
+}
+
+
+#modal {
+    display: none;
+    position: fixed;
+    z-index: 100000;
+    padding-top: 50px;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0, 0, 0, 0.8);
+}
+
+#content {
+    background-color: #fefefe;
+    margin: auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 90%;
+    height: calc(100% - 142px);
+    border-radius: 5px;
+}
+
+.divider {
+    background: #585858;
+    height: 0.1em;
+    margin: 0.5em 0 0.5em;
+}
+
+#modal_header {
+    display: grid;
+    grid-template-columns: 90% 10%;
+}
+
+#modal_header #modal_title {
+    grid-column: 1;
+    margin: 0;
+}
+
+#modal_header > span {
+    grid-column: 2;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
+
+#modal_header span i {
+    cursor: pointer;
+}
+
+#spielanleitung {
+    background-color: #fefefe;
+    width: 100%;
+    height: calc(100% - 50px);
 }

public/css/header.css

@@ -12,6 +12,21 @@ header {
     grid-template-columns: 25% 40% 25%;
 }
 
+.spielanleitung {
+    display: flex;
+    align-items: center;
+    font-size: 1.5em;
+    padding-left: 10px;
+}
+
+.spielanleitung span {
+    background: #404040;
+    border: 1px solid #000000;
+    padding: 5px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
 .title {
     text-align: center;
     display: flex;