:root {
	--novel-height: 56vw;
	--novel-width: 45vw;
	--bg-purple: rgb(191, 182, 204);
	--bg-highlight: rgb(200, 194, 211);
}

/* Tablet and larger styles */
@media (min-width: 786px) {
	:root {
		--novel-height: 38vh;
		--novel-width: 30vh;
		--bookshelf-col-width: calc(var(--book-width) * 4.5);
	}
}

ol, ul {
	list-style: none;
}

body {
	background-size: 100%;
	display: block;
	background-repeat: no-repeat;
}

main {
	grid-row: 2/3;
	grid-column: 1/2;
}

.experience-island-page {
	background: linear-gradient(150deg, var(--bg-purple) 50%, var(--bg-highlight) 50% 70%, var(--bg-purple) 70% 85%, var(--bg-highlight) 85% 100%);
	background-size: cover;
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 75vh 10vh auto;
	width: 100%;
	height: 92vh;
	padding: 0;
	box-sizing: content-box;
	overflow: hidden;
}

/* Tablet and larger styles */
@media (min-width: 786px) {
	.experience-island-page {
		grid-template-columns: 5vw 5vw 3vw 1fr 10vw 2fr 5vw;
		grid-template-rows: 2vw calc(35% - 2vw) 30% 35%;
		height: 100%;
	}
}

/* graphical elements */
.character {
	display: none;
}

/* Tablet and larger styles */
@media (min-width: 786px) {
	.character {
		z-index: 2;
		display: unset;
		grid-column: 1/3;
		grid-row: 3/-1;
		max-height: 100%;
		object-fit: scale-down;
		align-self: end;
		justify-self: start;
		pointer-events: none;
	}
}

.wall {
	display: none;
}

/* Tablet and larger styles */
@media (min-width: 786px) {
	.wall {
		display: unset;
		grid-column: 1/3;
		grid-row: 1/-1;
		align-self: stretch;
		z-index: 0;
	}
}

.text-box {
	grid-column: 1/2;
	grid-row: -1;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	z-index: 3;
}

/* Tablet and larger styles */
@media (min-width: 786px) {
	.text-box {
		width: max-content;
		grid-column: 4/6;
		grid-row: 2/3;
		align-self: end;
	}
}


.speech-bubble-arrow {
	grid-column: 10;
	justify-self: start;
	align-self: end;
	z-index: 0;
}

.speech-bubble-box {
	align-self: stretch;
}

.speech-bubble-box .dialogue {
	grid-column: 1/3;
	grid-row: 1/2;
	animation: dialogue-fadein 1s cubic-bezier(.47,0,.74,.71)
}

.speech-bubble-box .audio {
	grid-column: 3/4;
	grid-row: 1/2;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: flex-start;
}

.hide {
	transform: translateY(100vh);
}

.avatars {
	grid-column: 1;
	grid-row: 2;
	z-index: 2;
	align-self: center;
	justify-self: end;
	max-width: 50vw;
	animation-name: enter;
	animation-duration: 1.75s;
	animation-timing-function: ease-in-out;
}

@keyframes enter {
	from { transform: translate(90%);}
	to { transform: translate(0%);}
}

/* Tablet and larger styles */
@media (min-width: 786px) {
	.avatars {
		grid-column: 4/6;
		grid-row: 4;
		z-index: 1;
		place-self: end;
		max-width: 20vw;
		animation-name: enter;
		animation-duration: 1.75s;
		animation-timing-function: ease-in-out;
	}

	@keyframes enter {
		from { transform: translate(-90%);}
		to { transform: translate(0%);}
	}
}


.close-btn {
	grid-column: 1/2;
	grid-row: 1/2;
	z-index: 1;
	align-self: center;
	justify-self: start;
	text-decoration: none;
	color: var(--black);
	margin-top: 1rem;
}

.next img {
	transform: rotate(.5turn);
}

.story-nav {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-top: 1rem;
	padding: 0 2rem;
	width: 100%;
	text-transform: uppercase;
	color: var(--dark-blue) !important;
}

.story-nav > * {
	display: flex;
	flex: 1;
	text-decoration: none;
}

.story-nav .prev {
	justify-content: flex-start;
}

.story-nav .close {
	justify-content: center;
}

.story-nav .next {
	justify-content: flex-end;
}


/* Tablet and larger styles */
@media (min-width: 786px) {
	.close-btn {
		margin-left: 3vw;
		margin-top: 1rem;
	}
}

.book-container {
	background: white;
	grid-column: 1/-1;
	grid-row: 1/3;
	z-index: 3;
	overflow: scroll;
	transition: transform 800ms cubic-bezier(.72,-0.34,.28,1.39);
	padding-top: 1rem;
	padding-bottom: 25%;
}

/* Tablet and larger styles */
@media (min-width: 786px) {
	.book-container {
		grid-column: 2/7;
		grid-row: 2/-1;
	}

}



.book-container img {
	display: unset;
	max-width: 100%;
}

.book-container.open {
	transform: translateY(0%);
}

.book-container.closed {
	transform: translateY(200%);
}

.graphic-novels-nav {
	grid-column: 1/-1;
	grid-row: 1/2;
	width: 100%;
	align-self: center;
	justify-self: center;
	justify-content: center;

	display: grid;
	grid-template-columns: repeat(2, var(--novel-width));
	grid-template-rows: repeat(2, var(--novel-height));
	grid-row-gap: 1rem;
	grid-column-gap: 1rem;
}

/* Tablet and larger styles */
@media (min-width: 786px) {
	.graphic-novels-nav {
		grid-column: 6/7;
		grid-row: 2/-1;
		grid-template-columns: repeat(2, var(--novel-width));
		grid-template-rows: repeat(2, var(--novel-height));
		grid-row-gap: 2rem;
		grid-column-gap: 2rem;
		align-self: start;
	}

}


.cover-img {
	display: none;
}

.cover-img:first-child {
	display: unset;
	max-width: 100%;
	height: auto;
	object-fit: scale-down;
}

.novel-link:nth-child(even) {
	align-self: end;
	justify-self: end;
}

.novel-link:nth-child(odd) {
	align-self: end;
}

.novel-link {
	display: inherit;
	max-height: 100%;
	overflow: hidden;
	box-sizing: border-box;
	position: relative;
}


.read-indicator {
	background-color: var(--bright-green);
	border-radius: 50%;
	width: 2rem;
	height: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	z-index: 1;
	bottom: 8%;
	left: 10%;
}

.chair {
	display: none;
}

/* Tablet and larger styles */
@media (min-width: 786px) {
	.chair {
		display: unset;
		grid-column: 3/6;
		grid-row: 4/-1;
		align-self: end;
		max-width: 100%;

	}

}