:root {
	--towerWidth: 2vw;
}
  
/* globale Styles */
html, body{
	background:black;
	font-family:Verdana;
	overflow:hidden;
}

	#controls{
		background:white;
		width:100vw;
		padding: 10px 0 10px 0;
		text-align:center;
		position:fixed;
		left:0;
		top:0;
		display: flex;                  
		flex-direction: row;            
		flex-wrap: nowrap;              
		justify-content: space-between;
		overflow:auto;
	}

		.controlElement{
			padding-right:5vw;
			padding-left:5vw;
		}

			button{
				width:5vw;
				min-width:100px;
				height:2.5vh;
				min-height:25px;
				border:solid 1px;
				font-family:Verdana;
				cursor:pointer;
			}

	#allTowers{
		display: flex;                  
		flex-direction: row;            
		flex-wrap: nowrap;              
		justify-content: space-between;
		position:fixed;
		width:calc(200vw / 3 + var(--towerWidth));				/* Width of allTowers box: see below */
		left:calc(50vw - (200vw / 3 + var(--towerWidth)) / 2); 	/* Center box of all towers */
		bottom:0;
	}

		.tower{
			background:white;
			width:var(--towerWidth);
			height:80vh;
			border-radius:10px 10px 0 0;
		}

			.disc{
				height:4.5vh;
				background:white;
				position:relative;
				border:solid 1px;
				border-radius:10px;
				box-sizing: border-box;
			}
	
	#footer{
		position:fixed;
		left:0;
		bottom:0;
		font-size:12px;
		text-align:left;
		z-index:5;
		background:white;
	}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*

	x: width of allTowers
	y: width of space left and right from allTowers
	w: width of tower

	--> x + 2y = 100
	--> (x - 3w)/2 = 2y (space between towers has to be 2 times space on left/right of allTowers. --> Equally much space for every disc)

	--> x + (x - 3w)/2 = 100
	--> 2x + x - 3w = 200
	--> 3x - 3w = 200
	--> x - w = 200/3
	--> x = 200/3 - w

	Thats the formula for the width of allTowers

*/