/* RESET */
*{margin:0;padding:0;box-sizing:border-box;}

html{
	scroll-behavior:smooth;
}

body{
	margin:0;
	font-family: "Raleway", sans-serif;
	color:#222;
	background:#e2fdd8;
}

header{
	position:sticky;
	top:0;
	height:124px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	padding:0 4vw;
	background:#e2fdd8;
	/*background:rgba(226,253,216,0.8);*/
	z-index:2000;
}

.logo img{
	width:80%
}

/* NAV */
nav a{
	font-family: "Raleway", sans-serif;
	font-size:18px;
    font-optical-sizing: auto;
    font-weight: 500;
	text-decoration:none;
	color:#777;
	padding:6px 12px;
	border-radius:8px;
}

nav a:hover{
	/*background:rgba(255,255,255,.8);*/
	color:#e09827;
}

/* SECTION SCROLLING */
section{
	scroll-margin-top: calc(100px);
}

.panel-two{
	scroll-margin-top: calc(100px);
}

.panel-three{
	scroll-margin-top: calc(0px);
}

.panel{
	min-height:100vh;
	display:grid;
	place-items:center;
	color:#eee;
	padding:4vw;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	background-attachment:fixed;
}

/* NEW NEW NEW NEW */
.panel-two,
.panel-three{
	min-height:auto;
	padding:2vw 4vw;
}

.panel-two .space-scene,
.panel-three .space-scene{
	height:auto;
	min-height:auto;
	padding:40px 0;
}
/* END NEW */

.panel-one{
	/* background-image:url(../img/image1.jpg); */
	background:#e2fdd8; 
}

.panel-two{
	/* background-image:url(../img/image2.jpg); */
	background:#e2fdd8;
}

.panel-three{
	/*background-image:url(../img/image3.jpg);*/
	background:#e2fdd8;
}

/* CARDS CARDS CARDS */
.card{
	background:rgba(226,253,216,.8);
	padding:0px 20px;
	border-radius:16px;
}

.herocard{
	background:#e2fdd8;
	padding:0px 20px;
}

.contactcard{
	background:rgba(0,0,0,.8);
	padding:0px 20px;
	border-radius:16px;
}

.content{
	max-width:180ch;
	margin:0 auto;
	padding:16px 40px;
	line-height:1.6;
	color:#333;
	background:#e2fdd8;
}

.back{
	color:#eee;
	text-align:center;
}

/* HERO IMAGE */
.hero{
	/*margin-top:80px;*/
	position:relative;
	z-index:2;
}

.hero img{
	border-radius:16px;
}

/* SCROLL DOWN LINK */
.worklink{
	text-decoration:none;
}

/* TYPEWRITER ANIMATION */
.type{
	position:relative;
	margin:30px auto;
	color:#777;
	font-size:24px;
	font-weight:400;
	letter-spacing:7px;
	overflow:hidden;
	border-right:2px solid #fff;
	white-space:nowrap;
	animation:typewriter 2s steps(12) .5s 1 normal both,
				blink 800ms infinite;
}

@keyframes typewriter{
	from{
		width:0;
	}

	to{
		width:500px; /* WIDTH NEEDED TO GET ALL TEXT TO SHOW */
	}
}

@keyframes blink{
	from{
		border-right-color:#777;
	}

	to{
		border-right-color:transparent;
	}
}

/* EXTRA CURLY */


/* STARS */
.space-scene{
	position:relative;
	background:#e2fdd8; /* NEW - WAS #000 */
	height:100vh;
	width:100%;
	overflow:hidden;
	display:flex;
	flex-direction:column; /* NEW */
	align-items:center;
	justify-content:center;
	text-align:center;
}

.stars{
	position:absolute;
	/*inset:0; /* SAME AS top:0; right:0; bottom:0; left:0; */
	top:0;
	left:50%;
	width:200vh;
	height:100%;
	transform:translateX(-50%); /* center the oversized layer */
	background-repeat:repeat;
	background-size:200px 200px;
	animation:drift linear infinite;
	z-index:0;
	pointer-events:none;
}

/* pointer-events:none; = "ignore clicks"
    THE STARS STAY VISIBLE 
    BUT - CLICKS PASS THROUGH TO ELEMENTS UNDERNEATH */

.stars-back {
  background-image: 
    radial-gradient(3px 3px at 20px 40px, #87a97b, transparent), /* WAS WHITE */ 
    radial-gradient(1px 1px at 120px 200px, #87a97b, transparent), /* WAS #DDD */ 
    radial-gradient(4px 4px at 250px 80px, #87a97b, transparent), /* WAS WHITE */ 
    radial-gradient(1px 1px at 400px 300px, #87a97b, transparent), /* WAS #CCC */ 
    radial-gradient(1px 1px at 600px 150px, #87a97b, transparent), /* WAS WHITE */ 
    radial-gradient(4px 4px at 800px 220px, #87a97b, transparent); /* WAS #EEE */ 
  background-size: 800px 800px;
  animation: drift 10s linear infinite; /* CAN SPEED OR SLOW */
} 

.stars-mid {
  background-image: radial-gradient(2px 2px at 50px 60px, #87a97b, transparent),
                    radial-gradient(2px 2px at 150px 100px, #87a97b, transparent);
  background-size: 300px 300px;
  animation-duration: 18s; /* CAN SPEED OR SLOW */
} 

.stars-front {
  background-image: 
	radial-gradient(2px 2px at 30px 60px, #87a97b, transparent),
	radial-gradient(3px 3px at 150px 140px, #87a97b, transparent),
	radial-gradient(5px 5px at 280px 300px, #87a97b, transparent),
	radial-gradient(4px 4px at 420px 200px, #87a97b, transparent), 
	radial-gradient(2.5px 2.5px at 650px 100px, #87a97b, transparent),
	radial-gradient(5px 5px at 850px 350px, #87a97b, transparent); 
  background-size: 800px 400px;
  animation: drift 10s linear infinite; /* CAN SPEED OR SLOW */
}

/* STAR ANIMATION */
@keyframes drift{
	from{
		background-position:0 0; /* X - Y */
	}

	to{
		background-position: -1000px 1000px;
	}
}

/* ABOUT SECTION */
#info1 h2{
	text-align:center;
}

#info1 img{
	width:12%;
	min-width:80px;
	float:left;
	margin:0 20px 0 0;
}

/* PANEL 2 - THUMBNAIL GALLERY */
.panel-two h2{
	text-align:center;
	margin:12px 0;
	font-size:32px;
	font-weight:400;
	color:#222;
}

.gallery{
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:16px;
	margin-top:16px;
}

.thumb{
	display:block;
	border-radius:10px;
	overflow:hidden;
	transition: transform .2s ease;
}

.thumb:hover{
	transform: translateY(-8px);
}

.thumb img{
	display:block;
	width:100%;
	height:100%;
	aspect-ratio: 4 / 3;
	object-fit:cover;
}

/* MODALS */
.modal{
	position:fixed;
	inset:0;
	display:grid;
	place-items:center;
	background:rgba(0,0,0,.7);
	opacity:0;
	visibility:hidden;
	transition:opacity .25s ease, visibilty .25s ease;
	z-index:9999;
}

.modal:target{
	opacity:1;
	visibility:visible;
}

/* CLICKABLE BACKGROUND */
.modal_backdrop{
	position:absolute;
	inset:0;
	display:block;
	content:"";
}

/* MODAL BOX CONTENT */
.modal_box{
	position:relative;
	margin:32px;
	max-width:min(90vw, 960px);
	max-height:85vh; /* 85vh */
	background:#111;
	border-radius:12px;
	overflow:hidden;
	color:#eee;
}

.modal_box img{
	display:block;
	width:100%;
	height:auto;
	max-height:75vh;
	object-fit:contain;
	background:#000;
}

/* CAPTION */
.modal_box figcaption{
	padding:14px 16px;
	font-size:16px;
	color:#cbd5e1;
	background:rgba(255,255,255,.1);
}

.modal_box figcaption a{
	color:#cbd5e1;
}

/* CLOSE BUTTON */
.modal_close{
	position:absolute;
	top:12px;
	right:14px;
	text-decoration:none;
	color:#fff;
	font-size:36px;
	padding:0 12px 8px 12px;
	border-radius:8px;
	background:#444;
	transition:background .2s ease, transform .2s ease;
	z-index:1;
}

.modal_close:hover{
	transform:scale(1.2);
}


/* CONTACT FORM */
.emailme{
	padding:10px 10px 10px 6px;
}

.emailme a{
	color:#222;
	text-decoration:none;
}

.emailme a:hover{
	text-decoration:underline;
}

.contact-form{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:12px;
	width:100%;
	max-width:400px;
	margin:0 auto;
}

.contact-form label{
	font-weight:500;
	letter-spacing:0.5px;
	align-self:flex-start;
}

.contact-form input, .contact-form textarea{
	width:100%;
	padding:10px;
	border-radius:6px;
	background:#444;
	color:#fff;
	font-size:16px;
}

.contact-form button{
	align-self:flex-start;
	background:#ccc;
	border:none;
	border-radius:6px;
	padding:12px 24px;
	font-weight:500;
	cursor:pointer;
	transition:background 0.3s ease;
}

.contact-form button:hover{
	background:#eee;
}

#form-status{
	margin-top:10px;
	font-weight:600;
}

#form-status.success{
	color:#2ecc71;
}

#form-status.error{
	color:#ffb66b;
}

/* FOOTER */
footer{
	height:140px;
	width:100%;
	padding:30px;
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
}

.footertext{
	width:50%
}

/* SOCIAL */
.social{
	list-style:none;
	width:50%;
	margin:10px auto;
	display:flex;
	justify-content:flex-end;
}

.social li{
	display:inline-block;
	width:30px;
	height:30px;
	margin:0 6px;
}

.social li a{
	display:block; /* NEW - MAKES THE ICON CLICKABLE */
	width:30px;
	height:30px;
}

/* X */
.x_icon{
	background:url(../img/twitter30.png) no-repeat;
}

.x_icon:hover{
	background:url(../img/twitter30_hover.png) no-repeat;
}

/* INSTAGRAM */
.instagram_icon{
	background:url(../img/instagram30.png) no-repeat;
}

.instagram_icon:hover{
	background:url(../img/instagram30_hover.png) no-repeat;
}

/****** NEW NEW NEW NEW ******/
.bottomnav{
    display:none;
}



/* MEDIA QUERY */ /* MEDIA QUERY */ /* MEDIA QUERY */ /* MEDIA QUERY */
@media (max-width:520px){
	.gallery{
		grid-template-columns: 1fr;
	}

	/* NEW STUFF */
	header{
        justify-content:center;
        flex-wrap:wrap;
    }

    nav{
        display:none;
    }

    /* BOTTOMNAV */
    .bottombox{
        position:fixed;
        bottom: 0;      /* Aligns the element to the bottom edge */
        left: 0;        /* Starts the element from the left edge */
        width: 100%; 
    }

    .bottomnav{
        display:flex;
        flex-direction:row;
        justify-content:space-between;
        text-align:center;
        margin-top:18px;
        /* Fallback for older browsers */
        padding-bottom: 20px; 
        /* Modern iOS safe area support */
        padding-bottom: env(safe-area-inset-bottom);
		/* MORE iOS */
		/* Standard padding plus safe area inset for iOS */
   		padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }

    .bottomnav a, .bottomnav a:visited{
        width:33%;
        line-height:40px;
        color:#fff;
        text-decoration:none;
        background:#444; /* WAS #b3e140 */
    } 

    /* SLIDESHOW */
    .slideshow{
			width:max(440px);
		}

    /* TYPEWRITER */
    .type{
        font-size:18px;
       /*margin:30px auto;*/
        /*animation:typewriter 2s steps(12) .5s 1 normal both,
				blink 800ms infinite !important;*/
    }

    @keyframes typewriter{
	from{
		width:0;
	}

	to{
		width:480px !important; /* WIDTH NEEDED TO GET ALL TEXT TO SHOW */
	}
}

	footer{
		flex-direction:column;
		padding:78px 0;
	}

	footer i{
		display:none !important;
	}

	.social{
		justify-content:center;
	}

}