.main {
	background-color: rgb(190, 233, 219);
	max-width: 1200px;
}

.page-title {
	color: #bbb;
	background-color: #333;
}

#copyright {
	font-size: 10px;
	color: #606060;
}

.theImage {
	text-align: center;
	background-color: rgb(208, 212, 184);
}

.backInputs,
.frontInputs {
	width: 90%;
	margin: auto !important;
}

@media only screen and (min-width: 768px) and (max-width: 920px) {
	.theImage,
	#inputDiv {
		width: 80%;
	}
	#txtFront,
	#txtBack {
		width: 90%;
	}
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
	.theImage,
	#inputDiv {
		margin-left: 1.5rem !important;
	}
}
@media only screen and (min-width: 992px) {
	#inputDiv {
		width: 80%;
		margin: auto;
	}
}

.white {
	width: 10%;
	background-color: white;
	border: 2px solid white;
	padding: 1rem;
	border-radius: 50%;
}

.black {
	width: 10%;
	background-color: black;
	border: 2px solid white;
	padding: 1rem;
	border-radius: 50%;
}

.black:hover,
.white:hover {
	cursor: pointer;
}