diff --git a/cmunbto.eot b/cmunbto.eot
new file mode 100644
index 0000000..2966854
Binary files /dev/null and b/cmunbto.eot differ
diff --git a/cmunbto.ttf b/cmunbto.ttf
new file mode 100644
index 0000000..10fcbbc
Binary files /dev/null and b/cmunbto.ttf differ
diff --git a/narrowcast-playground.html b/narrowcast-playground.html
index 603cf90..a9bd516 100644
--- a/narrowcast-playground.html
+++ b/narrowcast-playground.html
@@ -10,7 +10,9 @@
 
 	<div class="about"><a>back<span> ↗</span><br>↬ stage </a></div>
 
-	<div class="sidebar">
+	<div id="side" class="sidebar sidemin">
+	<button class="minimize" onclick="fside()"> ⇔</button>
+
 		<div class="sidetop">
 			<a href="">Event Last not Least</a>
 			<a href="">Event Date Before Last</a>
@@ -49,18 +51,23 @@
 	</div>
 
 	<div class="live">
-		<video class="resize-drag" autoplay="" loop="">
-    		<!--  <source src="https://commons.wikimedia.org/wiki/File:Clear_to_cloudy_hot_Jupiters_(heic1524a).webm"
-            type="video/webm">  type="video/mp4" -->
-             <source src="https://ia600703.us.archive.org/3/items/vjmorph_pack1/BWdotSphereAVS01_1_640_512kb.mp4"
-            type="video/mp4">
-		</video>
 
-		 <iframe  class="resize-drag" src="https://archive.org/embed/VJ_Mission_Boundary_Issues" width="640" height="480" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe>
+  	<video class="resize-drag" autoplay="" loop="">
+      <!--  <source src="https://commons.wikimedia.org/wiki/File:Clear_to_cloudy_hot_Jupiters_(heic1524a).webm"
+              type="video/webm">  type="video/mp4" -->
+      <source src="https://ia600703.us.archive.org/3/items/vjmorph_pack1/BWdotSphereAVS01_1_640_512kb.mp4"
+              type="video/mp4">
+   
+  	</video>
+
+		<iframe class="resize-drag" src="https://archive.org/embed/VJ_Mission_Boundary_Issues" width="640" height="480" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen>
+    </iframe>
 
 		<iframe class="resize-drag" src="https://etherdump.vvvvvvaria.org/"></iframe>
 
-		<audio controls loop="" class="resize-drag" src="https://ia803201.us.archive.org/31/items/md_music_ecco_the_dolphin/08%20-%20Island%20Zone%20-%20Andr%C3%A1s%20Magyari%2C%20Spencer%20Nilsen%2C%20Brian%20Coburn.mp3" type="audio/mp3"></audio>
+		<audio controls loop="" class="resize-drag" src="https://ia803201.us.archive.org/31/items/md_music_ecco_the_dolphin/08%20-%20Island%20Zone%20-%20Andr%C3%A1s%20Magyari%2C%20Spencer%20Nilsen%2C%20Brian%20Coburn.mp3" type="audio/mp3">
+    </audio>
+
 	</div>
 
 <!-- drag and resize library: https://interactjs.io/docs/installation#cdn-streamlined -->
@@ -70,6 +77,13 @@
 	https://codepen.io/zz85/pen/gbOoVP -->
 
 <script type="text/javascript">
+
+function fside() {
+   var element = document.getElementById("side");
+   element.classList.toggle("sideminclicked");
+}
+
+
 interact('.resize-drag')
   .resizable({
     // resize from all edges and corners
diff --git a/narrowstyle.css b/narrowstyle.css
index ef088fb..3797724 100644
--- a/narrowstyle.css
+++ b/narrowstyle.css
@@ -1,30 +1,30 @@
 @font-face {
 	font-family: 'Computer Modern Classical Serif Italic';
-	src: url('ClassicalSerifItalic/cmunci.eot');
-	src: url('ClassicalSerifItalic/cmunci.eot?#iefix') format('embedded-opentype'),
-		 url('ClassicalSerifItalic/cmunci.woff') format('woff'),
-		 url('ClassicalSerifItalic/cmunci.ttf') format('truetype'),
-		 url('ClassicalSerifItalic/cmunci.svg#cmunci') format('svg');
+	src: url('cmunci.eot');
+	src: url('cmunci.eot?#iefix') format('embedded-opentype'),
+		 url('cmunci.woff') format('woff'),
+		 url('cmunci.ttf') format('truetype'),
+		 url('cmunci.svg#cmunci') format('svg');
 	font-weight: normal;
 	font-style: italic;
 }
 @font-face {
 	font-family: 'Computer Modern Typewriter Light';
-	src: url('TypewriterLight/cmunbtl.eot');
-	src: url('TypewriterLight/cmunbtl.eot?#iefix') format('embedded-opentype'),
-		 url('TypewriterLight/cmunbtl.woff') format('woff'),
-		 url('TypewriterLight/cmunbtl.ttf') format('truetype'),
-		 url('TypewriterLight/cmunbtl.svg#cmuntt') format('svg');
+	src: url('cmunbtl.eot');
+	src: url('cmunbtl.eot?#iefix') format('embedded-opentype'),
+		 url('cmunbtl.woff') format('woff'),
+		 url('cmunbtl.ttf') format('truetype'),
+		 url('cmunbtl.svg#cmuntt') format('svg');
 	font-weight: normal;
 	font-style: normal;
 }
 @font-face {
 	font-family: 'Computer Modern Typewriter Light';
-	src: url('TypewriterLight/cmunbto.eot');
-	src: url('TypewriterLight/cmunbto.eot?#iefix') format('embedded-opentype'),
-		 url('TypewriterLight/cmunbto.woff') format('woff'),
-		 url('TypewriterLight/cmunbto.ttf') format('truetype'),
-		 url('TypewriterLight/cmunbto.svg#cmunbto') format('svg');
+	src: url('cmunbto.eot');
+	src: url('cmunbto.eot?#iefix') format('embedded-opentype'),
+		 url('cmunbto.woff') format('woff'),
+		 url('cmunbto.ttf') format('truetype'),
+		 url('cmunbto.svg#cmunbto') format('svg');
 	font-weight: normal;
 	font-style: italic;
 }
@@ -45,15 +45,16 @@ body{
 	background-color: #393c56;
 	color:  #ffe4fd;;
 }
-iframe {
+iframe, video {
 	border: none;
+	width: inherit;
 }
-a {
+a, button {
 	cursor: pointer;
 }
 .about {
 	font-family: 'Computer Modern Classical Serif Italic';
-	font-size: 1.6rem;
+	font-size: 1.2rem;
 	line-height: 0.6rem;
 	position: fixed;
 	top: 0;
@@ -66,7 +67,6 @@ a {
 }
 .sidebar {
   height: 100%;
-  width: 300px;
   padding: 1rem; 
   position: fixed;
   z-index: 1;
@@ -75,15 +75,41 @@ a {
   box-shadow:  0.2rem -0.2rem 1rem  #ffe4fd;
   overflow-x: hidden;
 }
+
+.sidemin {
+    width: 300px;
+    transition: width 2s;
+}
+
+.sideminclicked {
+    width: 20px;
+}
+
+.sideminclicked + .live {
+    transition: margin-left 2s;
+    margin-left: 40px;
+}
+button.minimize{
+  box-shadow: 0.3rem 0.2rem 0.3rem #ffe4fd;
+  font-size: 1rem;	
+  width: 2rem;
+  background-color: #393c56;
+  color: #ffe4fd;
+  position: fixed;
+  top: 0;
+  left: 0;
+  margin: 0.5rem;
+  border: none;
+}
 .sidetop, .sidebottom  {
-overflow-y: scroll;
-scrollbar-width: none;
-overflow: -moz-scrollbars-none;
--ms-overflow-style: none;
--ms-overflow-style: -ms-autohiding-scrollbar;
-overflow: -ms-autohiding-scrollbar;
-display: flex;
-flex-direction: column;
+	overflow-y: scroll;
+	scrollbar-width: none;
+	overflow: -moz-scrollbars-none;
+	-ms-overflow-style: none;
+	-ms-overflow-style: -ms-autohiding-scrollbar;
+	overflow: -ms-autohiding-scrollbar;
+	display: flex;
+	flex-direction: column;
 }
 .sidetop {
 	height: 45vh;
@@ -135,21 +161,60 @@ flex-direction: column;
 
 .resize-drag {
   width: 620px;
-  border-radius: 2rem 0.2rem 2rem 0.6rem;
-  padding: 2rem 0.4rem 0.4rem 2rem;
+  padding: 1.4rem 0.4rem 0.4rem 1.4rem;
   margin: 1rem;
   touch-action: none;
   /* This makes things *much* easier */
   box-sizing: border-box;
   box-shadow: inset 0.6rem 0.2rem 0.9rem #ffe4fd;
+  position: relative;
 }
-.resize-drag::before {
-	content: "◉ ➫ drag";
+.drag::before, .resize-drag::before, .live > *::before {
+	content: "⇱";
 	font-size: 2rem;
 	width: 1rem;
 	height: 1rem;
-	color: #ff029c;
-	background-color: #ff029c;
-	position: absolute;
+	color: #393c56; 
+	position: absolute !important;
 	z-index: 999;
+	top: 0;
+    left: 0;
+    display: block;
 }
+
+.resize-drag  {
+    animation: corners 8s infinite alternate;
+    -o-animation: corners 8s infinite alternate;
+    -moz-animation: corners 8s infinite alternate;
+    -webkit-animation: corners 8s infinite alternate;
+  }
+
+   @keyframes corners {
+      0% {  
+      border-radius: 1% 0% 0% 0% / 45% 0% 0% 0%;   
+      -webkit-border-radius: 1% 0% 0% 0% / 45% 0% 0% 0%; 
+      }
+      70% { 
+      border-radius: 2rem 0rem 1rem 2rem;
+      -webkit-border-radius:  2rem 0rem 1rem 2rem;
+  	  }
+  	  100% { 
+       border-radius: 0rem 4rem 2rem 1rem / 0rem 1rem 2rem 0rem;   
+      -webkit-border-radius: 0rem 4rem 2rem 1rem / 0rem 1rem 2rem 0rem;     	  }
+  @-webkit-keyframes corners {
+      0% {  
+      border-radius: 1% 0% 0% 0% / 45% 0% 0% 0%;   
+      -webkit-border-radius: 1% 0% 0% 0% / 45% 0% 0% 0%; 
+      }
+      70% { 
+      border-radius: 2rem 0rem 1rem 2rem;
+      -webkit-border-radius:  2rem 0rem 1rem 2rem;
+  	  }
+  	  100% { 
+      border-radius: 0rem 4rem 2rem 1rem / 0rem 1rem 2rem 0rem;   
+      -webkit-border-radius: 0rem 4rem 2rem 1rem / 0rem 1rem 2rem 0rem;   
+  	  }
+  }
+
+
+