Began some designing

1 files changed, 66 insertions, 3 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index d1de6f3..aa51cdd 100755
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -4,12 +4,75 @@
  * @copyright Marvin Borner 2018
  */
 
+/** 
+  * General
+  */
+
+:root {
+    --BlueColor: #1e3264;
+}
 
 body {
-    font-family: 'Share Tech Mono', regular !important;
+    font-family: 'Varela Round', sans-serif !important;
     text-rendering: optimizeLegibility !important;
+    box-sizing: border-box !important;
+}
+
+.Main {
+    display: none;
+    min-height: 100vh;
+}
+
+/**
+ * General headers
+ */
+.SectionHeader {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    align-content: space-between;
+    width: 100%;
+}
+
+.SectionHeader h1 {
+    text-transform: capitalize;
+}
+
+/** 
+ * Gradients
+ */
+
+.GradientBackground>* {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    transition: opacity 1.5s cubic-bezier(.445, .05, .55, .95) 0s;
+    width: 100%;
+    height: 100vh;
+}
+
+.GradientBackground .Color:not(.Active) {
+    display: none;
+}
+
+.GradientBackground .GreenBlue {
+    background: linear-gradient(145deg, #c3f0c8, #509bf5);
 }
 
-h1 {
-    
+.GradientBackground .OrangePink {
+    background: linear-gradient(145deg, #ffc867, #f037a6);
+}
+
+.GradientBackground .GreenBlue {
+    background: linear-gradient(145deg, #c3f0c8, #509bf5);
+}
+
+/** 
+ * Favorites
+ */
+
+.FavoritesSection .SectionHeader {
+    height: 40vh;
+    color: var(--BlueColor);
 }
\ No newline at end of file