:root{
	--content-max-width: 990px;
}

h2 {
    color:#77684C;
    font-size: 2em;
	font-family: 'Times New Roman', Times, serif;
	font-weight: normal;
}

p {
    font-size: 18px;
    line-height: 1.6;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    background:#000;
    color:#eee;
    overflow-x: hidden;
}

main{
	max-width:var(--content-max-width);
	margin:0 auto;
	padding:0px 16px;
}

/* Ensure section content stretches full width of the centered content area */
.section, .section-content{
	width:100%;
}

/* Make Bio and Contact behave like full-screen sections (centered content)
   Keep a smaller vertical padding on mobile to avoid content touching edges */
#bio, #contact{
	min-height:100vh;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0;
}

@media(max-width:600px){
	#bio, #contact{
		min-height:auto;
		padding:40px 0;
	}
}


/* Hero: center both vertically and horizontally; background image + overlay */
.hero{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	min-height:100vh;
	width:100%;
}

.hero-text{
	position:relative;
	z-index:2;
	padding:16px;
	max-width:900px;
	color: #fff;
}

.hero-logo{
	display:block;
	margin:0 auto 20px;
	max-width:500px;
	width:100%;
	height:auto;
}

.hero h1{
	font-family: 'Times New Roman', Times, serif;
	font-size: 2rem;
	margin:0 0 10px;
	color:#77684C;
}

.hero-subtitle{
	margin:0;
	color:#bbb;
	font-weight:300;
}

/* Parallax helper class for full-screen sections */
.parallax{
	position:relative;
	background-image: url('images/hero-bg.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	/* make the section span the full viewport width while remaining centered */
	width: 100vw;
	left: 0%;
	margin-left: calc(50% - 50vw);
    padding: 0px 20px !important;
}

.parallax::before{
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.55);
	z-index: 1;
}

/* Lighter overlay for the bio section so the background texture remains visible */
#bio.parallax::before{
	background: rgba(0,0,0,0.25);
}

/* Ensure content appears above the overlay */
.parallax > .section-content,
.parallax > .hero-text,
.parallax .hero-text{
	position: relative;
	z-index: 2;
}

@media(max-width:600px){
	.parallax { 
        background-attachment: scroll; 
    }
}

/* Use a different background for the bio section */
#bio.parallax{
	background-image: url('images/nebel.webp');
}

#contact.parallax{
	background-image: url('images/contact-bg.jpg');
}

/* Ensure section inner content stays constrained and centered */
.parallax > .section-content,
.parallax > .hero-text{
	max-width: var(--content-max-width);
	margin: 0 auto;
	padding: 40px 16px;
}

/* Social icon bar inside hero */
.social-icon-bar{
	display:flex;
	flex-direction:row;
	gap:12px;
	justify-content:center;
	align-items:center;
	margin-top:18px;
}

.social-icon-bar a{display:inline-block;line-height:0}

.social-icon-bar img{
	width:22px;
	height:22px;
	display:block;
    margin: 0px 5px;
}

/* Contact form styles */
.contact-form{
	margin-top:18px;
	display:flex;
	flex-direction:column;
	gap:10px;
}

.contact-form label{
	font-size:0.9rem;
	color:#ddd;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
	width:100%;
	padding:10px 12px;
	border:1px solid rgba(255,255,255,0.08);
	background: rgba(255,255,255,0.02);
	color:#fff;
	border-radius:4px;
	font-size:1rem;
}

.contact-form textarea{ resize:vertical; }

.contact-form .btn{
	display:inline-block;
	padding:10px 16px;
	background:#222;
	color:#fff;
	border:1px solid rgba(255,255,255,0.06);
	border-radius:4px;
	cursor:pointer;
}

.contact-form .form-status{
	margin-top:6px;
	font-size:0.95rem;
	color:#cfcfcf;
}

/* Hide honeypot field visually but keep it accessible to bots */
.contact-form .hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

footer {
    background: #060606;
}

.footer-bottom p {
    font-size: 14px;
    color: #77684C;
    margin: 0;
    padding: 20px 0;
    text-align: center;
}

@media(min-width:900px){
	.hero h1{font-size:2rem}
}

@media(max-width:420px){
	.hero-logo{width:60%}
	main{padding:24px 12px}
}