@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Coral+Pixels&family=Creepster&family=Tagesschrift&display=swap');

:root {
	--background: #EFEEEA;
	--text: #273F4F;
	--primary: #000000;
	--darkgreen-background: #1F2041;
	--darkgreen-text: #4B3F72;
}

body {
	font-family: "Azeret Mono", serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	background-color: var(--background);
	color: var(--text);
	width: 100vw;
	max-width: 100%; /* Changed from 1400px to allow full width */
	margin: 0;
	padding: 0;
	overflow-x: hidden; /* Prevent horizontal scrolling */
}

h1 {
	font-family: "Coral Pixels", system-ui;
	font-weight: 400;
	font-style: normal;
	font-size: clamp(3rem, 4.2vw, 5rem); /* 👈 THIS auto-resizes the font */
	margin: 0;
}


/* Model Viewer Container Styles */
.model-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
	max-width: 1200px;
	margin: 0 auto;
}

.model-column {
	flex: 1;
	min-width: 300px;
	background-color: transparent;
	border-radius: 8px;
	padding: 15px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	position: relative; /* Position relative for absolute positioning of link */
	cursor: pointer; /* Change cursor to indicate clickable */
	transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth transition for hover effects */
}

.model-column:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Link covering the entire column */
.model-column-link {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3; /* Increased z-index to be above model-viewer */
}

/* Disable pointer events on model-viewer to allow click-through */
model-viewer {
	position: relative;
	z-index: 2;
	pointer-events: none; /* This makes clicks pass through */
}

.model-title {
	text-align: center;
	margin-bottom: 10px;
	font-size: 1.2rem;
	font-family: "Coral Pixels", sans-serif;
	color: var(--text);
	position: relative; /* Keep on top of the link */
	z-index: 2;
	pointer-events: none; /* Allow clicks to pass through the title too */
}

/* Visual feedback for clickable areas */
.model-column:hover::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(39, 63, 79, 0.05); /* Using your --text color with transparency */
	border-radius: 8px;
	pointer-events: none;
}

/* Basic elements */
header {
	position: relative;
	top: 0;
	left: 0;
	width: 100vw;
	background-color: var(--background);
	margin-bottom: 30px;
	text-align: center;
	padding-bottom: 1rem;
	height: auto; /* Changed from fixed height to auto */
	overflow: hidden;
	display: flex;
	flex-direction: column; /* Changed from row to column */
	justify-content: center;
	align-items: center;
	gap: 20px;
}

header h1 {
	margin: 0 0 1rem;
	position: relative;
	z-index: 10;
	color: var(--primary);
}

header img {
	width: 100px;
}

.rotedheader {
	position: relative;
	display: inline-block;
	transform: scaleY(-1);
	margin: 0;
	padding: 0;
	line-height: 1;
	transform-origin: center center;
}

/* Navigation styles */
nav {
	width: 100%;
	display: flex;
	justify-content: center;
}

.navsection {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	flex-wrap: nowrap;
	white-space: nowrap;
	overflow-x: auto; /* Allow horizontal scrolling if needed */
	padding: 0 10px;
	-ms-overflow-style: none;  /* Hide scrollbar in IE and Edge */
	scrollbar-width: none;  /* Hide scrollbar in Firefox */
}

.navsection::-webkit-scrollbar {
	display: none; /* Hide scrollbar in Chrome, Safari and Opera */
}

.navsection p, .navsection a {
	margin: 0;
	padding: 0 10px;
	flex-shrink: 0; /* Prevent items from shrinking */
}

/* Hydra Canvas Styling */
#maindisplay-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

#canvasdiv {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#mycanvas {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#codediv {
	display: none; /* Hide the code display */
}

main {
	padding: 1rem;
	max-width: 1400px;
	margin: 0 auto;
}

footer {
	max-width: 1400px;
	margin: 50px auto 10px;
	text-align: center;
	padding: 20px;
	border-top: 1px solid var(--text);
}

/* Links and text */
p, a {
	line-height: 120%;
}

a, a:visited {
	color: var(--primary);
	text-decoration: none; /* Remove underline from all links */
}

hr {
	color: var(--background);
	border: none;
	border-bottom: 1px solid var(--text);
}

/* Footer Social Icons */
.social-links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	margin-top: 20px;
	flex-wrap: wrap;
}

.social-links a {
	display: inline-block;
	transition: transform 0.2s ease;
}

.social-links a:hover {
	transform: scale(1.1);
}

.social-icon {
	width: 32px;
	height: 32px;
	background-color: var(--text);
	border-radius: 4px;
	display: block;
}

.contact-email {
	font-size: 1rem;
	margin: 0;
}

.contact-email a {
	color: var(--primary);
	text-decoration: none;
}

.contact-email a:hover {
	text-decoration: underline;
}

.column {
	overflow: hidden;
	height: 600px; /* Adjust height as needed */
	position: relative;
}

.scroll-wrapper {
	display: flex;
	flex-direction: column;
	animation: scroll-up 25s linear infinite;
}

@keyframes scroll-up {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-50%);
	}
}

/* Optional: pause scrolling on hover */
.column:hover .scroll-wrapper {
	animation-play-state: paused;
}














/* Responsive layouts */
@media (max-width: 900px) {
	.model-container {
		flex-direction: column;
	}
}

@media screen and (max-width: 600px) {
	.navsection {
		gap: 10px;
	}

	.navsection p, .navsection a {
		padding: 0 5px;
		font-size: 0.9rem; /* Slightly smaller font on very small screens */
	}
	.social-links {
		gap: 15px;
	}
}

@media (max-width: 768px) {
	.photo-gallery {
		flex-direction: column;
		gap: 0;
	}

	.column {
		width: 100%;
		height: 500px; /* Adjust for mobile view */
	}

	.scroll-wrapper {
		animation-duration: 20s;
	}

	/* Optional: Hide additional columns if you only want one column visible */
	.photo-gallery .column:not(:first-child) {
		display: none;
	}
}