diff --git a/css/main.css b/css/main.css
new file mode 100644
index 0000000..ce3c888
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,177 @@
+@font-face {
+    font-family: 'AktivGrotesk-Medium'; /*a name to be used later*/
+    src: url('https://hub.xpub.nl/soupboat/SI18/07/Interface/css/AktivGrotesk-Medium.otf'); /*URL to font*/
+}
+
+@font-face {
+    font-family: 'Decay_White_Std'; /*a name to be used later*/
+    src: url('https://hub.xpub.nl/soupboat/SI18/07/Interface/css/Decay-White-Std.woff'); /*URL to font*/
+}
+
+@font-face {
+    font-family: 'Decay_White_Alt'; /*a name to be used later*/
+    src: url('https://hub.xpub.nl/soupboat/SI18/07/Interface/css/Decay-White-Alt.woff'); /*URL to font*/
+}
+
+
+
+body {
+font-family: Decay_White_Alt;
+background-color: lightgrey;
+display: inline-block;
+
+}
+
+
+/* Remove default bullets */
+ul, #Unfolding_Implicancies {
+ list-style-type:none;
+ padding: 0px;
+ margin: 0px;
+
+}
+
+h1 {
+    font-family: Helvetica;
+    font-size: 200%;
+    font-weight: bold;
+    padding: 0px;
+    margin: 0px;
+    margin-top: 10px;
+    padding-left: 6px;
+}
+
+#infobox {
+    padding-top: 15px;
+    padding-bottom: 60px;
+    font-family: Helvetica;
+    font-weight:bold;
+    font-size: 100%;
+
+}
+
+li {
+  margin: 0px;
+  padding: 0px;
+  border-top: solid;
+  border-left: solid;
+  border-width: 2.5px;
+  border-color: black;
+  background-color: lightgrey;
+
+}
+
+li.info {
+    margin: 0px;
+    padding: 0px;
+    border-top: none;
+    border-left:none;
+    border-width: 0px;
+    background-color: lightgrey;
+    max-width: 1000px;
+}
+
+
+
+pre.info {
+    line-height: 150%;
+    font-family: Helvetica;
+
+
+}
+
+p.info {
+    line-height: 150%;
+    font-family: Helvetica;
+
+
+}
+
+
+/* Remove margins and padding from the parent ul */
+#Unfolding_Implicancies {
+ margin: 0px;
+ padding: 0px;
+
+  -webkit-filter: grayscale(100%);
+  -moz-filter: grayscale(100%);
+  -ms-filter: grayscale(100%);
+  filter: grayscale(100%);
+}
+
+
+
+
+/* Style the caret/arrow */
+.caret {
+ cursor: pointer;
+ user-select: none; /* Prevent text selection */
+
+}
+
+/* Create the caret/arrow with a unicode, and style it */
+.caret::before {
+ content: "\25B6";
+ color: black;
+ display: inline-block;
+ margin-right: 6px;
+ padding: 6px;
+}
+
+/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
+.caret-down::before {
+ transform: rotate(90deg);
+}
+
+
+
+/* Hide the nested list */
+.nested {
+ display: none;
+}
+
+/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
+.active {
+ display: block;
+ margin-left: 100px;
+
+}
+
+.mono {
+    font-family: Courier New;
+}
+
+img {
+    max-width: 500px;
+    margin: 0px;
+    padding: 8px;
+}
+
+video {
+    max-width: 500px;
+    margin: 0px;
+    padding: 8px;
+}
+
+
+pre {
+    font-family: Decay_White_Std;
+    margin: 0px;
+    padding: 8px;
+}
+
+
+audio {
+    width: 500px;
+    margin: 0px;
+    padding: 8px;
+}
+
+p {
+    display: block;
+    margin: 0px;
+    padding: 8px;
+    padding-top: 0px;
+    vertical-align: bottom;
+}
+