<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Social Networks</title>
	<style>
		@font-face {
		  font-family: bree-serif;
		  src: url("bree-serif/BreeSerif-Regular.otf");
		}

		@font-face {
		  font-family: georgia;
		  src: url("georgiai.ttf");
		}


		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		html, body {
			font-family: bree-serif;
			font-size: 19px;
		}


		h1 {
		  font-size: 57px;
		  text-align: right;
		  font-weight: 400;
		  font-style: normal;
		  letter-spacing: 0px;
		  text-transform: none;
		  line-height: 1.3em;
		  font-family: bree-serif;
		  margin-right: 50px;
		  margin-top: 20px;
		}

		h2 {
		  font-size: 14px;
		  text-align: right;
		  font-weight: 400;
		  font-style: normal;
		  letter-spacing: 0px;
		  text-transform: none;
		  line-height: 1.3em;
		  font-family: georgia;
		  margin-right: 50px;
		  margin-left: 75%;
		  margin-top: 20px;
		}


		.underline { 
			text-decoration: underline;
			text-decoration-color: #df5b57;
			 }
		
		#container {
			background-color: white;
			padding: 20px;
		}
		
		.row {
			display: flex;
			flex-direction: row;
		}
		
		.circle {
			flex-grow: 0;
			flex-shrink: 0;
			width: 15px;
			height: 15px;
			border-radius: 50%;
			background-color: #df5b57;
		}
		.text {
			padding-left: 10px;
			
		}
	</style>
</head>
<body>
	<h1>Questions on</br> <span class="underline">Social Networks</span></h1>
	
	<div id="container">
		
	</div>
	<script>
	
		function shuffle(a) {
			for(let i = a.length - 1; i > 0; i--) {
				const j = Math.floor(Math.random() * (i + 1));
				[a[i], a[j]] = [a[j], a[i]];
			}
			return a;
		}
		
		const messages = shuffle([
			"Can decentralised web have an impact beyond geeks & social web enthusiasts?",
			"Why do we need decentralised networks?",
			"How do we perceive federated publishing?",
			"Collectivity vs individuality: does decentralisation helps?",
			"Who moves to a decentralised network and why?",
			"What content does a federated network host?",
			"Is the medium the message?",
			"Does the medium transform the message?",
			"Does the same story have a different value, according to where is heard?",
			"How important is to choose, or create our media of communication?",
			"Is decentralisation a panacea, or a pharmakon?",
			"Is decentralisation enough?",
			"What are the dangers of centralised networks?",
			"Whose voice is amplified or curbed in a centralised network?",
			"Do we need digital social networking platforms?",
			"Do we need virtual public spheres that are difficult to shut down?",
			"Is a federated network oriented towards answering a common goal?",
			"How is the common goal of the network shaped?",
			"Is being part of the network as important as being a custodian of it?",
			"Who maintains a federated network?",
			"What is the lifespan of a federated network?",
			"How can a federated network be sustained with economic means?"
		]);
		
		function getRandomArbitrary(min, max) {
			return Math.floor(Math.random() * (max - min) + min);
		}
		
		const container = document.getElementById('container');
		const containerWidth = parseInt(getComputedStyle(container).width) - 40;
		
		messages.forEach(message => {
			const row = document.createElement('div');
			row.classList.add('row');
			row.style.marginBottom = getRandomArbitrary(10,10) + 'px';
			
			const circle = document.createElement('div');
			circle.classList.add('circle');
			
			const text = document.createElement('div');
			text.classList.add('text');
			text.textContent = message;
			
			row.appendChild(circle);
			row.appendChild(text);
			container.appendChild(row);
			
			const circleWidth = parseInt(getComputedStyle(circle).width);
			const textWidth = parseInt(getComputedStyle(text).width);
			
			const dw = containerWidth - circleWidth - textWidth;
			row.style.marginLeft = getRandomArbitrary(0,dw) + 'px';
		});

	</script>
</body>
<html>