changed position of legend

index.html

@@ -20,7 +20,7 @@
 <div class="container-fluid p-0">
 <div class="bg">
   <div class="row">
-      <div class="col-md-4 offset-md-8" id="menu">
+      <div class="col-md-3 offset-md-9" id="menu">
     <span id="about">
      <a href="#" >about</a> |
    </span>
@@ -35,10 +35,21 @@
   </div>
 <div class="row">
   <!-- background audio -->
-  <div class="col-md-9" style="position: static;">
+  <div class="col-md-9">
+    <div class="row">
+      <div class="col-md-12">
+        <br>
+        <div class="map_legend">
+        <div id="box1" onclick="popup_bg(10)"><i class="fa fa-play"></i></div> <p>Folklore literature</p>
+        <div id="box2" onclick="popup_bg(300)"><i class="fa fa-play" aria-hidden="true"></i></div><p>Islamic Mysticism</p>
+        <div id="box3" onclick="popup_bg(500)"><i class="fa fa-play" aria-hidden="true"></i></div> <p>Contemporary poets</p>
+        <div id="box4" onclick="popup_bg(700)"><i class="fa fa-play" aria-hidden="true"></i></div> <p>Contemporary musicians</p>
+      </div>
+      </div>
+      </div>
     <div class="row">
 
-  <div class="col-md-5 offset-md-1 col-sm-6 offset-sm-3 col-xs-6 offset-xs-3">
+  <div class="col-md-5 col-sm-6 col-xs-6">
     <button onclick="playpause('audioBG')" type="button" name="button"><i class="audioBG fa fa-play"></i></button>
 <audio id="audioBG"
 preload="metadata" onloadedmetadata="mDur(dur1,audioBG)" ontimeupdate="mPlay(dur1,audioBG)">
@@ -47,17 +58,7 @@ preload="metadata" onloadedmetadata="mDur(dur1,audioBG)" ontimeupdate="mPlay(dur
 <input id="dur1" type="range" name="rng" min="0" step="0.25" value="0" onchange="mSet(dur1,audioBG)" style="width: 150px">
 </div>
 </div>
-<div class="row">
-  <div class="col-md-12">
-    <br>
-    <div class="map_legend">
-    <div id="box1" onclick="popup_bg(10)"><i class="fa fa-play"></i></div> <p>Folklore literature</p>
-    <div id="box2" onclick="popup_bg(300)"><i class="fa fa-play" aria-hidden="true"></i></div><p>Islamic Mysticism</p>
-    <div id="box3" onclick="popup_bg(500)"><i class="fa fa-play" aria-hidden="true"></i></div> <p>Contemporary poets</p>
-    <div id="box4" onclick="popup_bg(700)"><i class="fa fa-play" aria-hidden="true"></i></div> <p>Contemporary musicians</p>
-  </div>
-  </div>
-  </div>
+
   </div>
 
 </div>

static/css/style.css

@@ -4,7 +4,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Asul&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Walter+Turncoat&display=swap');
 * {
-  border: 1px black solid;
+  border: 0px black solid;
 }
 
 body {
@@ -61,15 +61,16 @@ body {
 
 /* Audio in background */
 .audioBG {
-  margin-top: 35px;
   margin-left: 50px;
+  margin-top: -2px;
+  font-size: 20px!important;
   }
 
 button {
   background-color: #fff0f000;
 }
 #dur1 {
-margin-top: 45px;
+margin-top: -2px;
 }
 
 .audio-button {
@@ -209,7 +210,7 @@ a {
   padding-left: 5px;
   font-family: 'Vesper Libre', serif;
   display: inline;
-  font-size: 1em;
+  font-size: 0.8em;
 }
 
 
@@ -407,10 +408,13 @@ h2 {
 
 
 /* about and colophon */
+#menu {
+  margin-top: 15px;
+
+}
 #about, #colophon, #how {
 font-family:'Walter Turncoat', cursive;
 color: #d81159;
-margin-top: 20px;
 font-size: 16px;
 }