Work on lots of CSS magic

css/style.scss

@@ -1,51 +1,226 @@
 ---
 ---
-$blue: #26A6A6;
+$background: #2B2A27;
+$foreground: #EDE0CE;
+$margin: darken($background, 8%);
+$shadow: rgba(black, 0.3);
 
-header {
-    left: 0;
-}
-#sidebar {
-    width: 25%;
-    left: 0;
-}
-.flagText {
-    top: 0;
-    left: 0;
-    bottom: 0;
-    height: 30%;
-    width: 100%;
-    position: absolute;
-    text-align: center;
-    margin: auto;
-    z-index: 2;
+$blue: rgb(39, 167, 167);
+$orange: rgb(236, 103, 55);
+$green: rgb(188, 212, 42);
+$magenta: rgb(168, 66, 114);
 
+$sidebar-text: $background;
+$sidebar-font: 'Barlow', sans-serif;
+
+$title-text: $foreground;
+$title-font: 'Barlow', sans-serif;
+
+$body-text: $foreground;
+$body-font: 'Open Sans', sans-serif;
+
+
+::selection {
+    color: white;
+    background: $orange; /* WebKit/Blink Browsers */
 }
 
-.flag {
-    position: relative;
-    margin-top: 10px;
-    height: 50px;
-    width: 175px;
-    fill-opacity: 0;
-    left: -10px;
-
-    svg {
-        position: relative;
-        float:right;
-        right:-25px;
-    }
+::-moz-selection {
+    color: white;
+    background: $orange; /* WebKit/Blink Browsers */
 }
 
-.flag:hover {
-    fill-opacity: 100 !important;
-}
 
 .blue {
     fill: $blue;
     background-color: $blue;
 }
 
+.orange {
+    fill: $orange;
+    background-color: $orange;
+}
+
+.green {
+    fill: $green;
+    background-color: $green;
+}
+
+.magenta {
+    fill: $magenta;
+    background-color: $magenta;
+}
+
+body {
+    margin: 0;
+    background-color: $margin;
+    color-profile: sRGB;
+}
+
+
+#box {
+    background-color: $background;
+    max-width: 800px;
+    
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 0;
+    height: 100%;
+            box-shadow: 0 0 4px 5px $shadow;
+       -moz-box-shadow: 0 0 4px 5px $shadow;
+    -webkit-box-shadow: 0 0 4px 5px $shadow;
+}
+
+// HEADER
+
+#title {
+    margin:0;
+    padding: 10px;
+    font-family: $title-font;
+    color: $title-text;
+    font-weight: normal;
+    font-size: 28px;
+
+    a {
+        color: inherit;
+        text-decoration: none;
+    }
+
+    a:hover {
+        color: inherit;
+        text-decoration: underline;
+    }
+}
+
+.slash {
+    display: inline-block;
+    vertical-align: -10%;
+    font: {
+        size: 36px;
+    }
+}
+
+#main {
+    display: flex;
+}
+
+#content {
+    padding: {
+        right: 20px;
+        left: 20px;
+    }
+    flex-grow: 1;
+    font-family: $body-font;
+    color: $body-text;
+    line-height: 1.5em;
+
+    p {
+        margin: {
+            top: 0;
+            bottom: 15px;
+        }
+    }
+}
+
+
+
+#sidebar {
+    flex-shrink: 0;
+    width: 180px;
+    margin: 0;
+
+    padding: {
+        top: 5px;
+        bottom: 5px;
+        left: 0px;
+    }
+    background-color: $background;
+}
+
+.flag {
+    display: inline-block;
+    text-align: center;
+
+    position: relative;
+    padding: {
+        top: 5px;
+        bottom: 5px;
+        left: 0px;
+    }
+    //height: 60px;
+    width: 90%;
+    left: -3px;
+    
+    fill-opacity: 0;
+
+
+    .flagButton {
+        //position: absolute;
+        display: block;
+        float: left;
+
+        left: 0;
+        height: 50px;
+        width: 160px;
+
+        border-radius: 0 5px 5px 0;
+
+        .flagText {
+            z-index: 2;
+            float: right;
+            width: 160px;
+            text-align: center;
+            font-family: $sidebar-font;
+            color: $sidebar-text;
+            font-size: 20px;
+            text-align: center;
+            font-weight: 600;
+
+            height: 60%;
+            top: 50%;
+            bottom: 50%;
+            padding-top: 10px;
+        }
+    }
+}
+
+.flag:hover {
+
+    .flagButton {
+        width: 170px;
+        border-radius: 0;
+    }
+        /*
+            content: "";
+            display: inline-block;
+            position: absolute;
+            left: 0px;
+            top: 25px;
+            width: 0; 
+            height: 0; 
+            border-top: 25px solid transparent; 
+            border-bottom: 25px solid transparent; 
+        
+    }
+
+    .blue::after {
+        border-left: 20px solid $blue; 
+    }
+
+    .orange::after {
+        border-left: 20px solid $orange; 
+    }
+
+    .green::after {
+        border-left: 20px solid $green; 
+    }
+
+    .magenta::after {
+        border-left: 20px solid $magenta; */
+}
+
+
+
 footer {
     font-size: 1em;
     text-align: center;