diff --git a/style.css b/style.css
new file mode 100644
index 0000000..d044ae7
--- /dev/null
+++ b/style.css
@@ -0,0 +1,266 @@
+
+body{   
+    margin: 0;
+    display: block;
+
+}
+
+.page {
+        height: 297mm;
+        width: 210mm;
+        margin: 0 auto;
+
+}
+
+@page {
+    size: a4;
+
+  
+}
+
+.card {
+    float: left;
+    width: calc(210mm / 2 - 10mm); /* Adjusted width to fit 2 cards per row with margins */
+    height: calc(297mm / 4 - 10mm); /* Adjusted height to fit 4 rows per page with margins */
+    /*border: 1mm solid salmon;*/
+    margin: 5mm; 
+    box-sizing: border-box; /* Includes the border in the width and height calculation */
+    overflow: hidden;   
+
+
+
+
+}
+
+.card.left-card {
+    padding-right: 10mm;
+
+}
+
+.card.right-card {
+    padding-left: 10mm;
+
+}
+    
+/*game */ 
+h1{
+    font-size: 12pt;
+    font-family: 'NotCourierSans Bold', Courier, monospace;
+    color: #c4007a;
+    font-weight: 600;
+    padding-left: 5mm;
+    padding-right: 5mm;
+    text-align: center;
+    padding-top: 50px;
+    overflow: hidden;     
+    margin: 0mm;
+    margin-bottom: 5pt;
+    line-height: 14pt;
+    overflow-wrap: break-word;
+
+
+
+}
+
+/* thesis quotes */ 
+h2{
+    font-family: 'Catamaran Bold', sans-serif;
+    font-weight: 1000;
+    font-size: 12pt;
+    color: #a6dbf0;   
+    margin: 0mm;
+    margin-bottom: 5pt;
+    line-height: 14pt;
+    padding: 5mm 5mm 0mm 5mm;
+
+}
+
+/* alternative materials*/ 
+h3 {    
+    font-family: 'Catamaran Bold', sans-serif;
+    font-weight: 1000;
+    font-size: 12pt;
+    color: #E2C044;
+    margin: 0mm;
+    margin-bottom: 5pt;
+    line-height: 14pt;
+    padding: 5mm 5mm 0mm 5mm;
+}
+
+/* wiki*/ 
+h4{
+    font-family: 'NotCourierSans Bold',Courier, sans-serif;
+    font-weight: 800;
+    font-size: 12pt;
+    color: #9594C4;
+    line-height:normal;
+    padding-left: 10mm;
+    margin: 1mm;
+    padding: 5mm 5mm 0mm 5mm;
+
+
+}
+.h4::after {
+    content: ":";
+    white-space: pre;
+  }
+  
+  .a4::after {
+    content: "\A";
+    white-space: pre;
+  }
+
+p{
+    margin: 0mm;
+    line-height: 10.5pt;
+    font-family: 'Catamaran Medium', sans-serif;
+    font-weight: 400;
+    font-size: 10pt;
+    color: #393E41;
+    padding: 0mm 5mm 0mm 5mm;
+    
+    
+}
+
+.tensteps{
+    font-family: 'Catamaran Bold', sans-serif;
+    font-weight: 800;
+    font-size: 12pt;
+    color: #B4D194;
+    line-height: 16pt;
+    padding-top: 50%;;
+    padding-left: 5mm;
+    text-align: center;
+    display: inline-block;
+    align-self: flex-end;
+
+}
+
+
+img {
+    width: 100%;;
+    height: 100%;
+    object-fit: cover;
+    float: left;
+    height: auto;
+	max-width: 100%;
+
+}
+
+.image_titles {
+    position: absolute;
+    width: 105mm;
+    text-align: center;
+}
+
+.game{
+
+
+    object-fit:cover;
+}
+
+@media print {
+
+    * {
+        box-sizing: border-box;
+      }
+
+    .body{
+        margin: 0;
+        -webkit-print-color-adjust: exact !important;   /* Chrome, Safari 6 – 15.3, Edge */
+        color-adjust: exact !important;                 /* Firefox 48 – 96 */
+        print-color-adjust: exact !important;      
+    }
+
+    @page{
+        size: a4 !important;
+        margin: 0;
+        color-adjust: exact;
+        -webkit-print-color-adjust: exact !important;   /* Chrome, Safari 6 – 15.3, Edge */
+        color-adjust: exact !important;                 /* Firefox 48 – 96 */
+        print-color-adjust: exact !important;      
+    }
+
+
+
+    .overflowing-element {
+        overflow: hidden;
+      }
+    nav{
+        display: none !important;
+    }
+    
+
+}
+
+@media screen { 
+        .page{
+            border: 1px solid #9594c4;
+            margin-bottom: 5px;
+    
+        }
+
+
+      nav {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 50;
+        padding: 24px;
+        text-align: right;
+        position: fixed;
+        top: 0;
+        display: flex;
+        justify-content: flex-end;
+
+        
+    }
+   
+    nav button {
+        margin-left: 10px;
+    }
+    
+    #textField {
+        margin-top: 100px;
+        position: absolute;
+        right: 0;
+        padding: 24px;
+    }
+
+    .btn {
+        background: white;
+        display: inline-block;
+        min-width: 50px;
+        height: 50px;
+        border-radius: 24px;
+        padding: 0 4px;
+        border: 1px solid currentColor;
+        color: #9594c4;
+        transition-duration: 0.7s;
+        cursor: pointer;
+        
+
+      }
+
+    .btn:hover {
+        background-color: #9594c4;
+
+      }
+
+
+}
+
+
+#textbox {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100px;
+    height: 50px;
+  }
+
+  
+  
+  
+  
\ No newline at end of file