* {
  box-sizing: border-box;
}

body {
  font-family: 'Hind Madurai', sans-serif;
}

.header {
	width:53%;
	position:relative;
	display:inline-block;
	padding-right:1.5em;
	margin-bottom:2em;
}

p.subheader {
  font-family: 'Amiri', serif;
  font-size:1.2em;
  margin-top:-.8em;
  margin-bottom:0;
  padding:0;
  text-align:right;
}

h1 {
  font-size:2.7em;
  font-style:bold;
  letter-spacing:.08em;
  margin-bottom:0;
  margin-top:.2em;
  padding:0;
  text-align:right;
}

h3 {
	margin:0;
}

.instructions {
	width:46%;
	border:solid;
	border-width:0 0 0 3px;
	position:relative;
	display:inline-block;
	padding-left:.5em;
}

p.instruction {
	margin-top:.2em;
	margin-bottom:0;
}

#canvas_container {
	margin:auto;
	text-align:center;
}

#button_container {
	width:40%;
	margin:auto;
}

#txt_container {
	width:40%;
	margin:auto;
	font-size: 2em;
	font-weight: 600;
}

@media only screen and (max-width:799px) {
	.header {
		min-width:55%;
		margin:0 auto;
		display:block;
	}

	p.subheader {
		text-align:left;
	}

	h1 {
		text-align:left;
	}

	.instructions {
		min-width:55%;
		margin:0 auto;
		display:block;
	}

	#button_container {
		min-width:55%;
		margin:0 auto;
	}

	#txt_container {
		min-width:55%;
		margin:0 auto;
	}

	@media only screen and (max-width:650px) {
	.header {
		width:100%;
		margin:0 auto;
		display:block;
	}

	.instructions {
		width:100%;
		margin:0 auto;
		display:block;
	}

	#canvas_container {
		text-align:left;
	}

	#button_container {
		margin-left: 3%;
		width:100%;
	}

	#txt_container {
		margin-left: 3%;
		width:100%;
	}