@import url('https://fonts.googleapis.com/css2?family=Uncial+Antiqua&display=swap');
			html {
				-webkit-text-size-adjust: 100%;
			}			  
			body {
				font-family: Arial, sans-serif;
				text-align: center;
				background-color:  	#202020;
				color: white;
				overflow: auto;
				-ms-overflow-style: none;  /* Edge & IE */
				scrollbar-width: none;      /* Firefox */
				margin: 0;
				padding: 0;
			}
			/* WebKit (Chrome, Safari, Edge) */
			::-webkit-scrollbar {
				width: 0px;
				height: 0px;
				display: none;
			}
			.deer_background_image_img {
				width: 50%; /* Adjust as needed */
    			height: auto; /* Maintain aspect ratio */
				position: fixed;
				top: 55%;
				left: 50%;
    			transform: translate(-50%, -50%); /* Centering */
				z-index: -1;
			}
			#content {
				margin-top: 0%;
				font-size: 18px;
				color: white;
			}
			header {
				border-bottom: 1px inset;
				margin-bottom: 1%;
			}
			.header_top_bar {
				display: flex;
				justify-content: space-around;
				align-items: center;
				width: 80%;
				margin: 0 auto;
			}
			.h1 {
				flex-grow: 0;
				text-align: center;
				font-size: clamp(1.8rem, calc(5vw + 1rem), 5rem); /* 1.8min,10preferred calc(7vw+1rem),5max original*/
				font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
				z-index: 999;
			}
			.h_logo_left, .h_logo_right {
				width: 10%;
				height: auto;
				z-index: 999;
			}
			.buttons_top_bar {
				display: flex;
				position: fixed;
				z-index: 1000;
				top: 3%;
				justify-content: space-between;
				padding-left: 20px;
			}
			.hamburger {
				background-color: inherit;
				color: white;
				border: none;
				display: inline-block;
				font-size: 45px; /* Increased from 30px */
				width: 45px; /* Increased from 30px */
				height: 45px; /* Increased from 30px */
				position: fixed;
				right: 1%; /* Was 3% */
				cursor: pointer;
				transition: transform 0.3s ease;
				z-index: 1000;
			}
			  /* X icon created with pseudo-elements */
			.hamburger::before,
			.hamburger::after {
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				width: 30px; /* Increased from 20px (maintains 2:3 ratio with container) */
				height: 3px; /* Increased from 2px (thicker line) */
				background: white;
				transform: translate(-50%, -50%);
				transition: all 0.3s ease;
			}
			  /* Initial hamburger state (3 bars) */
			.hamburger::before {
				box-shadow: 0 -9px 0 white; /* Increased from 6px */
			}
			.hamburger::after {
				box-shadow: 0 9px 0 white; /* Increased from 6px */
			}
			  /* X state when active */
			.hamburger.is-active::before {
				transform: translate(-50%, -50%) rotate(45deg);
				box-shadow: none;
			}
			.hamburger.is-active::after {
				transform: translate(-50%, -50%) rotate(-45deg);
				box-shadow: none;
			}
			.facebook {
				position: relative;
				gap: 8px;
				padding: 8px 14px;
				background-color: #1877f2; /* Facebook blue */
				color: white;
				text-decoration: none;
				border-radius: 6px;
				font-weight: 500;
				font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
				font-size: 14px;
				transition: background-color 0.2s ease;
			}
			  /* Facebook icon using CSS mask */
			.facebook::before {
				content: "";
				display: inline-block;
				width: 20px;
				height: 20px;
				background-color: currentColor;
				-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z'/%3E%3C/svg%3E") no-repeat center;
				mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z'/%3E%3C/svg%3E") no-repeat center;
			}
			  /* Hover state */
			.facebook:hover {
				background-color: #166fe5; /* Slightly darker blue */
				color: white;
			}
			  /* Focus state for accessibility */
			.facebook:focus {
				outline: 2px solid #1877f2;
				outline-offset: 2px;
			}
			.nav {
				display: flex;
				justify-content: center;
				align-content: center;
				background: black;
				color: white;
				position: fixed;
				top: 0%;
				right: 0%;
				width: 15%;
				height: 100%;
				z-index: 999;
				padding-top: 5%;
			}
			.nav ul {
				list-style-type: none;
				text-decoration: none;
				padding-top: 5%;
				width: 100%;
				margin: 0 auto; /* Center horizontally */
				text-align: center; /* Center text inside buttons */
			}
			.nav button {
				background-color: inherit;
				color: white;
				font-size: 24px;
				padding: 10% 0; /* Changed from padding-top to equal vertical padding */
				width: 80%; /* Reduced from 100% to allow for transform space */
				border: none;
				text-align: center; /* Ensure button text is centered */
				cursor: pointer; /* Changes cursor to pointer on hover */
				transition: all 0.3s ease; /* Smooth transition for hover effects */
				display: block; /* Ensure proper box model */
				margin: 0 auto; /* Center the button horizontally */
				position: relative; /* Needed for proper transform origin */
			}
			/* Hover effects */
			.nav button:hover {
				background-color: rgba(255, 255, 255, 0.1); /* Semi-transparent white */
				border-radius: 12px;
				color: #fff; /* Keep white but could change to accent color */
				transform: scale(1.05); /* Slight zoom effect */
				transform-origin: center; /* Ensures scaling happens from center */
			}
  			/* Optional: Add focus style for accessibility */
			.nav button:focus {
				outline: 2px solid white;
				outline-offset: -2px;
				background-color: rgba(255, 255, 255, 0.1); /* Match hover state */
			}
			#standard_page_animation {
				opacity: 1;
				transition: opacity 1s ease-in; /* 3s fade-in with a 2s delay */
			}
			#standard_page_animation.htmx-added {
				opacity: 0;
			}
			#nav_fade_in {
				opacity: .75;
				transition: opacity .5s ease-in; /* 3s fade-in with a 2s delay */
			}
			#nav_fade_in.htmx-added {
				opacity: 0;
			}
			.splash {
				width: auto;
				height: 100%;
				position: fixed;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				z-index: 1001;
				border-style: ridge;
				border-width: 5px;
				box-sizing: border-box; /* Ensure border is inside element's size */
			}
			.splash_title {
				position: fixed;
				top: 75%;
				left: 50%;
				transform: translate(-50%, -50%);
				text-align: center;
				font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
				font-size: 50px;
				color: #111111;
				z-index: 1001;
			}
			#splash_fade_out {
				opacity: 0;
				transition: opacity 2s ease-out .75s; /* 3s fade-in with a 2s delay */
				pointer-events: none; /* Allows clicks to go through */
			}
			#splash_fade_out.htmx-added {
				opacity: 1;
			}
			.home_image {
				position: relative;
				width: 100%;
				height: 70vh;   /* 100% of viewport height */
				overflow: hidden; /* Hide overflow */
				display: flex;     /* Enable flexbox for centering */
    			justify-content: center; /* Horizontally center child (img) */
    			align-items: center;     /* Vertically center child (img) */
				aspect-ratio: 16/9; /* Standard widescreen (adjust as needed) */
			}
				.home_image img {
					width: 99%;
					height: 100%;
					object-fit: cover;
					object-position: center;
					border-radius: 10px;
				}
			.home_grid {
				display: grid;
				grid-template-columns: 1fr 1fr 1fr; /* Defines 3 equal-width columns */
				grid-template-rows: auto auto; /* Two rows - height based on content */
				gap: 20px;
				max-width: 75%;
				margin: 0 auto;
				padding: 3%;
				animation: fade_in linear;
				animation-timeline: view();
				animation-range-start: cover;
				animation-range-end: contain;
			}
			.home_text, .home_text_2 {
				margin-top: 0%;
				font-size: larger;
				justify-content: center;
				align-content: center;
				text-align: center;
				display: flex;
				align-items: center;
			}
			.home_text {
				grid-column-start: 1;
				grid-column-end: 3;
				grid-row: 1;
			}
			.home_text_2 {
				grid-column-start: 2;
				grid-column-end: 4;
				grid-row: 2;
				justify-content: center;
				align-content: center;
			}
			.home_text p, .home_text_2 p {
				max-width: 99%;
				background-color: rgba(255, 255, 255, 0.1); /* Semi-transparent background */ 
				backdrop-filter: blur(100px);
				border-radius: 10px; /* Optional: for rounded corners */ 
				/* Optional: Enhance the "glass" look */
				border: 1px solid rgba(255, 255, 255, 0.2);
				box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
				padding: 5%; /* Optional: Add padding to control the "hug" */
				line-height: 1.5; /* Example value */
			}
			.ground_blind_image, .elevated_blind_image {
				border-radius: 10px;
				max-width: 100%;
				height: auto;
				display: flex;
				justify-self: center;
				align-self: center;
			}
			.ground_blind_image {
				grid-column: 3;
				grid-row: 1;
			}
			.elevated_blind_image {
				grid-column: 1;
				grid-row: 2;
			}
			.home_gallery {
				width: min(90%, 100%);
				margin: 0 auto;
				columns: 3 300px;
				column-gap: 1.5em;
			}
				.home_gallery_images {
					display: block;
					width: 100%;
					margin-bottom: 1em;
					height: auto;
					border-radius: 10px;
				}
			.gallery {
					width: min(1200px, 100%); /* Was 1000 and a little small, 1500 seemed a bit large */
					margin: 0 auto;
					columns: 3 300px;
					column-gap: 1em;
				}
				.gallery_images {
					display: block;
					width: 100%;
					margin-bottom: 1em;
					margin-left: 1em;
					height: auto;
					border-radius: 10px;
					cursor: pointer; /* Changes cursor to pointer on hover */
					transition: transform .3s; /* Animation */
					break-inside: avoid; /* Prevents column breaks - unsure if this does anything*/
				}
				.gallery_images:hover {
					transform: scale(1.2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
					box-shadow: 0 4px 12px rgba(247, 246, 246, 0.2); /* Optional: Adds depth */
				}
			.hunts_content {
				position: relative; /* or fixed if you want it always in view */
				z-index: 998;
				color: white;
				padding-bottom: 1%;
			}
			.centertable {
				margin-left: auto;
				margin-right: auto;
				margin-top: auto;
				border-spacing: 15px; /* Adjust as needed */
			}
			.hunts_info {
				font-size: 25px;
				border: 3px ridge #777;
				padding: 30px 30px;
				text-align: center;
				width: 90%;
				margin: 0 auto;
			}
			.about_us_content {
				display: grid;
				justify-content: center;
				grid-template-columns: 1fr 1fr; /* Defines 2 equal-width columns */
				grid-template-rows: auto 0.5fr; /* First row takes 1 fraction, second row takes 0.5 */
				gap: 20px;
				max-width: 90%;
				margin: 0 auto;
				padding: 3%;
			}
			.about_us_content_image {
				border-radius: 10px;
				max-width: 50%;
				height: auto;
				display: flex;
				justify-self: center;
				align-self: center;
				grid-column: 1;
				grid-row: 2;
			}
			.about_us_content p {
				max-width: 90%;
				background-color: rgba(255, 255, 255, 0.1); /* Semi-transparent background */ 
				backdrop-filter: blur(100px);
				border-radius: 10px; /* Optional: for rounded corners */ 
				/* Optional: Enhance the "glass" look */
				border: 1px solid rgba(255, 255, 255, 0.2);
				box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
				padding: 5%; /* Optional: Add padding to control the "hug" */
				line-height: 1.5; /* Example value */
			}
			.about_us_content_1, .about_us_content_2 {
				font-size: larger;
				justify-content: center;
				align-content: center;
				text-align: center;
				display: flex;
				align-items: center;
			}
			.about_us_content_1 {
				grid-column: 1 / span 2;
				grid-row: 1;
			}
			.about_us_content_2 {
				grid-column: 2;
				grid-row: 2;
			}
			footer {
				padding-top: 3%;
				z-index: 1000;
				font-size: clamp(.6rem, calc(1vw + .3rem), 1rem);
			}
			.footer_box {
				border-top: 1px inset;
				z-index: 1000;
				background-color: #171717;
			}
			.footer_contact_us {
				display: flex;
				justify-content: space-around;
				z-index: 1000;
			}
			.credits {
				z-index: 1000;
				display: flex;
				justify-content: space-evenly;
			}
			#contact_form {
				font-family: Arial, sans-serif; 
				max-width: 75%; 
				margin: 0 auto; 
				padding: 20px;
				background-color: rgba(255, 255, 255, 0.1); /* Semi-transparent background */ 
				backdrop-filter: blur(100px);
				border-radius: 10px; /* Optional: for rounded corners */ 
				/* Optional: Enhance the "glass" look */
				border: 1px solid rgba(255, 255, 255, 0.2);
				box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
				line-height: 1.5; /* Example value */
			}
			.form-group { margin-bottom: 15px; }
				label { display: block; margin-bottom: 5px; }
				input { width: 100%; padding: 8px; box-sizing: border-box; background-color: #202020; color: white; border-radius: 10px;}
				.button_submit { padding: 10px 15px; background: black; color: white; border: none; cursor: pointer; border-radius: 10px;}
				.button_submit:hover { background: #dc3545; }
				.error { color: red; }
				.success { color: green; }
			#message {
				background-color: #202020; color: white; width: 75%; max-width: 100%; border-radius: 10px;
			}
			.phone {
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
			.phone_button {
				color: inherit; /* Inherit the text color from the parent element */
				text-decoration: none; /* Remove the underline */
				cursor: pointer; /* Optionally, change the cursor to indicate it's clickable */
				transition: all 0.3s ease; /* Smooth transition for hover effects */
				display: block; /* Ensure proper box model */
				margin: 0 auto; /* Center the button horizontally */
				position: relative; /* Needed for proper transform origin */
			}
			
			.phone_button:hover {
				/* Optionally, add back some styling on hover for better user feedback */
				text-decoration: underline;
				background-color: rgba(255, 255, 255, 0.1); /* Semi-transparent white */
				border-radius: 12px;
				color: #fff; /* Keep white but could change to accent color */
				transform: scale(1.2); /* Slight zoom effect */
				transform-origin: center; /* Ensures scaling happens from center */
			}
  			/* Optional: Add focus style for accessibility */
			.phone_button:focus {
				outline: 2px solid white;
				outline-offset: -2px;
				background-color: rgba(255, 255, 255, 0.1); /* Match hover state */
			}
			.email {
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
			.email_button {
				color: inherit; /* Inherit the text color from the parent element */
				text-decoration: none; /* Remove the underline */
				cursor: pointer; /* Optionally, change the cursor to indicate it's clickable */
				padding-left: 3%;
				cursor: pointer; /* Changes cursor to pointer on hover */
				transition: all 0.3s ease; /* Smooth transition for hover effects */
				display: block; /* Ensure proper box model */
				margin: 0 auto; /* Center the button horizontally */
				position: relative; /* Needed for proper transform origin */
			}
			
			.email_button:hover {
				/* Optionally, add back some styling on hover for better user feedback */
				text-decoration: underline;
				background-color: rgba(255, 255, 255, 0.1); /* Semi-transparent white */
				border-radius: 12px;
				color: #fff; /* Keep white but could change to accent color */
				transform: scale(1.2); /* Slight zoom effect */
				transform-origin: center; /* Ensures scaling happens from center */
			}
  			/* Optional: Add focus style for accessibility */
			.email_button:focus {
				outline: 2px solid white;
				outline-offset: -2px;
				background-color: rgba(255, 255, 255, 0.1); /* Match hover state */
			}
			.home_image_buttons_container {
				display: flex;
				position: absolute;
				z-index: auto;
				align-items: flex-end;
				bottom: 10%;
				max-width: 10%;
				width: 100%;
				justify-content: space-around;
			}
			.home_image_buttons {
				background-color: inherit;
				color: white;
				border: none;
				display: flex;
				font-size: 24px; /* Increased from 30px */
				width: 15px; /* Increased from 30px */
				height: 15px; /* Increased from 30px */
				cursor: pointer;
				transition: transform 0.3s ease;
				padding: 1%;
			}
			@media all and (max-width: 1000px){
				.deer_background_image_img {
					width: 100%; /* Adjust as needed */
					top: 50%;
				}
				.home_image {
					height: auto;
				}
				.hamburger{
					top: 0%;
				}
				.nav {
					width: 30%;
				}
				.nav ul {
					padding-top: 50%;
					padding-right: 15%;
				}
				.h_logo_left, .h_logo_right {
					width: 15%;
				}
				img {
					display: block;
					width: 100%;
					margin-bottom: 1em;
				}
				.home_gallery {
					columns: 3 200px;
				}
				.gallery {
					width: min(600px, 100%);
					columns: 2 200px;
				}
				.gallery_images {
					margin-left: 0;
				}
				.gallery_images:hover {
					transform: scale(1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
				}
				.hunts_content {
					padding: 0%;
				}
				.hunts_info {
					font-size: 20px;
					width: 99%;
					padding: 0px 0px;
				}
				.home_grid {
					grid-template-columns: 1fr 1fr; /* Defines 2 equal-width columns */
					grid-template-rows: auto auto auto; /* Two rows - height based on content */
					max-width: 90%;
				}
				.home_text_2 {
					grid-column-start: 1;
					grid-column-end: 3;
					grid-row: 3;
				}
				.ground_blind_image {
					grid-column: 1;
					grid-row: 2;
				}
				.elevated_blind_image {
					grid-column: 2;
					grid-row: 2;
				}
				.about_us_content {
					grid-template-columns: 1fr; /* Defines 2 equal-width columns */
					grid-template-rows: auto auto auto; /* First row takes 1 fraction, second row takes 0.5 */
					max-width: 99%;
				}
				.about_us_content_image {
					max-width: 75%;
				}
				.about_us_content_2 {
					grid-column: 1;
					grid-row: 3;
				}
			}
			@media all and (max-width: 900px){
				.home_gallery {
					width: min(70%, 100%);
					columns: 3 300px;
				}
			}
			@media all and (max-width: 600px){
				.deer_background_image_img {
					width: 100%; /* Adjust as needed */
					top: 50%;
				}
				.buttons_top_bar {
					padding-left: 1%;
				}
				.hamburger {
					font-size: 30px;
					width: 30px;
					height: 30px;
					top: 0;
				}
				  /* X icon created with pseudo-elements */
				.hamburger::before,
				.hamburger::after {
					top: 80%;
					width: 20px;
					height: 2px; /* Making this 20 while leaving width at 20 makes a cool box/diamond */
				}
				  /* Initial hamburger state (3 bars) */
				.hamburger::before {
					box-shadow: 0 -6px 0 white;
				}
				.hamburger::after {
					box-shadow: 0 6px 0 white;
				}
				  /* X state when active */
				.facebook {
					position: fixed;
					top: 1%;
					padding: 4px 7px;
					font-size: 10px;
				}
				.nav button {
					font-size: 24px;
				}
				.h_logo_left, .h_logo_right {
					width: 15%;
					height: auto;
				}
				.gallery {
					width: min(400px, 100%);
					columns: 3 300px;
				}
			}