/* General Styles */
body {
	font-family: 'Comic Sans MS', sans-serif; /* Fallback fonts added */
	background-color: #FFF; /* Black background */
	color: #fff; /* White text */
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh; /* Ensures the body takes up the full viewport height */
	font-size: 16px; /* Base font size increased */
}

/* Header */
header {
	background-color: #f2c94c; /* Gold header */
	padding: 1rem;
	color: #000;
	/* text-align: center; */
	border-bottom: 1px solid #fba500;
}

header h1 {
	color: #000; /* Black text on gold background */
	margin: 0;
	font-size: 2.5rem; /* Larger font size for the header */
}

/* Main Content */
main {
	padding: 2rem;
	background-color: #fff; /* White content area */
	color: #000; /* Black text */
	flex: 1; /* Allows the main content to grow and push the footer down */
}

main h2 {
	color: #f2c94c; /* Gold headings */
	margin: 5px 5px 5px 5px;
	font-size: 2rem; /* Larger font size for headings */
}

h2 {
	color: #f2c94c; /* Gold headings */
	margin-top: 1.5rem;
	font-size: 2rem; /* Larger font size for headings */
}

b { color: #f2c94c; /* Gold bold text */ }

li {
	color: #000; /* Black list items */
	margin-bottom: 0.5rem;
	font-size: 1.1rem; /* Slightly larger font size for list items */
}

/* Footer */
footer {
	background-color: #f2c94c; /* Gold footer */
	border-top: 1px solid #fba500;
	padding: 0.2rem;
	text-align: center;
	color: #000; /* Black text on gold background */
	font-size: 1rem; /* Adjusted font size for footer */
}


/* extra headertop */
.left { flex-basis: 75%; text-align: left;}
.middle { flex-basis: 10%; text-align: right; margin-left:5px; margin-right:5px;}
.right { flex-basis: 15%; text-align: right; margin-right:5px;}
headertop { display: flex; justify-content: space-between; align-items: center;	background-color: #000; }

.card-front {
	transform: translate(0%, 0%) scale(0.8) rotateY(0deg);
	border: 5px solid black;
	border-radius: 10px;
	box-sizing: border-box;
	margin-top: 10%;
	margin-bottom: 10%;
	background-size: cover;
	background-position: center;
	width: 200px;
	height: 300px;
	align-items: center;
	box-sizing: border-box;
}

.disclaimer {
	font-size: 1.3rem;
}

.content-center{
	max-width: 630px; /* Maximum width on larger screens */
	width: 100%;     /* Allow it to shrink on smaller screens */
	margin-left: auto;  /* Center the block */
	margin-right: auto; /* Center the block */
	box-sizing: border-box; /* Include padding in width calculation if you add padding later */
}
/* Optional: Add some padding within this container for mobile */
@media (max-width: 768px) {
  .content-center {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
	header, main, footer { padding: 1rem; }
	header h1 { font-size: 2rem; /* Slightly smaller heading for mobile */ }
	h2 {   font-size: 1.8rem; /* Slightly smaller heading for mobile */  }
}
@media (max-width: 990px){
	.cardRight{ display: none; }/* Hide the card containers */
}
@media (max-width: 780px){
	.card-front{ display: none; }/* Hide the card containers */
	.sitelogo { width: 100px}
	.left h1 { font-size: 1.2rem; }
}