:root {
	--white-background: #f2f2f2;
}

body {
	background-color: var(--white-background);
	font-family: Arial, sans-serif;
}

.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
}

.camera_container {
    display: none;
    height: 100vh; /* Make the container fill the entire viewport height */
    width: 100%;
}

/* The child divs will take up equal space */
.left-half, .right-half {
    flex: 1; /* A shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
    /* You can also use flex-basis: 50% for an equivalent result here */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 20px;
}

.menu_button {
	color: white;
	border: none;
	border-radius: 50px;
	padding: 20px 40px;
	font-size: 18px;
	cursor: pointer;
	width: 400px;
	margin-bottom: 20px;
}

.help_button {
	color: white;
	border: none;
	border-radius: 50px;
	padding: 20px 40px;
	font-size: 18px;
	cursor: pointer;
	margin-bottom: 20px;
	background-color: #af4c4c;

		/*width:60px;*/
position: fixed;
	top: 30px;
	height:60px;
	bottom:40px;
	right:40px;
}

#basic_ptips_button {
	background-color: #4CAF50;
}

#extended_ptips_button {
	background-color: #4c7aaf;
}

.extended_rec_button {
	background-color: #4c7aaf;
}

.extended_rec_button {
	background-color: #4c7aaf;
}

.signspeak_button {
	background-color: #8b4caf;
}

#change_state_to_main_button {
	background-color: #4CAF50;
}


.disclaimer {
	margin-top: 20px;
	font-size: 14px;
	color: #666666;
}

.title {
	font-size: 48px;
	/* BEGIN: Increase title size */
	margin-bottom: 20px;
}

/* END: Increase title size */

/* Responsive Styles */
@media (max-width: 600px) {
	.title {
		font-size: 36px;
	}

	.button {
		padding: 15px 30px;
		font-size: 16px;
	}
}


.instructions_container {
	display: none;
}