soundcloud player and some credit stuff

assets/css/main.css

@@ -16,6 +16,11 @@ body {
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
+  text-transform: uppercase;
+}
+
+iframe {
+  margin: 1.5% 1.5% 1.5% 1.5%;
 }
 
 .socials {
@@ -33,8 +38,6 @@ body {
 .socials a {
   text-decoration: none;
   color: #ffffff;
-  -webkit-animation: SocialsAnimated 5s linear infinite;
-          animation: SocialsAnimated 5s linear infinite;
 }
 
 .socials a:hover {
@@ -57,12 +60,11 @@ body {
 .creator {
   font-size: 2.5vh;
   color: white;
+  text-align: center;
   display: table-caption;
   padding: 1vh;
   position: absolute;
   top: 95%;
-  left: 50%;
-  margin-left: -120px;
 }
 
 .creator a {
@@ -79,10 +81,6 @@ body {
 .them {
   width: auto;
   height: 16vh;
-}
+  margin-left: -20px;
-
-.music {
-  margin-left: -120px;
-  width: 100%;
 }
 /*# sourceMappingURL=main.css.map */

assets/css/main.css.map

@@ -1,6 +1,6 @@
 {
     "version": 3,
-    "mappings": "AAAA,UAAU;EACN,WAAW,EAAE,QAAQ;EACrB,GAAG,EAAE,2CAA2C;;;AAGpD,AAAA,CAAC,CAAC;EACD,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACP,cAAM,EAAE,OAAO;CAAK;;AAGxB,AAAA,IAAI,CAAC;EACD,WAAW,EAAE,oBAAoB;EACjC,gBAAgB,EAAE,+BAA+B;EACjD,eAAe,EAAE,KAAK;EACtB,qBAAqB,EAAE,KAAK;EAC5B,mBAAmB,EAAE,MAAM;EAC3B,iBAAiB,EAAE,SAAS;CAAG;;AAGnC,AAAA,QAAQ,CAAC;EACL,SAAS,EAAE,GAAG;EACd,IAAI,EAAE,CAAC;EACP,WAAW,EAAE,GAAG;EAChB,cAAc,EAAE,IAAI;EACpB,QAAQ,EAAE,QAAQ;EAClB,UAAU,EAAE,MAAM;EAClB,GAAG,EAAE,GAAG;EACR,KAAK,EAAE,IAAI;EACX,cAAc,EAAE,SAAS;CAQA;;AAjB7B,AAWI,QAXI,CAWJ,CAAC,CAAC;EACE,eAAe,EAAE,IAAI;EACrB,KAAK,EAAE,OAAO;EACd,SAAS,EAAE,kCAAkC;CAAG;;AAdxD,AAgBI,QAhBI,CAgBJ,CAAC,AAAA,MAAM,CAAC;EACJ,KAAK,EAAE,SAAS;CAAG;;AAG3B,AAAA,KAAK,CAAC;EACF,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;CAAG;;AAEnB,AAAA,QAAQ,CAAC;EACL,QAAQ,EAAE,QAAQ;EAClB,IAAI,EAAE,GAAG;EACT,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,WAAW,EAAE,KAAK;CAAG;;AAEzB,AAAA,QAAQ,CAAC;EACL,SAAS,EAAE,KAAK;EAChB,KAAK,EAAE,KAAK;EACZ,OAAO,EAAE,aAAa;EACtB,OAAO,EAAE,GAAG;EACZ,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,GAAG;EACR,IAAI,EAAE,GAAG;EACT,WAAW,EAAE,MAAM;CAAG;;AAE1B,AAAA,QAAQ,CAAC,CAAC,CAAC;EACH,eAAe,EAAE,IAAI;EACrB,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,KAAK,EAAE,OAAO;CAAG;;AAEzB,AAAA,QAAQ,CAAC,CAAC,AAAA,MAAM,CAAC;EACb,KAAK,EAAE,SAAS;CAAG;;AAEvB,AAAA,KAAK,CAAC;EACF,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;CAAG;;AAEnB,AAAA,MAAM,CAAC;EACH,WAAW,EAAE,MAAM;EACnB,KAAK,EAAE,IAAI;CAAG",
+    "mappings": "AAAA,UAAU;EACN,WAAW,EAAE,QAAQ;EACrB,GAAG,EAAE,2CAA2C;;;AAGpD,AAAA,CAAC,CAAC;EACD,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACP,cAAM,EAAE,OAAO;CAAK;;AAGxB,AAAA,IAAI,CAAC;EACD,WAAW,EAAE,oBAAoB;EACjC,gBAAgB,EAAE,+BAA+B;EACjD,eAAe,EAAE,KAAK;EACtB,qBAAqB,EAAE,KAAK;EAC5B,mBAAmB,EAAE,MAAM;EAC3B,iBAAiB,EAAE,SAAS;EAC5B,cAAc,EAAE,SAAS;CAAG;;AAEhC,AAAA,MAAM,CAAC;EACH,MAAM,EAAE,mBAAmB;CAAG;;AAElC,AAAA,QAAQ,CAAC;EACL,SAAS,EAAE,GAAG;EACd,IAAI,EAAE,CAAC;EACP,WAAW,EAAE,GAAG;EAChB,cAAc,EAAE,IAAI;EACpB,QAAQ,EAAE,QAAQ;EAClB,UAAU,EAAE,MAAM;EAClB,GAAG,EAAE,GAAG;EACR,KAAK,EAAE,IAAI;EACX,cAAc,EAAE,SAAS;CAOA;;AAhB7B,AAWI,QAXI,CAWJ,CAAC,CAAC;EACE,eAAe,EAAE,IAAI;EACrB,KAAK,EAAE,OAAO;CAAG;;AAbzB,AAeI,QAfI,CAeJ,CAAC,AAAA,MAAM,CAAC;EACJ,KAAK,EAAE,SAAS;CAAG;;AAG3B,AAAA,KAAK,CAAC;EACF,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;CAAG;;AAEnB,AAAA,QAAQ,CAAC;EACL,QAAQ,EAAE,QAAQ;EAClB,IAAI,EAAE,GAAG;EACT,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,WAAW,EAAE,KAAK;CAAG;;AAGzB,AAAA,QAAQ,CAAC;EACL,SAAS,EAAE,KAAK;EAChB,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,MAAM;EAClB,OAAO,EAAE,aAAa;EACtB,OAAO,EAAE,GAAG;EACZ,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,GAAG;CAAG;;AAIf,AAAA,QAAQ,CAAC,CAAC,CAAC;EACH,eAAe,EAAE,IAAI;EACrB,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,KAAK,EAAE,OAAO;CAAG;;AAEzB,AAAA,QAAQ,CAAC,CAAC,AAAA,MAAM,CAAC;EACb,KAAK,EAAE,SAAS;CAAG;;AAEvB,AAAA,KAAK,CAAC;EACF,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,WAAW,EAAE,KAAK;CAAG",
     "sources": [
         "main.sass"
     ],

assets/css/main.sass

@@ -3,7 +3,7 @@
     src: url('../fonts/Gotham-Font/Gotham-Bold.otf');
 
 
-* 
+*
 	margin: 0
 	padding: 0
     cursor: pointer
@@ -16,7 +16,10 @@ body
     background-attachment: fixed
     background-position: center
     background-repeat: no-repeat
+    text-transform: uppercase
 
+iframe
+    margin: 1.5% 1.5% 1.5% 1.5%
 
 .socials
     font-size: 4vh
@@ -32,7 +35,6 @@ body
     a
         text-decoration: none
         color: #ffffff
-        animation: SocialsAnimated 5s linear infinite
 
     a:hover
         color: #a865ff81
@@ -49,15 +51,17 @@ body
     bottom: 30px
     margin-left: -50px
 
+
 .creator
     font-size: 2.5vh
     color: white
+    text-align: center
     display: table-caption
     padding: 1vh
     position: absolute
     top: 95%
-    left: 50%
+
-    margin-left: -120px
+
 
 .creator a
         text-decoration: none
@@ -71,9 +75,4 @@ body
 .them
     width: auto
     height: 16vh
-
+    margin-left: -20px
-.music
-    margin-left: -120px
-    position: absolute
-    left: 50%
-    margin-left: -120px

views/index.hbs

@@ -7,7 +7,7 @@
         </section>
     </div>
 
-<iframe width="100%" height="20" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/723173407&color=%23a595ed&inverse=false&auto_play=false&show_user=true"></iframe>        <div class="sor">
+<iframe width="97%" height="20" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/723173407&color=%23a595ed&inverse=true&auto_play=false&show_user=true"></iframe>        <div class="sor">
     <div class="credits">
             <img class="logo" src="./assets/images/sor_white.png" alt="Sor's Logo">
         </div>