* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}
    
    canvas{
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }

	.canvas {
  		display: inline-block; 
    	height: 100%;      
		width: 100%;	
	}
	
	.container {
		display: flex;
	    height: 100%;
	}
	
	.topBar {
		display: inline-block;
		width: 100%;
		font-size: xx-large;
		padding: 10px;
		float: left;
	}
		
	.topCell{
		position: relative;
		display: block;
		height: 68px;
	}
	
	.controls {
		float: right; 
		text-align: right;
		padding-left: 5px;
	}
	
	.banner {
		float: left;
		font-size: xx-large;
		display: inline-block;	
		vertical-align: middle;
	}

	i {
		padding: 7px;

	}

a {
	color: darkblue;
	text-decoration: none;
	padding: 7px;
}


@media only screen and (max-width: 767px) {
/* For mobile phones: */
	.controls {
		text-align: center;
		float: none; 

		padding-left: 5px;
	}


	.topControls {
		display: none;
	}


}

@media only screen and (min-width: 768px) {
/* For desktop: */

	.controls {
		float: right; 
		text-align: right;
		padding-left: 5px;
	}

	.bottomControls {
		display: none;
	}


}