 <!--
  __  __          _     ___ _    _               ___     _              __ _     _    _ 
 |  \/  |__ _ _ _| |__ | __(_)__| |_  ___ _ _   / __|  _| |__  ___ _ _ / _(_)___| |__| |
 | |\/| / _` | '_| / / | _|| (_-< ' \/ -_) '_| | (_| || | '_ \/ -_) '_|  _| / -_) / _` |
 |_|  |_\__,_|_| |_\_\ |_| |_/__/_||_\___|_|    \___\_, |_.__/\___|_| |_| |_\___|_\__,_|
                                                    |__/                              
    ▓▓█████████████▒║╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠║║║
    ███████████████▒║╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠║║║
    ███████████████▒║║╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠║║║
    ███████████████▒║║╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠║║
    ███████████████▒║║╠╠╠╠╠╠╠╠╠║║╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠║║
    ███████████████▒║║║╠╠╠╠╠╠╠╠║║║╠╠╠╠║╠╠╠▒▒▒▒▒╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠║║║
    ███████████████▒║║║║║║╠╠╠╠╠║║║╠╠║║▒▓██████████▒╠╠╠╠╠╠╠╠╠╠╠╠╠╠╠║╠╠╠╠║╠╠╠╠╠╠║║║║╠╠
    ███████████████▒║║║║╠║╠╠╠╠╠║║║║║║▓▓██▒▒▒███████▒╠╠╠╠║║║║║║║║║║║║║║║║║╠╠╠╠╠╠╠╠║║║
    ███████████████▒║║║║║║║╠╠╠╠╠║╠║║║███╠╠╠╠║╢▒████▒╠╠╠╠║║║║║║║║║║║║║║║║║║║║║╠╠║║║║║
    ███████████████▒▒║║║║╠║╠╠╠╠║║║║║║██▒▒▒▒▒▒▒▓█████╠║╠╠║║║║║║║║║║║║║║║║║║║║║║║║║║║║
    ███████████████▒▒║║║║║║║║║║║║║║║║╢█▓▓▓█▓▓███████╢║║╠║║║║║║║║║║║║║║║║║║║║║║║║║║║║
    ███████████████▒▒▒║║║║║║║╠╠╠╠║║║║║▒▒▒▒▒▒▒▒██████▒║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║
    ███████████████▒▒▒║║║║║║║║╠╠╠║║║║║║▒▒▒║╢▒▒▒█▓██╢║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║
    ███████████████▒▒▒║║║║║║║║║║╠║║║║║▒▓█▒▒▒▒▒▒███████▒▒▒▒║║║║║║║║║║║║║║║║║║║║║║║║║║
    ███████████████▒▒▒╢║║║║║║║║║║╠║▒███████▓▓▓▓█████████████▒╢╢╢║║║║║║║║║║║║║║║║║║║║
    ███████████████▒▒▒▒║║║║║║║║║▒████████████████████████████▒▒╢╢╢╢╢║║║║║║║║║║║║║║║║
    ███████████████▒▒▒▒║║║║║║║▓███████████████████████████████▒▒▒▒▒╢╢╢╢╢╢║║║║║║║║║║║
    ███████████████▒▒▒▒║║║║║║█████████████████████████████████▌▒▒▒▒▒▒▒▒▒╢▒▒╢╢╢╢╢╢╢▒╢
    ███████████████▒▒▒▒║║║║║║██████████████████████████████████▒▒▒▒▒▒▒▒▒▒╢▒▒▒▒╢╢╢▒▒▒
    ███████████████▒▒▒▒▒║║╢▒███████████████████████████████████▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
    ███████████████▒▒▒▒▒╢███████████████████████████████████████▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
    ███████████████▒▒▒╢▓█████████████████████████████████████████▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
    ███████████████▒▒█████████████████████████████████████▌║╢▒████▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
    ███████████████▒██████████████████████████████████████▒▒╢▒▒███▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
    ██████████████████████████████████████████████████████▒▒▒▒▒██▒▒▒▒▒▒▒▒▒▒▒▒▒▓▒▒▒▒▒
    ██████████████████████████████████████████████████████▒▒▒▓▒▒▒▓▒▒▒▒▒╢║║║▒▒▒▒▒║║║║
    ██████████████████████████████████████████████████████▒▒▒█▀▀╢▀▒└└└╙╙╙╚║▒░Ñ║▒▒║║║
    ███████████████████████████████████████▀▀▀▀▀▀Ñ╙││││ÑÑ║╢╗▄││╙│││││WWWW╓N∩∩#║╢▓▓▓▓
    █████████████████████████████████▀▀▀(:W└└∩∩∩∩∩∩∩∩∩∩∩∩∩│∩│││ÑÑMx▄│└││N░╠▒Ñ▐╠╢██▀█
    █████████████████████████████████▒▄NNWW∩;. '└└∩∩∩∩∩∩∩∩∩∩╓╓WWN∩Ñ║▓█▓▓▓█▒▒░╢▒▒▒║║║
    ████████████████████████████████████▒▓▓▓▒▄N╔╓/:::NNÑÑ┤┤┤│││W│N┤┤╡ÑÑ╠╠╠M╚∩▐╢╫▒║║║
    ██████████████████████████▒█████████▒█████████▓▒▒▒Ñ┤│┤┤┤┤┤┤┤┤┤┤┤┤┤┤┤┤┤║░░╠╠║▒╢╢║
    ████████████████████████▒║╢█████████▒████████████████▓▒▒▄▄┤││┤┤┤┤┤┤┤┤┤Ñ▒▀▀▒▒╠╠╡╡
    ███████████████████████▒╠║║█████████▒███▒▒███████████████████▓▒▄▄┤┤┤┤┤┤┤│┤┤╠┤┤┤┤
    █████████████████████████▒╠║████████▒███▓▓██████████████████████████▓▓▒▄▄┤┤╠ÑÑ╠╡
    ████████████████████████████████████▒██████▓████████████████████████████████▓▓▒▒
	-->

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

    <title>Mark Fisher Cyberfield Video Transcripts</title>
  <!--CSS styling for .myClass text blocks to add and style frames and determine font style and colour. Styling for images, background images and tables also included below-->
  <style>
	
	.myClass {background-color: rgb(177,243,242);font-size:25px;font-weight: bold;font-family: 'Courier New', monospace; border: 3px solid rgb(177,243,242);
            border-style: groove;
		}
	
	.myClass3 {background-color: rgb(177,243,242);font-size:15px;font-weight: bold;font-family: 'Courier New', monospace; border: 3px solid rgb(177,243,242);
            border-style: groove;
		}
	
	img {
            border: 6px solid rgb(177,243,242);
            border-style: groove;
        }

	
	body {
            background-image: url("lOXvRlF.jpg");
        }
	
	table, th, td {
		border: 4px solid rgb(177,243,242);	
		border-style: groove;
	    }

    #paragraph {background-color: rgb(177,243,242);font-size:15px;font-weight: bold;font-family: 'Courier New', monospace; border: 3px solid rgb(177,243,242);
            border-style: groove;
   
        }
	
	.myClass4 {background-color: rgb(177,243,242);font-size:15px;font-weight: bold;font-family: 'Courier New', monospace; border: 3px solid rgb(177,243,242);
            border-style: groove;
        }
			
	.myClass5 {background-image: url("lOXvRlFblue.jpg"); border: 6px solid rgb(177,243,242);
            border-style: groove;
	    }
		
	#paragraph2 {background-color: rgb(254,218,254); font-size:15px;font-weight: bold;font-family: 'Courier New', monospace;
	}
   
   </style>
  
  </head>

  <body>
	<!--bootstrap grid system to make site responsive-->
	<div class="container">
		<br>
		<div class="row">
			<div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4 mx-auto text-center myClass">Mark Fisher Cyberfield</div>		
		</div>
		<br>	
		<div class="row">
			<div class="col-xl-2 col-lg-2 col-md-2 col-sm-2 col-2 mx-auto text-center myClass3">Video Transcripts</div>		
		</div>
		<br>
		<div class="row">
		<!--Button to play music on site-->
		<div class="col-xl-4 col-lg-4 col-md-6 col-sm-8 col-10 mx-auto text-center myClass2"><audio controls autoplay>
		 <source src="landslidesremaster2.mp3" type="audio/mpeg">
		 </audio> </div>
		</div>
		<br>
		<div class="row">
		<!--Main GIF moving image on site homepage-->
		<div class="col-xl-12 col-lg-10 col-md-8 col-sm-6 col-4 mx-auto text-center myClass2"><img src="GedGef2.gif" class="img-fluid"></div>
		</div>
		<br>
		<div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4 mx-auto text-center myClass5">
		<br>
		<p id = "paragraph">Video Transcripts</p>
		 <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 mx-auto text-center myClass4"><br><br>Zone under construction...<br><br>
		 <br>
		 </div>	
		 <br>
		</div>
		
		<br>
</body>

<script>

var i = 0;

function randomFlash() {
    var myFunction = function() {
    	if (i % 2 == 0) {
		document.body.style.backgroundImage = "url('lOXvRlF2.jpg')";
		var random = 100;				
        } else {
          	document.body.style.backgroundImage = "url('lOXvRlF.jpg')";
		var random = Math.round(Math.random() * (5500 - 500)) + 500;
        }
        i++;
        setTimeout(myFunction, random);
    }
    myFunction();
}

randomFlash();

</script>