finalization

_sass/_elements.scss

@@ -149,13 +149,68 @@ a:hover {
   }
 }
 
-.info {
+.info, .info-pages {
   padding: 40px;
   > div {
-    max-width: 700px;
+    max-width: 1200px;
     margin: auto;
   }
   p {
     margin: 20px 0;
   }
+}
+.info-pages {
+  h2, h3, h4, h5, h6 {
+    text-align: left;
+  }
+}
+
+.news, .links {
+  margin-top: 40px;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  h2 {
+    flex: 0 0 100%;
+    margin-bottom: 20px;
+  }
+  > div {
+    background-size: cover;
+    background-repeat: no;
+    background-position: center center;
+    flex: 1 1 512px;
+    min-height: 80vh;
+
+    padding: 40px;
+    box-sizing: border-box;
+    text-align: left;
+
+  }
+  .description {
+    h2, p, a {
+      text-align: center;
+    }
+    p {
+      margin-top: 20px;
+    }
+    p:last-child {
+      margin-bottom: 20px;
+    }
+    min-height: unset;
+  }
+}
+.news:nth-child(even), .links:nth-child(even) {
+  flex-direction: row-reverse;
+
+}
+.links {
+  > div {
+    min-height: unset;
+  }
+}
+.linksbg {
+  background-size: 100%;
+  background: rgb(31,23,41);
+  background: linear-gradient(180deg, rgba(31,23,41,1) 26%, rgba(56,255,89,0.25) 100%);
+
 }

_sass/_layout.scss

@@ -77,9 +77,9 @@ section {
   flex: 1 1 100%;
   padding: 20px;
   background-color: _palette(bg);
-  -webkit-box-shadow: inset 0px 23px 25px -25px rgba(0,0,0,0.1);
-  -moz-box-shadow: inset 0px 23px 25px -25px rgba(0,0,0,0.1);
-  box-shadow: inset 0px 23px 25px -25px rgba(0,0,0,0.1);
+  -webkit-box-shadow: inset 0px 23px 25px -25px _palette(border-alt);
+  -moz-box-shadow: inset 0px 23px 25px -25px _palette(border-alt);
+  box-shadow: inset 0px 23px 25px -25px _palette(border-alt);
   h2 {
     text-align: center;
   }

_sass/_navigation.scss

@@ -23,9 +23,9 @@
   -webkit-transition: all 400ms ease-in;
   -moz-transition: all 400ms ease-in;
   transition: all 400ms ease-in;
-  -webkit-box-shadow: 0px 3px 29px 0px rgba(0,0,0,0.15);
-  -moz-box-shadow: 0px 3px 29px 0px rgba(0,0,0,0.15);
-  box-shadow: 0px 3px 29px 0px rgba(0,0,0,0.15);
+  -webkit-box-shadow: 0px 3px 29px 0px _palette(border-alt);
+  -moz-box-shadow: 0px 3px 29px 0px _palette(border-alt);
+  box-shadow: 0px 3px 29px 0px _palette(border-alt);
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;

_sass/_player.scss

@@ -226,9 +226,9 @@ a[id^="btn"]::-moz-focus-inner {
     margin: 0;
     padding: 0;
     background-color: _palette(bg);
-    -webkit-box-shadow: inset 0px 23px 25px -25px rgba(0,0,0,0.25);
-    -moz-box-shadow: inset 0px 23px 25px -25px rgba(0,0,0,0.25);
-    box-shadow: inset 0px 23px 25px -25px rgba(0,0,0,0.25);
+    -webkit-box-shadow: inset 0px 23px 25px -25px _palette(border-alt);
+    -moz-box-shadow: inset 0px 23px 25px -25px _palette(border-alt);
+    box-shadow: inset 0px 23px 25px -25px _palette(border-alt);
     
     > h2, a, p {
       text-align: left;

_sass/libs/_vars.scss

@@ -135,13 +135,13 @@ $palette: (
 
   bg:         #1f1729,
   bg-alt:     rgba(31, 23, 41, 0.75),
-  fg:         #a38ab6,
-  fg-alt:     rgba(163, 138, 182, 0.25),
+  fg:         #ebdbf8,
+  fg-alt:     rgba(235, 219, 248, 0.25),
   border:     #000000,
   border-alt: rgba(0, 0, 0, 0.75),
   accent1:    #38ff59,
   accent1-alt:rgba(56, 255, 89, 0.75),
-  accent2:    #6800ca,
-  accent2-alt:rgba(104, 0, 202, 0.75),
+  accent2:    #8d3ed8,
+  accent2-alt:rgba(141, 62, 216, 0.75),
 
 );

_sass/trackplayer.scss

@@ -9,10 +9,7 @@
   background-size: 100%;
   background: rgb(31,23,41);
   background: linear-gradient(180deg, rgba(31,23,41,1) 26%, rgba(56,255,89,0.25) 100%);
-  -moz-transition: background-size 2s ease-in-out;
-  -webkit-transition: background-size 2s ease-in-out;
-  -ms-transition: background-size 2s ease-in-out;
-  transition: background-size 2s ease-in-out;
+
   > section {
     position: absolute;
     height: 100vh;