refacto(all): Rebuild website on my standards

assets/css/style.css

@@ -1,30 +1,3 @@
-@import 'normalize.css';
-
-@font-face {
-  font-family: 'MoodboardFont';
-  font-weight: 400;
-  src: url('../fonts/moodboardfont-webfont.woff2') format('woff2'),
-    url('../fonts/moodboardfont-webfont.woff') format('woff');
-}
-
-@font-face {
-  font-family: 'Queensides';
-  font-weight: 400;
-  src: url('../fonts/Queensides-3z7Ey.ttf');
-}
-
-@font-face {
-  font-family: 'QueensidesL';
-  font-weight: 300;
-  src: url('../fonts/QueensidesLight-ZVj3l.ttf');
-}
-
-@font-face {
-  font-family: 'QueensidesM';
-  font-weight: 700;
-  src: url('../fonts/QueensidesMedium-x30zV.ttf');
-}
-
 *,
 :after,
 :before {
@@ -32,55 +5,12 @@
   margin: 0;
 }
 
-:root {
-  --color-bg-head: #77A3D2;
-}
 
 html {
   scroll-behavior: smooth;
 }
 
 
-@media(prefers-color-scheme: dark) {
-  :root {
-    --color-bg-head: #77A3D2;
-    --color-bg: white;
-    --color-bg-sctn-pink: #EDCCE7;
-    --color-bg-sctn-green: #CDFB52;
-    --color-bg-sctn-blue: #52f8fb;
-    --color-bg-sctn-fuscia: #FF00C7;
-    --color-active: #FF00C7;
-    --color-visited: #4B003B;
-    --color-hover: #EDCCE7;
-    --color-link: #000000;
-    --color-icone: #fff;
-    --color-discu-pink: #FFB4EF;
-    --color-link-f: #00fa6c;
-    --color-link-block: #4B003B;
-  }
-
-  [data-theme="light"] {
-    --color-bg: white;
-    --color-txt: #001f1f;
-    --color-link: #000000;
-    --color-icone: #000;
-    --color-discu-pink: #FFB4EF;
-    --color-discu-green: #CEFFB2;
-    --color-discu-blue: #B4E9FF;
-  }
-
-  [data-theme="dark"] {
-    --color-bg: #000000;
-    --color-txt: #ffffff;
-    --color-txt-b: #000000;
-    --color-link: #ffff;
-    --color-icone: #fff;
-    --color-discu-pink: #4B003B;
-    --color-discu-green: #1C4D00;
-    --color-discu-blue: #00354B;
-  }
-}
-
 /*BTN THEME*/
 [data-theme="dark"] .btn__dark {
   display: none;

assets/css/style_hactarus.css

@@ -0,0 +1,67 @@
+/* Navigation */
+body {
+    margin-top: 5vh;
+}
+header > nav {
+        position: fixed;
+        top: 0;
+        right: 0;
+        left: 0;
+        z-index: 1030;
+}
+
+nav > ul {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    list-style: none;
+    justify-content: space-around;
+}
+
+nav > ul > li {
+    flex: auto;
+}
+
+section {
+    padding-top: 5vh;
+}
+
+h2 {
+  background-color: var(--color-bg);
+  color: var(--color-txt);
+}
+
+/* Decorations */
+.strip {
+    box-sizing: border-box;
+    width: 90%;
+    height: 4em;
+    z-index: -1;
+    position: absolute;
+    margin-left: -19px;
+    background-color: #FF00C7;
+
+}
+
+.strip>.strip--1 {
+    top: 55em;
+    transform: skew(30deg) rotate(30deg);
+}
+
+.strip>.strip--2 {
+    top: 82em;
+    transform: skew(-30deg) rotate(-30deg);
+}
+
+.strip>.strip--3 {
+    top: 109em;
+    transform: skew(30deg) rotate(30deg);
+}
+
+.strip>.strip--cash {
+    max-width: 100%;
+    background-image: url(/assets/images/stripeuro.png);
+    background-size: cover;
+    filter: invert(1);
+    margin-top: -19em;
+}