#image-container{
	overflow: hidden;
	position: fixed;
	margin-left: 45%;
	width: 55%;
	height: 100%;
	z-index:10;
	background-image: url("https://i.pinimg.com/564x/df/3b/53/df3b539285f8401584e74a2c04634692.jpg");
	background-size: auto;
	clip-path: polygon(70% 0%,100% 0%,100% 100%,0% 100%);
}

#heatmap-container{
	overflow: hidden;
	position: fixed;
	margin-left:0;
	width: 100%;
	height: 100%;
	z-index:20;
}

#login-register{
	padding-top: 100px;
	font-family: 'Roboto' , sans-serif;
	font-size: larger;
}

hr{
	border-color: white;
}

.btn{
	width: 40%;
}

#brand{
	position: fixed;
	margin-left: 10px;
	margin-top:5px;
	font-family: 'Molle', cursive;
	
}

body, html {
	background-color: #163040;
	height: 100%;
}

.warning{
	display: none;
	color: red;
	font-size: small;
	font-weight: lighter;
}


.credits{
	color: white;
	position: fixed;
	bottom:0 ;
	left: 0;
	z-index: 100;
}

@media screen and (orientation: portrait) {
	#image-container{
		width: 100%;
		height: 35%;
		bottom:	0px;
		clip-path: polygon(100% 0%,100% 0%,100% 100%,0% 100%);
		margin-left: 0;
	}	
}

@media screen and (max-height: 480px){
	#image-container{
	clip-path: polygon(85% 0%,100% 0%,100% 100%, 50% 100%);
	}
}