/*

	#3CF0E1 A very light blue
	#3083F0 A dark blue
	#30C0F0
	#67F5BA A very light green
	#3046F0 A midway blue
	#7FD4F0 A very light blue
	#4DE37B A darker green

*/

.menubar {
	height: 150px;
	font-size: 30px;
	font-family: "Arial", sans-serif;
	background-color: black;
	border-radius: 10px;
	margin-bottom: 5px;
	padding: 5px;
}

.navigation_left {
	min-height: 600px;
	width: 150px;
	background-color: #3083F0; /* A dark blue */
	border-radius: 10px;
	padding: 5px;
	font-size: 20px;
	
	top: 0px;
	position: sticky;
	align-self: flex-start;
	z-index: 1000;
	
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
}

.content {
	display: flex;
}

.main_content {
	min-height: 600px;
	flex: 1;
	background-color: #7FD4F0; /* A very light blue */
	border-radius: 10px;
	padding: 5px;
	margin-left: 10px;
}

.main_content > h1 {
	grid-column: 1 / -1;
}

.video_card {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	margin: 10px;
	margin-bottom: 60px;
}

.video_card p {
	min-height: 2em;
	margin-bottom: 30px;
}

.video_grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
}

.pricing_card {
	margin: 10px;
	margin-bottom: 50px;
	margin-top: 50px;
	border: 2px dashed black;
	background-color: #67F5BA;
}

.contact_card {
	margin: 10px;
	margin-bottom: 50px;
	margin-top: 50px;
	border: 2px solid black;
	background-image: url("gray_back.png");
	background-repeat: no-repeat;
	background-size: cover;
}
	
#log {
	border-radius: 10px;
}

#log:hover {
	background-color: gray;
}

button {
	color: #67F5BA; /* A very light green */
	text-shadow: 2px 2px 4px;
	font-family: "Courier New", monospace;
	font-size: 25px;
	border-radius: 20px;
	border: 2px solid black;
	padding: 8px;
	background-color: #3046F0; /* A midway blue */
}

button:hover {
	background-color: black;
}

p {
	color: #3046F0; /* A midway blue */
	text-shadow: 2px 2px 4px;
	font-family: "Papyrus", fantasy;
	font-size: 25px;
}

#demos, #prices, #contact, #comments, #main {
	text-decoration: none;
	font-family: "Papyrus", fantasy;
	background-color: #3046F0; /* A midway blue */
	border-radius: 10px;
	padding: 10px;
	color: #67F5BA; /* A very light green */
	text-shadow: 2px 2px 4px;
}

#demos:hover, #prices:hover, #contact:hover, #comments:hover, #main:hover {
	background-color: #3083F0; /* A dark blue */
}

h1 {
	font-family: "Papyrus", fantasy;
	text-shadow: 2px 2px 4px;
	border-bottom: 2px solid black;
}

#vid1, #vid2 {
	font-style: italic;
	font-size: 20px;
	color: red;
	margin-left: 10px;
}

#price_1, #price_2, #price_3 {
	color: #3083F0;
	font-family: "Courier New", monospace;
	text-shadow: 2px 2px 4px;
	margin-left: 10px;
	text-decoration: underline;
}

#p1, #p2, #p3 {
	font-style: italic;
	font-size: 20px;
	text-shadow: 2px 2px 4px;
	margin-left: 20px;
	color: red;
}

#contact_info {
	font-family: "Courier New", monospace;
	color: purple;
	margin-left: 20px;
	text-shadow: 2px 2px 4px;
	font-style: italic;
}

::selection {
	background: #67F5BA; /* A very light green */
	color: #3046F0; /* A midway blue */
}

/* RWD for mobile and beyond */
@media (max-width: 768px) {
	.menubar {
		align-items: center;
	}
	
	.content {
		flex-direction: column;
		margin: 10px;
	}
	
	.navigation_left {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		position: static;
		width: 100%;
		min-height: auto;
		align-items: center;
		border-radius: 10px;
		margin-bottom: 10px;
		gap: 15px;
	}
	
	.navigation_left a {
		font-size: 16px;
		width: auto;
		padding: 5px;
		margin-left: 10px;
	}
	
	.main_content {
		padding: 5px;
		width: 100%;
	}
	
	.video_grid {
		grid-template-columns: repeat(1, 1fr);
		gap: 15px;
	}
	
	.video_card {
		margin-bottom: 15px;
	}
	
	.pricing_card {
		margin: 5px;
		margin-bottom: 25px;
		margin-top: 25px;
	}

	.contact_card {
		margin: 5px;
		margin-bottom: 25px;
		margin-top: 25px;
	}
	
	video {
		width: 100%;
		height: 120px;
	}
	
	#price_1, #price_2, #price_3 {
		margin-left: 5px;
		font-size: 16px;
	}

	#p1, #p2, #p3 {
		font-size: 12px;
		margin-left: 10px;
	}
	
	#contact_info {
		font-size: 16px;
	}
}