making the player happen

_layouts/music.html

@@ -24,7 +24,7 @@ layout: default
   </div>
 
 
-  <div id="tracktime"></div>
+  <div id="timer"><p id="tracktime"></p></div>
   <!-- stylemachine by Sakrecoer -snipthis if ya feel it - its the pary that runs the player ;) -->
 </div>
 <audio preload="true"
@@ -65,8 +65,12 @@ layout: default
   });
 </script>
 <style type="text/css">
-  #player {
+  body {
     background-image:url('{{ site.audio_url }}{{ page.image }}') ;
-
+    background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-color: #0ff;
   }
 </style>

_sass/main.scss

@@ -44,8 +44,44 @@ a {
 
 #player {
   display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  margin: 0;
+  padding: 0;
 }
 
 #controls {
+  flex: 0 0 200px;
+  border: #000 solid 1px;
+  padding: 15px;
+  margin: 0 auto;
+  button {
+    background-color: #f00;
+    width: 100px;
+    height: 100px;
+    border-radius: 100px;
+    transition: background-color 0.5s ease-in-out;
+ }
+  button:hover {
+    background-color: rgb(253, 83, 83);
+ }
+ .container {
+    background-color: rgba(128, 128, 128, 0.7);
+    margin: auto;
+    width: 200px;
+  }
+}
+#info {
+  flex: 1 1 500px;
+  border: #000 solid 1px;
+  padding: 15px;
+}
+#timer {
+  flex: 1 1 200px;
+  border: #000 solid 1px;
+  padding: 15px;
 
+}
+#tracktime {
+  margin-bottom: auto;
 }