testing style mobile user cond event

added styles @media only screen and (max-width: 768px) for /* SILVIO*/ classes

index.html

@@ -58,10 +58,8 @@
     <audio controls loop="" class="audio" src="http://w-i-t-m.net:8001/meander" type="audio/mp3"> </audio>
 
     <!-- lil face -->
-    <div class="lil-face loading" style="position: absolute;
-    bottom: 50px;
-    right: 38px;">
-      <a href="https://silviolorusso.com">
+    <div class="lil-face loading">
+      <a href="https://silviolorusso.com" target="_blank">
         <img src="https://i.ytimg.com/vi/AsFBRdkFKx8/mqdefault.jpg" style="width: 100px; border-radius: 25px; box-shadow: 0.3rem 0.2rem 0.3rem #ffe4fd;"/>
       </a>
     </div>

narrowstyle.css

@@ -354,13 +354,14 @@ button.minimize:hover {
 }
 
 .chat {
-  margin-left: 1%;
-  width: 44%;
+  margin: 0% 2% 0% 1%;
+  width: 42%;
 }
 
 .chat iframe {
   width: 100%;
   height: 80vh;
+  padding-top: 3rem;
 }
 
 .audio {
@@ -370,20 +371,56 @@ button.minimize:hover {
   bottom: 60px;
 }
 
+.lil-face{
+  position: absolute;
+  bottom: 50px;
+  right: 38px;
+}
+
 /* :::::::::::::::::::::::::::::::::::::::::::::: Responsiveness :::::::::::::::::::::::::::::::::::::::::::::: */
 
 
 @media only screen and (max-width: 768px) {
 
-  .live-flex {
+/*  .live-flex {
     flex-direction: column;
-  }
+  }*/
+
 
   .halfscreen , .thirdscreen {
     width: 100%;
   }
 
+  /* SILVIO MOBILE*/
+
+  .essay {
+    width: 85%;
   }
 
+  .essay iframe {
+    width: 100%;
+    height: 50vh;
+  }
 
+  .chat {
+    width: 85%;
+  }
 
+  .chat iframe {
+    height: 50vh;
+  }
+
+  .audio {
+    width: 80%;
+    position: relative;
+    margin: 6rem 0% 0% 6rem;
+  }
+
+  .lil-face{
+    position: relative;
+    margin: 0% 0% 2rem 1rem;
+    bottom: inherit;
+    right: inherit;
+  }
+
+}