Add css custom property to audioPlayer

assets/css/main.css

@@ -1,7 +1,16 @@
+audio-player {
+	--background: radial-gradient(circle, rgba(8,5,34,1) 3%, rgba(9,3,62,1) 34%, rgba(15,62,109,1) 57%, rgba(69,130,191,1) 82%, rgba(146,172,226,1) 100%);
+	color: white;
+}
+body {
+	font-family: sans-serif;
+}
 header {
 	margin-bottom: 5rem;
 }
-
+h3 {
+	font-size: 1.5rem;
+}
 main {
 	margin: auto;
 	width: 45rem;

components/audioPlayer/audioPlayer.js

@@ -3,13 +3,20 @@ const template = document.createElement('template');
 template.innerHTML = `
 <style>
   audio {
-    border-radius: 0px 0px 10px 10px;
+    height: 2rem;
+    margin: .5rem;
+  }
+  .round-corners {
+    border-radius: 10px;
+  }
+  .small-shadow {
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,.2);
   }
   #audioPlayerContainer {
-    border-radius: 10px;
+  background: var(--background);
-    box-shadow: 0 4px 8px 0 rgba(0,0,0,.2);
     display: flex;
     flex-flow: column nowrap;
+    height: 13.5rem;
   }
   #audioDetailsContainer {
     display: flex;
@@ -17,24 +24,26 @@ template.innerHTML = `
   }
   #audioTextContainer {
     padding: 0 1rem 0 1rem;
+    height: 10rem;
+    overflow-y: scroll;
   }
   img {
-    border-radius: 10px 0px 0px 0px;
     height: 10rem;
+    margin: .5rem 0rem 0rem .5rem;
     object-fit: cover;
     width: 10rem;
   }
 </style>
 
-  <div id="audioPlayerContainer">
+  <div id="audioPlayerContainer" class="small-shadow round-corners">
     <div id="audioDetailsContainer">
-      <img src="" alt="">
+      <img src="" alt="" class="small-shadow round-corners">
       <div id="audioTextContainer">
         <slot name="title"><h3>TITLE</h3></slot>
         <slot name="description"><p>DESCRIPTION</p></slot>
       </div>
     </div>
-    <audio controls>
+    <audio class="small-shadow round-corners" controls>
       <source src="">
       Your browser does not support the audio element.
     </audio>

index.html

@@ -22,6 +22,10 @@
                 <li>title: title for the audio file</li>
                 <li>description: a description of the audio file</li>
             </ul>
+            <p>CSS Custom Properties:</p>
+            <ul>
+                <li>--background</li>
+            </ul>
             <p>Example usage:</p>
             <pre>
                 <code>