fiddling arround with that player shieet

_layouts/music.html

@@ -1,7 +1,8 @@
 ---
 layout: default
 ---
-<div id="navigation">
+<div id="player">
+  <div id="controls">
     <button id="mu_pause">Play</button>
     <h1>{% if page.previous_in_category != nil %}
       <a href="{{ site.baseurl }}{{ page.previous_in_category.url }}" title="Previous Track"><img
@@ -16,20 +17,21 @@ layout: default
     <a href="{{ site.baseurl }}/music/">Back to Index</a>
   </div>
 
-<div id="lyrics">
+  <div id="info">
     <h1 class="title">{{ page.title }}</h1>
     {{ page.content }}
   </div>
 
+
+  <div id="tracktime"></div>
+  <!-- stylemachine by Sakrecoer -snipthis if ya feel it - its the pary that runs the player ;) -->
+</div>
 <audio preload="true"
   ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime) + ' / ' + Math.floor(this.duration);">
   <source src="{{ site.audio_url }}{{ page.mp3 }}" type="audio/mpeg" />
   <source src="{{ site.audio_url }}{{ page.ogg }}" type="audio/ogg" />
   <h1>Your browser isn't ready for so much hotness. Use the download-link instead.</h1>.
 </audio>
-<div id="tracktime"></div>
-<!-- stylemachine by Sakrecoer -snipthis if ya feel it - its the pary that runs the player ;) -->
-
 <script type="text/javascript">
   function loadUrl(newLocation) {
     window.location = newLocation;
@@ -64,7 +66,7 @@ layout: default
 <style type="text/css">
   html,
   body {
-    background:url('{{ site.audio_url }}{{ page.image }}') #0ff no-repeat center center fixed;
+    background:url('{{ site.audio_url }}{{ page.image }}') #0ff no-repeat center fixed;
     background-size: contain;
   }
 </style>

_sass/main.scss

@@ -42,4 +42,10 @@ a {
 
 /* Music Template */
 
+#player {
+  display: flex;
+}
 
+#controls {
+
+}