html, body {
	height: 100%;
	margin: 0;
	
	/* Color Settings */
	--page-bg: #eeeeee; /* Background color for the whole page */
	--primary-color: #0096d6; /* Used as error code color */
	--secondary-color: #c5960c; /* Used as back button color */
	--text-on-primary: #ffffff; /* Used for header text color */
	--text-on-secondary: #ffffff; /* Used for back button text color */
	--message-text-color: #444; /* Used for body and message text color */
	
	/* Font Settings */
	--error-code-font-size: 12rem; /* Font size of error code (404, 500, etc.) */
	--message-font-size: 4rem; /* Font size of message text */
	
	/* Header Settings */
	--header-display: flex; /* Set none to hide, flex to show */
	--header-title-display: none; /* Set none to hide, block to show */
	--header-subtitle-display: none; /* Set none to hide, block to show */
	--header-bg: #ffffff; /* Background color for the header */
	--header-padding-x: 1rem; /* Padding on the left and right of header */
	--header-padding-y: 1rem; /* Padding on the top and bottom of header */
	--logo-height: 42px; /* Height of the logo. Used to calculate header height. */
	--logo-width: auto; /* Width of logo. Used to calculate left indent for title and subtitle. If not using titles, set to 'auto'. */
	--logo-url: url("imaginit-logo.png"); /* url() to logo file. Use 'none' for no logo and set logo-height to 0. */
}

body {
    background: var(--page-bg);
    color: var(--message-text-color);
    font: 14px Verdana, Helvetica, sans-serif;
    margin: 0;
}

#container {
	height: 100vh;
	justify-content: center;
	min-height: 100%;
	overflow: hidden;
	width: 100%;
}

#header {
    background-color: var(--header-bg);
	background-image: var(--logo-url);
	background-size: var(--logo-width) var(--logo-height);
	background-repeat: no-repeat;
	background-position: var(--header-padding-x) var(--header-padding-y);
	box-shadow: 0px 2px 6px -1px rgba(0, 0, 0, 0.25);
	display: var(--header-display);
	flex-direction: column;
	/* gap: 0.25rem; */
    height: calc(var(--logo-height) + (2 * var(--header-padding-y)));
	justify-content: center;
	width: 100%;
}

#header h1, #header h2 {
	color: var(--text-on-primary);
    left: calc(var(--logo-width) + (var(--header-padding-x) * 2));
	font-family: Arial, sans-serif;
    margin: 0;
    position: relative;
}

#header h1 {
	display: var(--header-title-display);
	font-weight: bold;
	font-size: calc(var(--logo-height) / 2);
}

#header h2 {
	display: var(--header-subtitle-display);
	font-size: calc(var(--logo-height) / 2.5);
	opacity: 0.85;
}

#content {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	/* height: 100vh; */
	justify-content: center;
	min-height: 80%;
}

#errorCode {
	color: var(--primary-color);
    font-size: var(--error-code-font-size);
    font-weight: bold;
    letter-spacing: -0.75rem;
    line-height: var(--error-code-font-size);
    text-align: center;
}

#message {
	color: var(--message-text-color);
    font-size: var(--message-font-size);
    font-family: "Arial Narrow", Arial, sans-serif;
    font-weight: bold;
    text-align: center;
}

#backButton {
	align-items: center;
	display: flex;
	margin-top: 2rem;
	
}

#backButton a {
	background-color: var(--secondary-color);
	border-radius: 0.5rem;
	/* box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.25); */
	color: var(--text-on-secondary);
	font-weight: bold;
	margin: 0 auto;
	padding: 0.75rem 1rem;
	text-decoration: none;
	/* text-shadow:0px 1px 0px #999; */
	text-transform: uppercase;
}

#backButton a:hover {
	opacity: 0.7;
}

#backButton a:visited {
	color: var(--text-on-primary);
}