corrections and updated stream link

index.html

@@ -28,22 +28,31 @@ iframe {
 .allchance{
 	width: 100%;
 	margin: 1%;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: center;
 }
-.chance{
+.chance, button.chance {
 	font-family: "Computer Modern Typewriter Light";
 	margin: 1%;
+	padding: 0.5rem;
 	background-color: var(--color-lightpink);
-	border-radius: 0.2rem;
+	border-radius: 1.2rem;
+	height: 5rem;
+	border: none;
+	box-shadow: 0.3rem 0.2rem 0.3rem var(--color-lightpink);
 }
 a.chance-link ,  a.chance-link: visited {
 	color: var(--color-lightpink) !important;
 	text-decoration: none !important;
 }
 .chance-cap{
-	font-size: 0.7rem;
+	font-size: 0.8rem;
 }
 #rnd {
 	font-size: 2rem;
+	margin: 0.25rem;
 }
 </style>
 
@@ -136,11 +145,9 @@ document.getElementById("rnd").innerHTML = icons[random];
 		<!-- jitsi or alike CALLING BELLEN-->
 	    <button onclick="hideshowJitsi()" class="" id="bhide_jit"> ⭑✰⭑ <br> STREAM </button>
 	    <!-- etherpad-->
-		<button onclick="hideshowPad()" class="" id="bhide_ether">WRITING <br> SCHRIJVEN</button>
+		<button onclick="hideshowPad()" class="" id="bhide_ether">ETHERPAD  <br> & CHAT</button>
-		<!-- PDFs-->
-		<button onclick="hideshowEssay()" class="bhide_chat_off" id="bhide_ess">READING <br> LEZING</button>
 		<!-- video streaming or files -->
-		<button onclick="hideshowVideo()" class="bhide_chat_off" id="bhide_vid">ARquatic <br> LIVE </button>
+		<button onclick="hideshowVideo()" class="bhide_chat_off" id="bhide_vid">AR'QUATIC <br> LIVE </button>
 		<!-- chat 
 		<button onclick="hideshowChat()" class="bhide_chat_off" id="bhide_chat">CHATTING <br> CHATTEN</button>  
 		-->
@@ -149,7 +156,8 @@ document.getElementById("rnd").innerHTML = icons[random];
 		-->
 		<!-- image multiple -->
 		<button onclick="hideshowGal()" class="bhide_chat_off" id="bhide_gal">GALLERY <br> GALERIJ</button>
-		
+		<!-- PDFs-->
+		<button onclick="hideshowEssay()" class="bhide_chat_off" id="bhide_ess">MORE + <br> MERE +</button>
 	</div>
 
 
@@ -190,10 +198,10 @@ document.getElementById("rnd").innerHTML = icons[random];
 <!-- JITSI  -->
     <!-- PLACEHOLDER link: https://meet.jit.si/varia.broadcats -->    
     <div class="halfscreen" id="showJit"> 
-    	<iframe src="" width="640" height="480" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen>
+    	<iframe width="560" height="315" src="https://www.youtube.com/embed/Fnd9faqXURw?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
     	</iframe>
     	<br> ↬ 
-      	<a class="windowlinks" href=""  target="_blank">  direct link to ↬ Jitsi</a>  
+      	<a class="windowlinks" href="https://www.youtube.com/watch?v=Fnd9faqXURw"  target="_blank">  direct link to ↬ youtube stream</a>  
 	</div> 
 
    <!-- Jitsi for use -->
@@ -221,10 +229,10 @@ document.getElementById("rnd").innerHTML = icons[random];
 <!-- NEW ZONE  -->
 
 <div class="allchance">
-	<button class="chance" onclick="randomize()">chance operations <p id="rnd"></p></button> 
 
-	<div class="chance-cap">
+	<button class="chance" onclick="randomize()">click here ▸  chance operations *･゜<p id="rnd"></p></button> 
 
+	<div class="chance-cap">
 		<br> 
 			🤖 🤝 🙃 = "human-machine collaboration";  
 			💻 💛🔥 🎹 = "CodeKlavier";
@@ -233,19 +241,10 @@ document.getElementById("rnd").innerHTML = icons[random];
 			©️ ➡️ ♻️ = "FL0SS" (free/libre and open source software);
 			🔮 🖥️✨ = esoteric programming languages;
 
-<sup><a style="color:var(--color-lightpink);" class="chance-link" href="https://walkerart.org/magazine/chance-conversations-an-interview-with-merce"  target="_blank" > about chance operations [* ref.]</a><sup>
+		<sup><a style="color:var(--color-lightpink);" class="chance-link" href="https://walkerart.org/magazine/chance-conversations-an-interview-with-merce"  target="_blank" > about chance operations [+]</a><sup>
 	</div>
-
-
-
 </div>
 
-<!-- ESSAY  -->
-    <!-- PLACEHOLDER link: https://etherdump.vvvvvvaria.org/publish/digital-solidarity-networks.raw.html -->
-    <div class="fullscreen hide" id="showEssay">
-      <iframe src="https://geometries.xyz/"></iframe><br> ↬ 
-      <a class="windowlinks" href="https://geometries.xyz/"  target="_blank"> ↬ direct link to Choreographies of the Circle & Other Geometries</a>
-    </div> 
 
 <!-- here is an example if you would like to add an iframe -->
 
@@ -280,7 +279,9 @@ document.getElementById("rnd").innerHTML = icons[random];
 		<iframe width="560" height="315" src="https://www.youtube.com/embed/h6mXDQg3qYc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 		<br> ↬ ARquatic at Home
-		<a class="windowlinks" href="https://www.youtube.com/watch?v=h6mXDQg3qYc"  target="_blank"> ↬ direct link to video stream </a>
+		<a class="windowlinks" href="https://www.youtube.com/watch?v=h6mXDQg3qYc"  target="_blank"> ↬ direct link to video stream</a> and 
+		<a class="windowlinks" href="https://apps.apple.com/nl/app/arquatic/id1557620712?l=en"  target="_blank"> ↬ link to Apple app</a> or
+		<a class="windowlinks" href="https://play.google.com/store/apps/details?id=space.codeklavier.arquatic&hl=en_US&gl=US"  target="_blank"> ↬ link to Android app</a>
 	</div> 
     
 
@@ -392,13 +393,17 @@ document.getElementById("rnd").innerHTML = icons[random];
 			<br> ↬ Playing Beuys’s Records - Concert - Chiho Oka
 			<a class="windowlinks" href="https://vimeo.com/650992697"  target="_blank"> ↬ link ↫ </a>
 		</figure>
+	</div>
 
 
-
+<!-- ESSAY  -->
+    <!-- PLACEHOLDER link: https://etherdump.vvvvvvaria.org/publish/digital-solidarity-networks.raw.html -->
+    <div class="fullscreen hide" id="showEssay">
+      <iframe src="https://geometries.xyz/"></iframe><br> ↬ 
+      <a class="windowlinks" href="https://geometries.xyz/"  target="_blank"> ↬ direct link to Choreographies of the Circle & Other Geometries</a>
     </div> 
 
 
-
    <!-- NEW NOTE  -->
    <!-- <p class="note"> <u>Note</u>: this interface is in experimental phase ☆ﾟ.*･｡ﾟ and some things may not work always smoothly * <u>Nota</u>: deze interface is in experimentele fase ☆ﾟ.*･｡ﾟ en sommige dingen kunnen niet altijd soepel werken *</p>  -->