/*general style*/
body {
	background: #000000;
}
#left {
	position: absolute;
	left: 0;
}
#right {
	position: absolute;
	right: 0;
}
img {
	max-width: calc(100vw - 1em); /*viewport width minus sum of horizontal margins and borders*/
	max-height: 45vh;
	width: auto;
	height: auto;
	display: none;
	margin: 0.25em;
	padding: 0;
}
#imgflood {
	border: 0.25em solid #aa2222;
}
#imgnormal {
	border: 0.25em solid #aa2222;
}
button {
	padding: 0.5em;
	width: 13vh;
}

/*svg style*/
svg {
	background: #000000;
	border: 10px solid black;
	height: 90vh;
	display: block;
}
path {
	stroke-width: 3px;
	stroke: #eeeedd;
	fill: none;
}
text {
	font: bold 20px sans-serif;
	fill: #eeeedd;
}
circle {
	opacity: 0; /*visibility:hidden and display:none don't allow clicking element*/
}
#border {
	stroke-width: 5px;
	stroke: #eeeedd;
	fill: #aacc66;
	stroke-dasharray: 6;
}
#creekedge {
	stroke-width: 21px;
	stroke: #66aa88;
}
#creeklight {
	stroke-width: 18px;
	stroke: #88cccc;
}
#creekinner {
	stroke-width: 15px;
	stroke: #66aa88;
}
.pointstar {
	fill: #002255;
	stroke-width: 2;
	stroke: #002255;
	animation: 0s fadein forwards; /*same parameters for all*/
	visibility: hidden; /*default for animation to work*/
}

/*animations for path drawing and photo location star pop-in*/
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes fadein {
  99% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}
/*animation timer variables*/
:root {
	--sync0: 0s;
	--sync1: 1.7s;
	--sync2: 3.7s;
	--sync3: 5s;
	--sync4: 6.7s;
	--sync5: 7.2s;
	--sync6: 9.3s;
	--stargap: 0.2s;
}

/*path animation parameters*/
#creekedge, #creeklight, #creekinner {
	stroke-dasharray: 1157;
	stroke-dashoffset: 1157;
	animation: dash calc(var(--sync6) - var(--sync0)) linear forwards;
	animation-delay: var(--sync0);
}
#path1a {
	stroke-dasharray: 414;
	stroke-dashoffset: 414;
	animation: dash calc(var(--sync1) - var(--sync0)) linear forwards;
	animation-delay: var(--sync0);
}
#path1b {
	stroke-dasharray: 247;
	stroke-dashoffset: 247;
	animation: dash calc(var(--sync1) - var(--sync0)) linear forwards;
	animation-delay: var(--sync0);
}
#path1c {
	stroke-dasharray: 263;
	stroke-dashoffset: 263;
	animation: dash calc(var(--sync1) - var(--sync0)) linear forwards;
	animation-delay: var(--sync0);
}
#path2a {
	stroke-dasharray: 230;
	stroke-dashoffset: 230;
	animation: dash calc(var(--sync3) - var(--sync1)) linear forwards;
	animation-delay: var(--sync1);
}
#path2b {
	stroke-dasharray: 331;
	stroke-dashoffset: 331;
	animation: dash calc(var(--sync2) - var(--sync1)) linear forwards;
	animation-delay: var(--sync1);
}
#path2c {
	stroke-dasharray: 184;
	stroke-dashoffset: 184;
	animation: dash calc(var(--sync3) - var(--sync1)) linear forwards;
	animation-delay: var(--sync1);
}
#path2d {
	stroke-dasharray: 359;
	stroke-dashoffset: 359;
	animation: dash calc(var(--sync4) - var(--sync1)) linear forwards;
	animation-delay: var(--sync1);
}
#path3a {
	stroke-dasharray: 80;
	stroke-dashoffset: 80;
	animation: dash calc(var(--sync3) - var(--sync2)) linear forwards;
	animation-delay: var(--sync2);
}
#path3b {
	stroke-dasharray: 485;
	stroke-dashoffset: 485;
	animation: dash calc(var(--sync4) - var(--sync2)) linear forwards;
	animation-delay: var(--sync2);
}
#path3c {
	stroke-dasharray: 236;
	stroke-dashoffset: 236;
	animation: dash calc(var(--sync4) - var(--sync3)) linear forwards;
	animation-delay: var(--sync3);
}
#path3d {
	stroke-dasharray: 189;
	stroke-dashoffset: 189;
	animation: dash calc(var(--sync4) - var(--sync3)) linear forwards;
	animation-delay: var(--sync3);
}
#path3e {
	stroke-dasharray: 230;
	stroke-dashoffset: 230;
	animation: dash calc(var(--sync4) - var(--sync3)) linear forwards;
	animation-delay: var(--sync3);
}
#path4a {
	stroke-dasharray: 79;
	stroke-dashoffset: 79;
	animation: dash calc(var(--sync5) - var(--sync4)) linear forwards;
	animation-delay: var(--sync4);
}
#path4b {
	stroke-dasharray: 271;
	stroke-dashoffset: 271;
	animation: dash calc(var(--sync6) - var(--sync4)) linear forwards;
	animation-delay: var(--sync4);
}
#path5a {
	stroke-dasharray: 211;
	stroke-dashoffset: 211;
	animation: dash calc(var(--sync6) - var(--sync5)) linear forwards;
	animation-delay: var(--sync5);
}
#path5b {
	stroke-dasharray: 707;
	stroke-dashoffset: 707;
	animation: dash calc(var(--sync6) - var(--sync5)) linear forwards;
	animation-delay: var(--sync5);
}

/*photo location star pop-in parameters*/
#star0 {
	animation-delay: calc(var(--sync6) + (1 * var(--stargap)));
}
#star1 {
	animation-delay: calc(var(--sync6) + (2 * var(--stargap)));
}
#star2 {
	animation-delay: calc(var(--sync6) + (3 * var(--stargap)));
}
#star3 {
	animation-delay: calc(var(--sync6) + (4 * var(--stargap)));
}
#star4 {
	animation-delay: calc(var(--sync6) + (5 * var(--stargap)));
}
#star5 {
	animation-delay: calc(var(--sync6) + (6 * var(--stargap)));
}
#star6 {
	animation-delay: calc(var(--sync6) + (6 * var(--stargap)));
}
#star7 {
	animation-delay: calc(var(--sync6) + (7 * var(--stargap)));
}
#star8 {
	animation-delay: calc(var(--sync6) + (8 * var(--stargap)));
}
#star9 {
	animation-delay: calc(var(--sync6) + (9 * var(--stargap)));
}