1 files changed, 53 insertions, 21 deletions

diff --git a/public/css/style.css b/public/css/style.css
index 3060098..70c6657 100755
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -1,5 +1,30 @@
 /* TYPOGRAPHY */
 @font-face {
+    font-family: Charter;
+    src: url(/fonts/charter_regular.woff2) format('woff2-variations');
+    font-style: normal;
+}
+
+@font-face {
+    font-family: Charter;
+    src: url(/fonts/charter_italic.woff2) format('woff2-variations');
+    font-style: italic;
+}
+
+@font-face {
+    font-family: Charter;
+    src: url(/fonts/charter_bold.woff2) format('woff2-variations');
+    font-weight: bold;
+}
+
+@font-face {
+    font-family: Charter;
+    src: url(/fonts/charter_bold_italic.woff2) format('woff2-variations');
+    font-style: italic;
+    font-weight: bold;
+}
+
+@font-face {
     font-family: "Fredoka";
     font-style: normal;
     font-weight: 300 700;
@@ -12,13 +37,14 @@
 }
 
 body {
+    font-family: "", sans-serif;
     color: var(--color--black);
 }
 
 h1,
 h2,
 h3 {
-    font-family: "Fredoka", sans-serif;
+    font-family: "Charter", sans-serif;
     font-weight: 400;
     font-optical-sizing: auto;
     font-weight: 400;
@@ -26,7 +52,7 @@ h3 {
 }
 
 .lead {
-    font-family: "Fredoka", sans-serif;
+    font-family: "Charter", sans-serif;
     font-weight: 300;
     font-optical-sizing: auto;
     font-style: normal;
@@ -225,26 +251,25 @@ html {
 }
 
 body {
-    background: var(--color-grey-97);
+    background: #fdfdfd;
 }
 
 body > #container {
     min-height: 100vh;
     width: 100%;
-    max-width: 75rem;
+    max-width: 55em;
     display: grid;
     margin: 0 auto;
-    grid-template-columns: 1fr;
-    grid-template-rows: min-content auto;
     padding: 0;
 }
 
 #container > #content {
     overflow: hidden;
     border: 1px solid var(--color-grey-90);
-    background: #fff;
+    background: #fdfdfd;
     display: flex;
     flex-direction: column;
+	padding: 1em;
 }
 
 #container > #content > main {
@@ -252,7 +277,7 @@ body > #container {
 }
 
 #container > #content > main.page {
-    padding: 1rem;
+    /* padding: 1rem; */
 }
 
 #container > #content > main.event > *:not(.event-header-image,.event__editing-banner) {
@@ -274,29 +299,22 @@ body > #container {
 @media (min-width: 768px) {
     body > #container {
         padding: 1rem;
-        grid-template-columns: 1fr 4fr;
-        grid-template-rows: auto;
+        margin-top: 6%;
         gap: 1rem;
     }
     #container > #content {
-        border-radius: 1rem;
-        box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
-    }
-    #container > #content > main.page {
-        padding: 2rem;
+        border-radius: 4px;
+        border: 1px DarkSlateGrey dotted;
+        box-shadow: 4px 4px 0px rgba(0, 0, 0, .5);
     }
+    #container > #content > main.page {}
 }
 
-@media (min-width: 992px) {
-    body > #container {
-        grid-template-columns: 1fr 5fr;
-    }
-}
 
 /* SIDEBAR */
 
 #sidebar h1 {
-    font-family: "Fredoka", sans-serif;
+    font-family: "Charter", sans-serif;
     font-weight: 700;
     font-optical-sizing: auto;
     font-style: normal;
@@ -799,3 +817,17 @@ article.static-page header {
     margin-bottom: 1rem;
     border-bottom: 1px solid #e0e0e0;
 }
+
+.navi {
+    text-align: center;
+}
+
+.instance-description {
+    text-align: center;
+}
+
+.logo {
+    width: 250px;
+    max-width: 60%;
+    margin: 3em;
+3