#preview-guide { opacity: 0; padding-top:10px; z-index: 1000; position: absolute; top: 0; left: 50%; transform: translate(-50%,0); width: var(--content-width); }

:root {
	--max-content-width: 900px;
	--content-width: min(var(--max-content-width), 100vw);
	
	--border: 4px var(--blue-11) solid;
	--border-radius: 1.5rem;
	--section-padding-h: min(2em,4%);
	
	--text: var(--gray-1);
	--text-dark: var(--blue-11);
	
	--accent-light-1: var(--pink-4);
	--accent-light-2: var(--pink-6);
	
	--water-1: #c9ccd4;
	--water-2: #36435e;
	--water-3: #2b3251;
	--water-4: #1e1c3d;
	--water-5: #0d0526;
	
	--blue-1: #bfd1e5;
	--blue-2: #99b4d1;
	--blue-3: #7499c2;
	--blue-4: #5982b8;
	--blue-5: #3667a9;
	--blue-6: #2b528d;
	--blue-7: #2b427b;
	--blue-8: #242f65;
	--blue-9: #1c234f;
	--blue-10: #131438;
	--blue-11: #0d0526;
	
	--pink-1: #ffffff;
	--pink-2: #f9dff0;
	--pink-3: #e0b6d3;
	--pink-4: #bf8cc0;
	--pink-5: #9d668d;
	--pink-6: #7d5274;
	--pink-7: #5c3b66;
	--pink-8: #412549;
	
	--brown-1: #ffd872;
	--brown-2: #f1b367;
	--brown-3: #da9a72;
	--brown-4: #b76958;
	--brown-5: #91423c;
	
	--gray-1: #ffffff;
	--gray-2: #d7d0db;
	--gray-3: #bdb3cf;
	--gray-4: #a793ae;
	--gray-5: #7d6a86;
}

html { margin: 0; width: 100%; height: 100%; overflow-x: hidden; }

body {
	margin: 0;
	font-family: 'Comic Sans MS';
	color: var(--text);
	background: var(--blue-11);
}
@media screen and (width < var(--max-content-width)) { body { overflow-x: hidden; } }

/* header text */
h1, h2, h3, h4 { margin: 0; }
h1 { font-size: 9em; line-height: 0; text-align: center; }

img {
	max-width: 100%;
	-webkit-user-select: none; user-select: none;
	pointer-events: none; user-select: none;
}

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

button { margin: 0; padding: 0; background: none; font-size: inherit; font-weight: inherit; border: none; }

/************************** FULL SCREEN PAGES **************************/
.full-page {
	margin: 0 auto;
	width: var(--content-width);
	
	b {
		color: var(--pink-4);
	}
	
	a:link, a:visited {
		color: var(--brown-3);
		&:hover { color: var(--brown-1); }
	}
	
	button.back {
		padding: .25em .5em;
		margin-top: .5em;
		color: var(--brown-5);
		background: var(--brown-1);
		border: var(--border); border-color: var(--brown-3);
		border-radius: .5em;
		
		&:hover {
			background: var(--brown-2);
			border-color: var(--brown-1);
		}
	}
}

main { 
	background: var(--blue-9);
}
#equipment, #hadal-zone { padding: 1em var(--section-padding-h); }

#equipment .polaroid { float: left; margin: 1em 1em 1em 0; rotate: -4deg; width: min(90%,300px); }

/************************** GROWING BUTTONS **************************/
.button-wrapper button { position: relative; }
.button-wrapper button:is(:hover, :focus-visible) { width: 104%; margin: -2%; }

/************************** YOUTUBE IFRAME **************************/
iframe.yt-video { border: var(--border); width: 100%; aspect-ratio: 5/3; }

/************************** POLAROID PHOTOS **************************/
.polaroid {
	max-width: 100%;
	font-family: 'Mabook', sans-serif;
	color: var(--blue-7);
	text-align: center;
	font-size: 1.5rem;
}
.polaroid > .wrapper {
	width: 100%;
	padding: calc(4% + 4px);
	padding-bottom: .3em;
	position: relative;
	background: var(--white);
}
.polaroid p { margin: 0; }
.polaroid, .polaroid .photo { border: var(--border); }
.polaroid .photo {
	aspect-ratio: 1 / 1;
	background: var(--blue-11);
}

/************************************************************************/
/************************** AQUARIUM SECTION **************************/
/************************************************************************/

#aquarium-section {
	padding-top: 1em;
	display: flex; flex-direction: column; gap: 0;
	background-color: var(--blue-9);
	background-image: url('images/header_bg.svg');
	background-size: 100% 100%;
	border-bottom: var(--border);
	
	> header {
		margin-left: 3%;
		z-index: 1;
		width: 80%;
		img { max-height: 1em; }
	}
	
	> .content {
		position: relative;
		width: 100%;
		aspect-ratio: 1.75/1;
	}
}

#aquarium-wrapper {
	pointer-events: none;
	position: absolute;
	z-index: 1;
	bottom: 5%;
	left: 58%;
  transform: translate(-50%,0);
  width: 70%;
	> div {
		position: relative;
		width: 100%;
		height: 100%;
	}
}
/* aquarium fish */
.button-wrapper:has(#aquarium-snailfish) {
  position: absolute;
  z-index: 3;
  top: 39%;
  left: 53%;
  transform: translate(-50%,-50%);
  width: 80%;
}
#aquarium-snailfish {
	pointer-events: initial;
	animation: 1.5s alternate ease-in-out infinite fish;
}
@keyframes fish {
	from { transform: translateY(2%) }
	to { transform: translateY(-2%) } 
}
/* trench poster button */
.button-wrapper:has(#trench-poster) {
	position: absolute;
  bottom: 41%;
  right: -5%;
  width: 29%;
  rotate: 17deg;
}
.button-wrapper:has(#snail-poster) {
	position: absolute;
  bottom: 70%;
  left: 6.5%;
  width: 20%;
  rotate: -15deg;
}
.button-wrapper:has(#sub-model) {
	z-index: 2;
  position: absolute;
  bottom: 4%;
  left: -7%;
  width: 40%;
}
.button-wrapper:has(#fish-food) {
	z-index: 2;
	position: absolute;
	bottom: .5%;
  right: -2%;
  width: 14%;}

/************************************************************************/
/************************** BASIC INFO SECTION **************************/
/************************************************************************/

#basic-info {
	background: var(--blue-8);
	width: 100%;
	display: flex; gap: 2.5rem; flex-wrap: wrap;
	justify-content: center; align-items: start;
	padding: 3rem var(--section-padding-h);
	/* account for next section's header */
	padding-bottom: calc(.12 * var(--content-width));
}

/************************** TRIVIA BOX **************************/

/* outer borders */
#trivia { border: var(--border); }

#trivia {
	--header-fontsize: max(1rem, min(3rem, calc(.1 * var(--content-width))));
	flex: 1;
	min-width: min(22rem,95vw); max-width: 40rem;
	border-radius: var(--border-radius);
	background: var(--pink-5);
	padding: .5rem;
}

/* inner container */
#trivia > div { width: 100%; display: flex; flex-direction: column; }

/* facts area */
#trivia > div > .main {
	border: var(--border);
	border-color: var(--pink-7);
	padding-top: var(--header-fontsize);
	margin-top: calc(var(--header-fontsize)*-1);
	margin-bottom: -3rem;
	border-top: none; border-bottom: none;
	background: var(--blue-9);
	
	/* individual fact */
	p {
		width: 100%;
		padding: .5em; margin: 0;
		border-bottom: var(--border);
		border-color: var(--pink-7);
		text-align: center;
		/* no bottom divider on last item */
		&:last-child { border-bottom: none; }
		&:nth-child(2n) { background-color: var(--blue-10); }
		&:last-child {
			padding-bottom: 3.5rem;
		}
	}
}

/* header/footer positioning */
#trivia > div > header, #trivia > div > footer {
	position: relative;
	z-index: 1;
	width: 100%;
	/* curved edge images */
	&:before {
		content: '';
		position: absolute;
		width: 100.1%; height: 100%;
		background-size: 100% 100%;
		z-index: -1;
	}
}
/* curved edge images */
#trivia > div > header:before { background-image: url('images/trivia_header.svg'); }
#trivia > div > footer:before { background-image: url('images/trivia_footer.svg'); }

/* header */
#trivia > div > header {
	padding-bottom: 1rem;
	margin-bottom: -.5rem;
	.bg { bottom: 0; }
	h3 {
		font-family: 'Mabook', 'Comic Sans MS', 'Comic Sans', sans-serif;
		letter-spacing: .04em;
		width: 100%;
		padding: 0 .2em;
		font-size: var(--header-fontsize);
		color: var(--brown-1);
		--text-shadow-color: var(--pink-7);
	}
	.deco { position: absolute; right: 0; top: 0; height: 2.5rem; }
}

/* footer */
#trivia > div > footer { padding-top: .5rem; margin-top: -.5rem; margin-bottom: .5rem; }
#trivia > div > footer .bg { top: 0; }
#trivia > div > footer .deco { margin-top: 1rem; margin-bottom: -1rem; height: 3rem;  }
#trivia-lobster { position: absolute; width: min(60%,13rem); top: 0; right: -3rem; }

/************************** MAIN TEXT **************************/
#basic-info > .main {
	flex: 3;
	min-width: min(17em,100%);
	max-width: 50rem;
	display: flex; flex-wrap: wrap; gap: 1em;
	justify-content: center;
}

/************************** PHOTO **************************/
#basic-info > .main { margin-bottom: 2.5rem; }
#basic-info > .main > p { flex: 2; min-width: min(16em,100%); }
#basic-info > .main div:has(.polaroid) {
	flex: 1;
	width: 250px; min-width: min(300px,90%);
	flex-grow: 0;
	rotate: 2deg;
}
#basic-info .polaroid .top-left {
	position: absolute;
	top: 3%; left: -8%;
	width: 30%;
	rotate: -25deg;
	filter: drop-shadow(0 5px 0 var(--blue-9));
}

/************************************************************************/
/************************** SPECIES SECTION **************************/
/************************************************************************/

#species {
	width: 100%; display: flex;
	flex-direction: column;
	background: var(--blue-9);
	z-index: 1;
}
#species > header {
	z-index: 1;
	position: relative; width: 100%;
	padding: 0 var(--section-padding-h);
	text-align: right;
	
	/* top curve border */
	.bg-wrapper { left: 0; position: absolute; width: 100%; z-index: -1; }
	
	.bg {
		position: absolute;
		top: 0; left: 0;
		transform: translateY(-100%);
		height: auto; width: 100%;
	}
	
	h2 {
		margin-left: auto;
		max-width: 60%;
		line-height: 1;
	}
}
#species > p {
	max-width: 70%; 
	padding: 0 var(--section-padding-h);
	font-size: max(1rem, min(1.75rem,3.5vw));
	text-align: right;
	margin: .25em 0 0 auto;
}

/************************** BUTTONS **************************/
#species-selection {
	display: flex;
	justify-content: center; align-items: start;
	
	padding: 0;
	/* account for next section's header */
	padding-bottom: calc(.22 * var(--content-width));
	
	> .button-wrapper {
		margin: 1.75%;
		--r-abs: min(var(--r), calc(var(--r)*-1));
		padding-top: calc((var(--n) - 1 + (var(--r-abs) * .02)) * 2%);
		rotate: calc(var(--r) * 1deg);
		flex-shrink: 1;
	}
	img { max-width: 100%; }
}

@media screen and (width >= 900px) {
	#species-selection > .button-wrapper { margin-bottom: 0; }
	
	#species-selection > :nth-child(1) { --n: 1; --r: 10; }
	#species-selection > :nth-child(2) { --n: 2; --r: 0; }
	#species-selection > :nth-child(3) { --n: 3; --r: 8; }
	#species-selection > :nth-child(4) { --n: 3.5; --r: -2; }
	#species-selection > :nth-child(5) { --n: 2.5; --r: -8; }
	#species-selection > :nth-child(6) { --n: 1.5; --r: -4; }
}
@media screen and (width < 900px) {
	#species-selection { flex-wrap: wrap; }
	#species-selection > .button-wrapper { max-width: max(125px, min(200px,35%)); }
}

/************************** SPECIES DETAILS **************************/
#species-details {
	--icon-width: min(45%, max(27%,15rem));
	width: 100%;
	background: var(--blue-10);
	z-index: 2;
	
	/* left/right padding */
	header, .main {
		padding: 0 var(--section-padding-h);
	}
	
	/* account for next section's header */
	padding-bottom: calc(.05 * var(--content-width));
	
	header {
		display: flex;
		align-items: start;
		bottom: calc(100% + (.02 * var(--content-width)));
	}

	/* header icon */
	.icon {
		z-index: 1;
		margin-bottom: calc(-.3 * var(--icon-width));
		width: var(--icon-width);
		border-radius: 100%; border: var(--border);
	}
	
	/* header names */
	.names {
		z-index: 0;
		margin: 4% 0 1rem max(-4em,-8vw);
		padding: min(.8em,2vw) min(3em,6vw) min(.8em,2vw) min(5em,10vw);
		border-radius: 0 var(--border-radius) var(--border-radius) 0;
		border: var(--border);
		background: var(--pink-5);
		color: var(--pink-8);
		text-shadow: 2px 2px var(--pink-6);
		font-family: 'Mabook', 'Comic Sans MS', 'Comic Sans', sans-serif;
	}
	.common-name {
		font-size: max(1rem, .045 * var(--content-width));
		line-height: 1em;
		letter-spacing: 0.05em;
	}
	.scientific-name { font-size: max(1rem, min(2rem, 4vw)); line-height: 1em; margin-bottom: .33em; }
	
	/* main area */
	.main {
		display: flex; flex-wrap: wrap; gap: 1rem;
		margin-left: calc(var(--icon-width) - 1em);
		padding-bottom: 2rem;
		
		.info {
			flex: 1; min-width: min(100%,15rem);
			p:first-child { margin-top: 0; }
		}
		
		/* polaroid image */
		.wrapper:has(> .polaroid) {
			min-width: min(50%, 300px); max-width: 300px;
		}
	}
}

#videos {
	background: var(--blue-11);
	padding: 0 var(--section-padding-h);
	padding-top: 1rem;
	padding-bottom: 10rem;
	width: 100%;
	z-index: 3;
	
	.videos {
		display: flex; gap: 1rem;
		overflow-x: scroll;
		padding: 1rem 0 1.5rem 0;
		
		.video {
			width: max( min( calc(100vw - (var(--section-padding-h) * 2)), 300px ), 33% );
		}
	}
}

.wave-section {
	position: relative;
	
	&:before {
		content: '';
		position: absolute;
		width: 100%;
		z-index: -1;
		--height: calc(.15 * var(--content-width));
		height: var(--height);
		top: calc((-1 * var(--height)) + 2px); left: 0;
		background-size: auto 100%;
		background-position: bottom;
		background-repeat: no-repeat;
		pointer-events: none;
	}
	
	header {
		position: absolute;
		bottom: 100%;
		margin-top: calc(-1 * var(--size));
		--size: max( 1rem, min( 11vw, max(1rem, calc(.06 * var(--content-width))) ) );
		
		h2 {
			display: inline-block;
			margin-top: calc( -.5 * var(--size) );
			font-size: var(--size);
			font-weight: normal;
			font-family: 'Mabook', 'Comic Sans MS', 'Comic Sans', sans-serif;
		}
	}
}
#species:before { background-image: url('images/species_header.svg'); }
#species-details:before { background-image: url('images/species_details_header.svg'); }
#videos:before { background-image: url('images/videos_header.svg'); }