interact.js file added to repo and linked to inxed script

minor adjustments on style

index.html

@@ -76,13 +76,13 @@
     -->
 
 
-  <p class="note">* you can move and resize the elements here by dragging their corners and side *</p>
+  <p class="note"> * move and resize the elements above by dragging their corners and sides *</p>
 
 
 	</div>
 
 <!-- drag and resize library: https://interactjs.io/docs/installation#cdn-streamlined -->
-<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
+<script src="interact.min.js"></script>
 <!-- also found this other options:
 	https://www.webcomponents.org/element/jifalops/drag-resize
 	https://codepen.io/zz85/pen/gbOoVP -->

narrowstyle.css

@@ -76,12 +76,11 @@ a, button {
 }
 .sidebar {
   height: 100%;
-  padding: 1rem; 
   position: fixed;
   z-index: 1;
   top: 0;
   left: 0;
-  box-shadow:  0.2rem -0.2rem 1rem  #ffe4fd;
+  box-shadow: 1rem 0rem 6rem #ffe4fd;
   overflow-x: hidden;
   overflow-y: hidden;
 }
@@ -100,7 +99,7 @@ a, button {
     margin-left: 40px;
 }
 button.minimize{
-  box-shadow: 0.3rem 0.2rem 0.3rem #ffe4fd;
+  box-shadow: 0.3rem 0.2rem 0.6rem #ffe4fd;
   font-size: 1rem;	
   width: 2rem;
   background-color: #393c56;
@@ -120,6 +119,7 @@ button.minimize{
 	overflow: -ms-autohiding-scrollbar;
 	display: flex;
 	flex-direction: column;
+  padding: 1rem 1rem; 
 }
 .sidetop {
 	height: 45vh;
@@ -136,13 +136,18 @@ button.minimize{
 	color: #ffe4fd;
 	margin-top: auto; 
 }
+
 .middle {
-	height: 10vh;
+	height: 80px;
 	font-size: 0.8rem;
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
+  box-shadow: -4rem 0.6rem 2rem #ffe4fd;
+  width: 100%;
+  padding: 0.5rem 1rem; 
 }
+
 .middle p{
 	margin: 0px;
 }
@@ -164,14 +169,15 @@ button.minimize{
 .sidebottom {
 	height: 45vh;
 }
-
 .sidebottom p {
   margin: 0.25rem 0rem;
 }
-
 .sidebottom a {
 	color: #aec7ea;
 }
+.sidebottom  p:last-child {
+  padding-bottom: 2rem;
+}
 .live {
 	margin-left: 300px;
 	display: inline-block;