/* biome-ignore-all lint/style/format */
/* stylelint-disable */
/* eslint-disable */
/* prettier-ignore-start */

/*
Note:

This file is copied from /css/new.css on the old AquariumKids.
I'm choosing to leave it mostly as-is (e.g., no linting or refactoring) to preserve the record of my time growing up and learning web development.

Any new additions (2026–onward) are appended to the bottom of the file.

With love,
Evan (in 2026)
*/

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
    box-sizing: border-box;
    color:#323232;
}

body {
	padding:0px;
	width:100%;
	display:inline-block;
	margin:0px;
	/* background-color:#FFF; */
	background-color:#FFF;
    color:#323232;
    text-align:center;
    /* fixed menu update below — May 2018 */
    padding-top:100px;

    -webkit-transition: padding-top 0.1s; /* Safari */
    transition: padding-top 0.1s;
}

p, body, p > ul > li, p > ul {
	font-family: "Source Sans Pro",helvetica,Arial,sans-serif !important;
    color:#323232;
    font-size:1.1em;
    line-height:1.75em;
}

h1 {
	font-family: "Lora",helvetica,Arial,sans-serif !important;
	margin-top:35px;
	margin-bottom:35px;
	line-height:1.25em;
}

h2:not(.plain-h2):not(.bookmark-h2):nth-of-type(2n):before {
	content: "🐟 ";
}
h2:not(.plain-h2):not(.bookmark-h2):nth-of-type(2n+1):before {
	content: "🐠 ";
}

hr {
	border:0;
	height:0;
	border-bottom:2px solid #E3E3E3;
	clear:both;
}

.content {
	display:inline-block;
	width:80%;
	max-width:960px;
}
.mobile-only {
	display:none;
}
.mobile-hidden {
	display:inline-block;
}

#top {
	background-color:#FFF;
	width:100%;
	display:inline-block;
	min-height:100px;
	margin:0px;
	text-align:center;
	box-sizing: border-box;
	height:100px;
	line-height:100px;
	/* fixed menu update below — May 2018 */
    display: block;
    top: 0px;
    position: fixed;
    z-index: 9979;
    max-height: 50px ;
    height: 50px ;
    min-height: 50px ;
    line-height: 50px ;
    font-size: 25px ;
}
/* menu — May 2018 */
#menu {
	background-color:#FFF;
	margin:0px;
	text-align:center;
	box-sizing: border-box;
	padding-left:20px;
	padding-right:20px;
	/* fixed menu update below — May 2018 */
    display: block;
    visibility:visible;
    top: 50px;
    position: fixed;
    z-index: 9979;
    max-height: 50px ;
    height: 50px ;
    min-height: 50px ;
    line-height: 50px ;
    font-size: 8px ;
    border-style: solid;
    border-top-style:hidden;
    border-left-style:hidden;
    border-right-style:hidden;
    border-color: #e9ebee;
    border-width: 2px;
    width:100%;
}
#menu-button {
	color:#0b3862;
	position: fixed;
	left: 50px;
	top: 12.5px;
	font-size: 25px;
	-ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Safari 3-8 */
    transform: rotate(0deg);
    -webkit-transition: transform 0.1s; /* Safari */
    transition: transform 0.1s;
    -webkit-transition: left 0.1s; /* Safari */
    transition: left 0.1s;
}
#menu-button:hover{
	cursor:pointer;
/*
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: transform 0.1s;
    transition: transform 0.1s;
 */
}

.menu-item {
	display:inline-block;
	color: #323232;
	font-size:1.8em;
}
.spacing {
	display:inline-block;
	color: #323232;
	font-size:15px;
}
.spacing:after {
	content:"\00a0\00a0\00a0•\00a0\00a0\00a0";
	color: #323232;
	font-size:15px;
}
/* end menu — May 2018 */
/* footer menu — June 2018 */
.footer-menu-item {
	color: white;
	font-size:0.8em;
}
.footer-menu-spacing, .footer-menu-spacing:after {
	color: white;
	font-size:10px;
}
/* end footer menu — June 2018 */
#name {
	display:inline-block;
	/* float:left; */
	color:#323232;
	line-height:100px;
	vertical-align:middle;
	font-family: "Lora",helvetica,Arial,sans-serif !important;
	font-size:25px;
	font-weight:bold;
	box-sizing: border-box;
	margin:0px;
	/* fixed menu update below — May 2018 */
	max-height: 50px ;
    height: 50px ;
    min-height: 50px ;
    line-height: 45px ; /* off to adjust for font line space vertical center */
}

#middle {
	color:#FFF;
	width:100%;
	min-height:300px;
	height:300px;
	margin:0px;
	text-align:center;
	background-color:#197DC8;
 	background: linear-gradient( rgba(11, 56, 98, 0.7), rgba(11, 56, 98, 0.7)), url('http://aquariumkids.com/images/duveneck_education_medium.png');
  /* http://aquariumkids.com/images/caramel-with-straw-for-no-straw-november-crop-medium.jpeg */
  /* http://aquariumkids.com/images/enchanted_garden_by_shay_fertig_cc_attr_sa_3_0.jpg */
	box-sizing: border-box;
 	background-size: cover;
	background-position: center;
	display: table;
	table-layout: fixed;
}

#tagline {
	display: table-cell;
	height:300px;
	vertical-align:middle;
	text-align:center;
	font-size:3em;
	line-height:1.3em;
	width:100%;
	padding-left:10%;
	padding-right:10%;
	font-family: "Archivo Narrow",helvetica,Arial,sans-serif !important;
	text-transform: uppercase;
	font-weight:bold;
	color:#FFF;
	table-layout: fixed;
}
#scroll-to-content {
	background-color:#206A9A;
	box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.2);
	display:inline-block;
	text-align:center;
	font-size:1.25em;
	line-height:1.5em;
	padding:0.5em;
	border-radius:10px;
	max-width:500px;
	width:80%;
	font-family: "Lora",helvetica,Arial,sans-serif !important;
	color:#FFF;
	text-decoration:none;
	margin-top:35px;
}
#scroll-to-content:hover {
	text-decoration:underline;
	cursor:s-resize;
}
.product-container {
	position: relative;
	width:100%;
	display:inline-block;
	margin:0px;
	margin-bottom:0px;
	padding:0px;
	padding-bottom:0px;
	text-align:center;
	box-sizing: border-box;
	border-width:0px;
}
.product {
	border-style:solid;
	border-width:3px;
	border-color:white;
	background-color:white;
	color:#323232;
	padding:25px;
	font-size:25px;
	display:inline-block;
	box-sizing: border-box;
 	text-align:center;
    width:85%;
   	max-width:650px;
	margin-left:0px;
	margin-right:0px;
	margin-bottom:30px;
	height:auto;
}
.product-name {
	display:inline-block;
	margin-bottom:10px;
}
.product-description {
	display:block;
	margin-top:15px;
	color:white;
	font-size:15px;
	text-align:left;
	color:#323232;
}
#footer {
	background-color:#0b3862;
	color:#FFF;
	width:100%;
	min-width:100%;
	display:inline-block;
	min-height:200px;
	height:200px;
	max-height:200px;
	margin:0px;
	padding:0px;
	padding-top:0px;
	margin-top:0px;
	border-width:0px;
	text-align:center;
	box-sizing: border-box;
	line-height:200px;
	vertical-align:middle;
}
#copyright {
	display:inline-block;
	margin-top:0px;
	font-size:1.5em;
	line-height:1.75em;
	vertical-align:middle;
	box-sizing: border-box;
	font-family: "Lora",helvetica,Arial,sans-serif !important;
	text-align:center;
	color:#FFF;
}
#copyright > * {
	color:#FFF;
}
.scroll-to-top {
	display:inline;
	font-size:1em;
	font-family: "Lora",helvetica,Arial,sans-serif !important;
	color:#197DC8;
	text-decoration:none;
	position:absolute;
	left:0px;
	margin-top:10px;
	margin-left:10px;
}
.scroll-to-top:hover {
	text-decoration:underline;
	cursor:n-resize;
}
.scroll-down {
	font-size:1em;
	font-family: "Lora",helvetica,Arial,sans-serif !important;
	color:#197DC8;
	text-decoration:none;
	position:absolute;
	left:10px;
	bottom:10px;
	float:left;
}
.scroll-down:hover {
	text-decoration:underline;
	cursor:s-resize;
}


#scroll-to-top-footer, .footer-link {
	display:inline-block;
	text-align:center;
	font-size:0.75em;
	max-width:500px;
	font-family: "Lora",helvetica,Arial,sans-serif !important;
	color:#FFF;
	text-decoration:none;
}
.footer-link:hover {
	text-decoration:underline;
}
#scroll-to-top-footer:hover {
	text-decoration:underline;
	cursor:n-resize;
}



	.article {
		border-style:solid; border-width:2px; border-color: #197DC8;
		display:inline-block;
		font-family: "Lora",helvetica,Arial,sans-serif !important;
		padding:20px;
		text-align:left;
		display: table-cell;
    	vertical-align: top;
    	font-size:0.5em;
    	line-height:1.5em;
    	color:#323232;
	}
	.read-more {
		text-decoration:underline;
		color:#323232;
		font-family: "Lora",helvetica,Arial,sans-serif !important;
		display:inline-block;
	}
	#view-all-articles {
		border-style:solid; border-width:2px; border-color: #197DC8;
		margin-top:0.5em;
		padding:0.2em;
		font-family: "Lora",helvetica,Arial,sans-serif !important;
		padding:20px;
		display:inline-block;
	}
	#view-all-articles:hover {
		text-decoration:underline;
		cursor:pointer;
	}



	@media only screen and (max-width:960px) {

	#tagline {
		font-size:3em;

	}

	.article {
		width:96%;
		display:inline-block;
		margin-bottom:10px;
	}
	#view-all-articles {
		width:96%;
		display:inline-block;
		margin-top:5px;
	}
	#copyright {
		font-size:1.25em;
		line-height:1.5em
	}
	.mobile-only {
		display:inline-block
	}
	.mobile-hidden {
		display:none;
	}
}
@media only screen and (max-width:610px) {
	#name {
		clear:both;
		float:none;
		margin:0px;
		padding:0px;
	}
	#tagline {
		font-size:1.8em;
	}

	#scroll-to-content {
		margin-top:40px;
	}
	.scroll-to-top {
		float:none;
		margin-left:0px;
		text-align:center;
		width:100%;
		left:0px;
		margin-bottom:20px;
		padding:0px;
	}
	#product-resurface, .scroll-down {
		display:none
	}
	#menu-button {
		left: 25px;
	    -webkit-transition: left 0.1s; /* Safari */
   	 	transition: left 0.1s;
	}
}
@media only screen and (max-height:610px) {
	#product-resurface, .scroll-down {
		display:none;
	}
}
@media only screen and (max-width:400px) {
	#tagline {
		font-size:1.75em;
	}

	#scroll-to-content {
		font-size:1em;
	}
}

.print-only {
	display:none;
}

@media print {
	@page {
		size: portrait;
		margin: 0.75in 1in 0.75in 1in;
		/* top, right, bottom, left */
	}
	@page:first {
		margin: 0.3in 1in 0.75in 1in;
	}
    div {
        float: none !important;
    }
	.hidden-on-print {
		display:none;
		visibility: hidden;
	}
	.print-only {
		display:inline-block;
	}
	#top {
		min-height:0px;
		height:auto;
		padding:0px;
	}
	#name {
		line-height:normal;
		margin:0px;
		height:auto;
	}
	#tagline, #scroll-to-content, #middle, #scroll-to-top-footer, #footer, #comments {
		display:none;
	}
	.content {
		width:100%;
	}
	#mc-embedded-subscribe-form, #mc_embed_signup {
		display:none;
	}
	#menu, #menu-button {
		display:none;
	}
	#top-of-page, body {
		padding-top:0px;
	}
	#top {
		margin-top:0.75in;
		position:static;
	}
	.ad {
		display:none;
	}
}

	.inline-image-holder {
		background-color:#B7C4C4; float: right; margin:20px; margin-right:0px; padding:20px; display:inline-block;
	}
	.inline-image-holder2 {
		background-color:#B7C4C4; margin:20px; padding:20px; display:inline-block;
	}


/* 	APRIL 6TH 2017 UPDATE BELOW: */

	.product-container {
		box-sizing: border-box;
		height:auto;
		background-color:#197dc8;
		color:#323232;
	}

	h2, .product {
		color:inherit;
	}
	.product a, a .product {
		color:#323232;
	}
	b {
		color:inherit;
	}
	#middle {
		height:100%;
		min-height:800px;
		position: fixed;
		top:0px;
		z-index: -1;
	}
	.separator {
		display:inline-block;
		color:#323232;
		line-height:100px;
		min-height:100px;
		height:100px;
		vertical-align:middle;
		font-family: "Lora",helvetica,Arial,sans-serif !important;
		font-size:1.5em;
		font-weight:normal;
		box-sizing: border-box;
		margin:0px;
/*
		background-color:rgba(255,255,255,0.5);
 */
		color:white;
		width:100%;
	}
	#tagline {
		width:100%;
		height:250px;
		max-height:250px;
		column-width:10000000000px;
	}

/* 	JULY 4TH 2017 UPDATE BELOW: */

.showcase div, .showcase, .upper-image, .lower-image {
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
.showcase a:hover {
	cursor:pointer;
	text-decoration:underline;
}
.upper-image {
	position:relative;
	display:inline-block;
	border-color:white;
	border-style:solid;
	border-width:5px;
	float:left;
	background-color:#0b3862;
	min-height:300px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.half-upper-image {
	width:50%;
}
.single-product-container {
	width:33.33%; width: calc(100% / 3);
}
.upper-image-title {
	color:#0b3862;
	padding:5px;
	background-color: rgba(255, 255, 255, 0.8);
	position: absolute;
	bottom: 5px;
	left:5px;
}
.lower-image {
	text-align:left;
	position:relative;
	display:inline-block;
	border-color:white;
	border-style:solid;
	border-width:5px;
	float:left;
	background-color:#0b3862;
	min-height:200px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.fourth-lower-image {
	width:25%;
}
.fifth-lower-image {
	width:20%;
}
.lower-image-title {
	max-width:100%;
	width:100%;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	color:#0b3862;
	padding:5px;
	background-color: rgba(255, 255, 255, 0.8);
	position: absolute;
	bottom: 0px;
	font-size:12px;
}
.stylized-link, .external-link, .internal-link, .link-link, .picture-link, .video-link, .pdf-link, .definition-link, .news-link, .group-link, .person-link, .stop-link, .ban-link, .map-link, .glass-link, .dollar-link {
	padding-left:3px;
	padding-right:3px;
}
.stylized-link, .external-link, .internal-link, .link-link{
	background-color:#d1e3f3;
}
.definition-link {
	/* background-color:#CEF3E4; */
	background-color:#d1e3f3;
}
.picture-link, .video-link, .pdf-link, .news-link {
	/* background-color:#D4D4F4; */
	background-color:#d1e3f3;
}
.picture-link, .video-link {
	text-decoration:none;
}
.picture-link:before {
	font-family: FontAwesome;
	content:'\f030\00a0';
}
.video-link:before {
	font-family: FontAwesome;
	content:'\f03d\00a0';
}
.external-link:before, .internal-link:before, .link-link:before {
	font-family: FontAwesome;
	content:'\f0c1\00a0';
}
.pdf-link:before {
	font-family: FontAwesome;
	content:'\f1c1\00a0';
}
.definition-link:before {
	font-family: FontAwesome;
	content:'\f059\00a0';
}
.news-link:before {
	font-family: FontAwesome;
	content:'\f1ea\00a0';
}
.people-link:before, .group-link:before {
	font-family: FontAwesome;
	content:'\f0c0\00a0';
}
.stop-link:before, .ban-link:before {
  font-family: FontAwesome;
	content:'\f05e\00a0';
}
.map-link:before {
  font-family: FontAwesome;
	content:'\f279\00a0';
}
.glass-link:before {
  font-family: FontAwesome;
	content:'\f000\00a0';
}
.dollar-link:before {
  font-family: FontAwesome;
	content:'\f155\00a0';
}
.stylized-link:hover, .external-link:hover, .internal-link:hover, .link-link:hover, .picture-link:hover, .video-link:hover, .pdf-link:hover, .definition-link:hover, .news-link:hover, .group-link:hover, .person-link:hover, .stop-link:hover, .ban-link:hover, .map-link:hover, .glass-link:hover, .dollar-link:hover  {
	cursor:pointer;
}
.definition {
	background-color:white;
	padding:25px;
	color:#323232;
}
.definition a {
	background-color:white;
}
.pullquote, .pull-quote {
	font-style:italic;
	font-size:1.5em;
}
.pullquote:before, .pull-quote:before {
	font-family: FontAwesome;
	content:'\f10d\00a0';
}
.pullquote:after, .pull-quote:after {
	font-family: FontAwesome;
	content:'\00a0\f10e';
}
.blockquote, .block-quote {
	margin-left:1.5em;

}
.loremipsum:after, .lorem-ipsum:after {
	content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
}
.inprogress, .in-progress, .pink-highlight, .red-highlight {
	background-color:#f4cccc;
}
.inprogress:after, .in-progress:after {
	content:"\00a0[...]";
}
.share-button-container {
	display:inline-block;
}
.share-button-container > * {
	 vertical-align: top !important;
}
.fb_iframe_widget span {
  vertical-align: top !important;
}
.share-buttons-row {
 margin-top:1em;
}
.breakable-text, .splittable-text, .breakable-link {
	display: inline-block;
	word-break: break-all;
	max-width:100%;
	overflow-wrap: break-word;
  	word-wrap: break-word;
}
.works-cited, .workscited {
	page-break-before: always;
	break-before: always;
}
.mc-modal {
	display:none;
}
h2.bookmark-h2 {
	display:table;
}
h2.bookmark-h2:before {
	font-family: FontAwesome;
	content: "\f097\00a0";
}
h2.bookmark-h2:hover:before {
	font-family: FontAwesome;
	content: "\f02e\00a0";
}
h2.bookmark-h2 > a, h2.bookmark-h2 > span {
  position: relative;
  color: #323232;
}
h2.bookmark-h2 > a:hover, h2.bookmark-h2 > span:hover {
  color: #323232;
  cursor:pointer;
}
h3.bookmark-h3 {
	display:table;
}
h3.bookmark-h3 > a, h3.bookmark-h3 > span {
  position: relative;
  color: #323232;
}
h3.bookmark-h3 > a:hover, h3.bookmark-h3 > span:hover {
  color: #323232;
  cursor:pointer;
}
.link-select {
	background-color:white;
	padding:1em;
	vertical-align: middle;
}
.link-select > input {
	resize: none;
	max-width:100%;
	min-width:350px;
	text-align:center;
	vertical-align: middle;
	height:30px;
	font-size:1em;
	display:table-cell;
	width:100%
}

/* 	MAY 24TH 2018 UPDATE BELOW: */
#footer-social-media-row > a, #footer-social-media-row > a > i {
	color:white;
}

/* 	END MAY 24TH 2018 UPDATE */

.firstLetter{
	font-family: "Alegreya",helvetica,Arial,sans-serif !important;
	float       : left;
	font-size   : 3.4em;
	line-height : 0.5;
	margin      : 0.3em 0.05em 0 0;
}

.firstLetter + span {
  margin-left : -0.5em;
}

/* 	FRESHWATER ECOLOGY UPDATE BELOW: */
	.topic-list, .resource-list {
		display: inline-block;
		padding: 0px;
		margin:0px;
		margin-bottom:1em;
		width: 100%;
	}
	.topic-name, .resource {
		background-color: #e3e3e3;
    	display: inline-block;
    	padding: 10px;
   		width: 100%;
   		margin-top:1px;
   		margin-left:0px;
	}
	.unit-name, .video-lecture-title, .topic-list-title {
		background-color: #4186c3;
    	display: inline-block;
    	padding: 10px;
   		width: 100%;
   		margin-top:1px;
   		color:white;
   		margin-bottom:0px;
	}
	.line-spacing {
	    height: 1em;
	    max-height: 1em;
   	 	min-height: 1em;
   	 	line-height: 1em;
    	display: block;
	}
	.video-wrapper {
	  	position: relative;
  		width: 100%;
  		height: 0;
  		padding-bottom: 56.25%;
	}
	.video {
		position: absolute; width: 100%; height: 100%; left: 0; top: 0;
	}
	#click-for-answers:hover {
		cursor:pointer;
	}
	#answers {
		display:none;
	}
	.upcoming-topic-name {
		color: #c3c3c3;
    	font-style: italic;
    	cursor: not-allowed;
	}
	.upcoming-topic-name:after {
		content: " (coming soon)";
	}
/* 	END FRESHWATER ECOLOGY UPDATE */

/* 	TAGLINE/MIDDLE LINK UPDATE (8/27/18) BELOW: */

.tagline-link, .middle-link {
	color:white;
}

/* 	END TAGLINE/MIDDLE LINK UPDATE */

.big-subheading-link:hover, .big-subheading-title:hover {
	cursor:pointer !important;
}


@media only screen and (max-width:960px) {
	.single-product-container {
		width:100%;
	}
	.lower-image {
		min-height:300px;
	}
	.fourth-lower-image {
		width:100%;
	}
	.fifth-lower-image {
		width:100%;
	}
}
@media only screen and (max-width:610px) {
	.showcase {
		width:100%;
		border-style:none;
	}
	.link-select > input {
		min-width:0px;
		min-width:250px;
	}
	.link-select {
		width:100%;
	}
}

/* The CSS below is from 2026–present */
#footer {
    height: auto;
    max-height: none;
    padding: 1em;
}

.website-version {
    color: inherit;
    font-size: 0.8em;
}

#middle {
    background: linear-gradient( rgba(11, 56, 98, 0.7), rgba(11, 56, 98, 0.7)), url('/images/duveneck_education_medium.png');
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    min-height: inherit;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    z-index: auto; /* needed otherwise buttons underneath weren't clickable */
}

.share-buttons-row {
    display: inline-flex;
    flex-wrap: wrap; /* allow it to wrap when not enough space */
    gap: 8px;
    max-width: 100%;
    font-size: 14px;
    line-height: 18px;
}

.share-button-container a {
    text-decoration: none;
    transition: background-image 0.2s ease;
}

.share-button-container a:hover {
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
}

.single-product-container {
    flex: 1 1 calc(33.333% - (16px * 2 / 3)); /* prevent overflow now that we have 16px gap */
    min-width: 150px;
    width: auto;
}

/* Allow darkening of special links */
.stylized-link, .external-link, .internal-link, .link-link, .definition-link, .picture-link, .video-link, .pdf-link, .news-link {
    transition: background-image 0.2s ease;
}

.stylized-link:hover, .external-link:hover, .internal-link:hover, .link-link:hover, .definition-link:hover, .picture-link:hover, .video-link:hover, .pdf-link:hover, .news-link:hover {
    background-image: linear-gradient(rgba(0, 0, 120, 0.1), rgba(0, 0, 120, 0.1));
}

/* prettier-ignore-end */