#wavy-bay-map,
#wavy-bay-holder,
#oyster-close-up-holder,
.ending-box {
	user-select: none;
}

.green-box {
	left: 9%;
	top: 64%;
	width: 82%;
	line-height: 1.1em;
}

#page-1.green-box {
	left: 9%;
	top: 2%;
	width: 82%;
	height: 10%;
	line-height: 1.1em;
}

.solid-light-purple-box {
	position: fixed;
	top: 33%;
	width: 76%;
	left: 12%;
}

.anatomy {
	display: none;
	position: absolute;
	color: var(--violet-color);
	font-size: 2em;
	font-weight: bold;
	text-transform: capitalize;
}

#shell-anatomy  { left: 31.6%; top: 23%; }
#cilia-anatomy  { left: 65.6%; top: 24%; }
#mantle-anatomy { left: 70.6%; top: 33%; }
#gills-anatomy  { left: 70.6%; top: 41%; }

#anatomy-arrows {
	display: none;
	position: absolute;
	top: 16.5%;
	left: 10.3%;
	width: 79.8%;
	height: 43.3%;
}

.arrow-line {
	stroke: var(--violet-color);
	stroke-width: 6;
	pointer-events: none;
}

#arrow-head { fill: var(--violet-color); }

#wavy-bay, #city, #ground {
	position: absolute;
	top: 14%;
	left: 9%;
	width:1050px;
	height:346px;
	border: 0.5em solid white;
	border-radius: 0.5em;
}

#button-holder {
	text-align: center;
	width: 100%;	position: absolute;
	top: 62%;
	font-size: 1.5em;
}

#button-holder-2 {
	text-align: center;
	width: 100%;
	position: absolute;
	top: 72%;
	font-size: 1.5em;
}
#planton-holder,
#animal-holder,
#animal-holder-stage-3,
#sediment-holder,
#oyster-close-up-holder {
	position: absolute;
	overflow: hidden;
	width: 1020px;
	height: 415px;
	top: 0;
	left: 0;
}

#rock {
	position: absolute;
	left: 21%;
	top: 82%;
	width: 38%;
}

#oyster-close-up-holder {
	border: 0.25em solid #fff;
	border-radius: 0.5em;
	top: 16.5%;
	left: 10.3%;
}

#oyster-back, #oyster-body, #oyster-front, #oyster-cilia { position: absolute; }

#oyster-back,
#oyster-body {
	width: 44%;
	left: 27.1%;
	top: 2.6%;
	transform: rotate(50deg);
}

#oyster-front {
	width: 44%;
	transform: rotate(76deg);
	transform-origin: 51% 99%;
	left: 10.4%;
	top: -15.7%;
	transition: 1.2s ease-out;
}

.organism.stage-2 {
	position: absolute;
	width: 30%;
	left: 459px;
	top: 187px;
}

.organism.stage-3 {
	position: absolute;
	width: 5%;
	left: 649px;
	top: 317px;
}

#oyster-back.stage-2,
#oyster-body.stage-2,
#oyster-front.stage-2 {
	width: 21%;
	left: 38.1%;
	top: 13.6%;
}

#oyster-reef-small {
	display: none;
	position: absolute;
	width: 155%;
	top: -201.3%;
	left: -16%;
}

#oyster-cilia {
	width: 24.6%;
	left: 48.8%;
	top: 30.2%;
	transform: rotate(50deg);
}

#oyster-cilia.stage-2 {
	width: 11.6%;
	left: 48.3%;
	top: 26.7%;
}

#clean-water-oyster ,
#dirty-water {
	top: -8%;
	width: 155%;
	left: -5%;
	position: absolute;
}

#clean-water-oyster { animation: circularWaves 4s linear infinite; }
#dirty-water { animation: circularWaves 5s linear infinite; }

@keyframes circularWaves {
	from { transform: rotate(0deg) translateX(2%) rotate(0deg); }
	to   { transform: rotate(360deg) translateX(2%) rotate(-360deg); }
}