:root {
	--brown: #663300;
	--l-brown: #b35900;
}

html, body {
  height: 100%;
}
body {
  display: flex;
}

body {
	margin: 0px; /* body goes all the way to edge of page */
	background: var(--dd-purple);
	background-image: linear-gradient(var(--d-purple), var(--dd-purple));
	background-size: 150%;
	background-repeat: repeat;
	color: var(--brown);
	display: flex; flex-flow: row wrap; justify-content: center;
	height: 100%;
}
@media screen and (aspect-ratio < 7/6) { body { height: auto; flex-flow: column no-wrap; } } /* portrait mode */

h1 { font-family: 'Super Comic'; }

/* keyboard navigation/screen reader skip to content button */

.skip-to-content, .skip-to-content:link, .skip-to-content:visited {
	padding: .25em .5em;
	border: 2px var(--brown) solid;
	background: var(--l-brown); color: var(--white);
}

/***********************************************************************/
/* NAVIGATION - PAGE LIST */
nav {
	width: min(max(25%,16em),95vw); height: 100%;
	display: flex; flex-direction: column; flex: 1; min-width: min(18em,95vw);
	position: relative; z-index: 2;
	overflow: auto;
	direction: rtl;
}
nav > * { direction: rtl; }

nav > :is(header, footer) {
	width: 100%; padding-top: 33%; /* 1:3 proportion */
	background-size: 100%;
	background-repeat-x: no-repeat; background-repeat-y: repeat;
}
nav > header { background-image: url('scroll-top.png'); }
nav > footer { background-image: url('scroll-bottom.png'); }

nav > .container {
	position: relative;
	padding-left: 15%;
	width: 85%; flex-grow: 1;
	background-image: url('scroll-mid.png'); background-size: 100%;
	background-repeat-x: no-repeat; background-repeat-y: repeat;
}
nav > .container > .content {
	direction: rtl; /* put scrollbar on left */
	padding: 0px 20% 0px 1em;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; /* padding goes inside */
	height: 100%; overflow: auto; /* scroll if too tall */
}
nav > .container > .content > * { direction: ltr; /* display content normally (needed because of scrollbar hack) */ }
nav .content > header { width: 100%; text-align: center; line-height: 1.1em; }

/* individual page link */
nav .page {
	position: relative;
	padding-bottom: .5em;
	border-bottom: 2px var(--l-brown) dashed;
}
nav :last-child:is(.page) { border-bottom: none; }
nav :is(a, a:link, a:visited, .jump-link) {
	font-family: 'Super Comic';
	color: var(--brown);
}
nav :is(a:hover, .jump-link:hover) { color: var(--l-brown); }

/* nav link page property icons */
nav .page .properties {
	--property-size: 1em; /* size of 1 property icon */
	display: flex; flex-wrap: wrap; gap: .25em;
	justify-content: start; align-content: center;
}
nav .page .property-icon {
	font-family: sans-serif;
	display: flex; justify-content: center; align-content: center;
	height: var(--property-size); width: var(--property-size);
	background: var(--l-brown);
	border-radius: 50%;
	overflow: hidden;
}
nav .page .property-icon img { height: 100%; border-radius: inherit; }

/* NAVIGATION - POINTER */
nav .pointer {
	position: absolute; left: 90%;
	background-image: url('pointer.png'); background-repeat: no-repeat; background-size: 100%;
	width: 37%; padding-top: 25%;
	top: 50%; transform: translate(0,-50%); /* vertically center */
}

/***********************************************************************/
/* MAP AREA */
.map {
	position: relative;
	z-index: 0; /* make sure it is behind nav elements */
	flex: 3;
	padding: 50px 1%;
	height: 90%; min-width:50vw;
	overflow: auto;
	text-align: center;
}

/* individual floating islands */
.map .island {
	display: block;
	position: relative;
	/* bobbing animation */
  animation-name: bob;
  animation-duration: 2s; 
  animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in-out
}
.map .island:nth-child(2) { animation-delay: -.8s; }
.map .island:nth-child(3) { animation-delay: -.5s; }
.map .island:nth-child(4) { animation-delay: -1s; }
.map .island:nth-child(5) { animation-delay: -.3s; }
@keyframes bob {
	0% { transform: translate(0,3px) }
	100% { transform: translate(0,-3px) }
}
.map .island:last-child { margin-bottom: 0px; }
.map .island, .map img { max-width: 100%; max-height: 100%; }
.map .island:is(:hover,:focus,:focus-visible) img { transform: scale(1.05,1.05); }
.map .island:focus-visible { outline: none; }
.map .island:focus-visible img { outline: 5px var(--purple) solid; }

.map .island a { position: absolute; z-index: 2; }

/* landscape mode */
@media screen and (aspect-ratio > 7/8) {
	.map .island { margin-bottom: -20%; }
	#home { width: 40%; left: 50%; }
	#about { width: 55%; left: 0%; margin-bottom: -40%; }
	#shrines { width: 45%; left: 50%; }
	#snailfish { width: 53%; left: 45%; }
}
/* portrait mode */
@media screen and (aspect-ratio <= 7/8) {
	.map .island { margin-bottom: 1em; }
}