body{
	margin: 0px;
}

a{
	color: #000;
}

a:hover{
	color: #f00;
}

#container{
	margin-left: auto;
	margin-right: auto;
	padding: 1rem;

	max-width: 800px;
}

#header{
	background-color: #fff0f0;
	
	padding: .8rem;

	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-top: 0rem;
}

#footer{
	padding: 1rem;
	margin-bottom: 5rem;
	background-color: #fff0f0;

	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;

}

.scanDiv{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
}

.backArrow{
	text-decoration: none;
	color: #000;
}

.backArrow img{
	height: 1rem;
	width: 1rem;
}

.section{
	margin-top: 3rem;
	padding: 1rem;
	padding-left: 1rem;
	background-color: #f9f9f9;

	border-left: .5rem solid #f00;
}

.cardNotes{
	background-color: #fff;
	min-height: 1.5rem;
	padding: 1rem;
	font-family: monospace;
	font-size: 1rem;
	word-break: break-word;
}

input{
	font-size: 1rem;
}

input[type="text"]{
	width: 20rem;
}

@media only screen and (max-width: 1000px){
	html{
		font-size: 16px;
	}
	#header{
		padding: .5rem;
		border-left: .5rem solid #f00;
	}
	#header h1{
		margin: 0rem;
	}
	#header h2{
		margin: .3rem;
	}
	#container{
		padding: 0rem;
	}
	.section{
		margin-top: 0rem;
		border-left: none;
	}
	#footer{
	}
	input{
	}
	.scanDiv{
		display: none;
	}
}