@import url("https://fonts.googleapis.com/css2?family=Bungee&family=Covered+By+Your+Grace&display=swap");

/* Root variables */
:root {
	--body-font: "Raleway", sans-serif; /* Default body font */
	--header-color: rgba(3, 150, 100, 0.75); /* Header text color */
	--header-img: url("../Images/coffee-bgnd.jpeg"); /* Header background image */
	--region-title-bg-color: #aa8eb5; /* Region title background color */
	--region-border-bottom-color: #e4bb97;
	--region-info-text-color: #2c1a0b; /* Region paragraph text color */
}

/* Body styling */
body {
	background-color: whitesmoke; /* Page background */
	font-family: var(--body-font); /* Set font */
}

/* Header */
header {
	min-height: 400px; /* Minimum height */
	background-image: var(--header-img); /* Background image */
	background-position: center; /* Center background image */
	background-repeat: no-repeat; /* Prevent repeat */
	background-size: cover; /* Cover entire header area */
}

/* Main heading */
h1 {
	font-size: 6rem; /* Large header font */
	font-family: "Covered By Your Grace", cursive; /* Decorative font */
	color: var(--header-color); /* Header color */
	font-weight: 800; /* Bold weight */
	text-align: center; /* Center text */
}

/* Region container */
.region {
	margin: 50px 0; /* Space above and below */
	padding-bottom: 50px; /* Space inside */
	position: relative; /* Needed for pseudo-element */
}

.region::after {
	content: ""; /* Empty pseudo-element */
	display: block;
	width: 90%; /* Width of border line */
	height: 1px; /* Thickness of border */
	background-color: var(--region-border-bottom-color);
	margin: 0 auto; /* Center line */
	margin-top: 0.5rem; /* Space above pseudo-border */
}

/* Region title */
.region-title {
	font-family: var(--body-font); /* Font family */
	font-weight: 600; /* Medium-bold */
	font-size: 1.75em; /* Font size */
	background-color: var(--region-title-bg-color); /* Background color */
	padding: 0.5em; /* Padding inside title */
	border-radius: 0.25rem; /* Rounded corners */
}

/* Region paragraph */
.region-info {
	color: var(--region-info-text-color); /* Text color */
	font-family: var(--body-font); /* Font family */
	font-size: 1.25em; /* Font size */
	font-weight: 400; /* Normal weight */
	text-indent: 32px; /* Paragraph indentation */
	line-height: 1.5; /* Line height */
	text-align: justify; /* Justify text */
	margin-top: 1rem; /* Spacing above */
}