body{
	margin: 0;
}
canvas{
	width: 100%;
	height: 100%
}

.button {
	display: inline-block;
	margin: 2rem auto;
	margin-bottom: 2rem;
	border-radius: 1rem;
	border: 2px solid black;
	text-align: center;
	padding: .5rem;
	font-weight: bold;
	font-size: 2rem;
	background-color: white;
	color: black;
	-webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */
	
	-o-user-select: none;
	user-select: none;
}

.button:hover {
	color: white;
	background-color: black;
}

.button:active {
	transform: scale(.9, .9);
}

#orientation-instruction {

	width: 90vw;
	margin: 5vw;
	position: absolute;
	color: white;
	background-color: rgba(0,0,0,.7);
	border-radius: 2rem;
	
	z-index: 5;

	font-family: "Myriad Pro", "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
	font-weight: bold;
	font-size: 1rem;
	text-align: center;

	/* testing */
	max-height: 80%;
	overflow-y: auto;

}

#orientation-instruction .button {
	display: inline-block;
	border: 2px solid white;
	background-color: rgba(0,0,0,0);
	color: white;
	margin-bottom: 2rem;
	font-size: 1.5rem;
}

#orientation-instruction h3 {
	font-size: 1.5rem;
}

#orientation-instructions-button {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background-color: rgba(255,255,255,.7);
	z-index: 6;
	color: black;
	font-family: "Myriad Pro", "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
	font-weight: bold;
	text-align: center;
	line-height: 2rem;
	font-size: 1.5rem;
}

.instruction {
	display: block;
	margin: 1rem auto;
	width: 80%;
	vertical-align: center;
}

.instruction img {
	width: 10rem;
}

.scaleUpAnimation {
	transform: scale(1,1);
	animation-name: scaleUp;
	animation-duration: .5s;
	animation-timing-function: ease-in-out;
	transform-origin: right bottom;
}

.scaleDownAnimation {
	transform: scale(0,0);
	animation-name: scaleDown;
	animation-duration: .5s;
	animation-timing-function: ease-in-out;
	transform-origin: right bottom;
}

.hidden {
	display: none;
}

@media all and (max-width: 1200px) {

	/*
	.dialog h2 {
		margin: 1rem 1rem 1rem 1rem;
		font-size: 2rem;
	}

	.dialog h3 {
		margin: 1rem 1rem 0rem 1rem;
	}
	
	.dialog p {
		margin: .5rem 1rem 1rem 1rem;
	}
	*/

	#orientation-instruction {
		font-size: .8rem;
	}

	#orientation-instruction .button {
		font-size: 1rem;
		margin: .5rem;
	}

	#orientation-instruction h3 {
		font-size: 1rem;
		margin: .5rem;
	}
}

@media all and (max-width: 700px) {
	
	/*
	.dialog {
		left: 10%;
		right: 10%;
	}

	.dialog h2 {
		font-size: 1.5rem;
	}
	
	.dialog h3 {
		font-size: 1.5rem;
	}
	
	.dialog p {
		font-size: .8rem;
	}
	*/
}

@media all and (max-width: 600px) {
	
	/*
	.dialog {
		left: 5%;
		right: 5%;
		top: 5%;
		max-height: 90%;
	}

	.dialog h2 {
		font-size: 1rem;
	}
	
	.dialog h3 {
		font-size: 1rem;
	}
	
	.dialog p {
		font-size: .8rem;
	}

	#dummy {
		top: 5%;
		bottom: 5%;
	}
	*/
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

@keyframes scaleUp {
    from {transform:scale(0,0);}
    to {transform:scale(1,1);}
}

@keyframes scaleDown {
    from {transform:scale(1,1);}
    to {transform:scale(0,0);}
}