.loader {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 100;
	background-color: rgba(255, 255, 255, 0.8);
	animation: 3s show-loader ease-in;
	display: block;
}

@supports not (container-type: inline-size) {
	.results-island-page {
		display: none;
	}

	.loader {
		display: flex;
	}
}

@supports (container-type: inline-size) {
	.results-island-page {
		display: grid;
	}

	.loader {
		display: none;
	}
}

@keyframes show-loader {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}


:root {
	--bg-blue: rgb(144, 182, 201);
	--bg-highlight: rgb(163, 192, 207);
	--btn-row: 3;
}

ol, ul {
	list-style: none;
}

.results-island-page {
	background: linear-gradient(150deg, var(--bg-blue) 50%, var(--bg-highlight) 50% 70%, var(--bg-blue) 70% 85%, var(--bg-highlight) 85% 100%);
	background-size: cover;
	display: grid;
	grid-template-columns: 2vw 96vw 2vw;
	grid-template-rows: 5vh 5vh 30vh 10vh 35vh 12vh;
	width: 100%;
/*	height: 100%;*/
	padding: 0;
	box-sizing: content-box;
	overflow: hidden;
}

/* Tablet and larger styles */
@media (min-width: calc(90vh * 1.2)) {
	.results-island-page {
		grid-template-columns: 2vw 20vw 5vw 23vw 35vw 10vw 5vw;
		grid-template-rows: 1vw 40vh 1fr 10vh 2vh;
	}
}

/* graphical elements */
.character {
	grid-column: 2;
	grid-row: 5/-1;
	max-height: 100%;
	max-width: 100%;
	width: auto;
	object-fit: scale-down;
	z-index: 3;
	max-height: 100%;
	align-self: end;
	justify-self: start;
	pointer-events: none;
}

/* Tablet and larger styles */
@media (min-width: calc(90vh * 1.2)) {
	.character {
		z-index: 5;
		grid-column: 1/3;
		grid-row: 3/-1;
	}
}

.avatars {
	grid-column: 2;
	grid-row: 5;
	place-self: end;
	max-width: 35vw;
	z-index: 2;
	animation-name: enter;
	animation-duration: 1.75s;
}

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

/* Tablet and larger styles */
@media (min-width: 786px) {
	.avatars {
		grid-column: 1/3;
		grid-row: -2/-1;
		place-self: end;
		max-width: 15vw;
		z-index: 5;
		animation-name: enter;
		animation-duration: 1.75s;
	}

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

.text-box {
	grid-column: 2/3;
	grid-row: 3/5;
	max-width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	z-index: 2;
	font-size: 1rem;
	align-self: center;
}

/* Tablet and larger styles */
@media (min-width: calc(90vh * 1.2)) {
	.text-box {
		max-width: 55ch;
		grid-column: 2/5;
		grid-row: 2/3;
		font-size: 1.1rem;
		z-index: 5;
	}
}

.speech-bubble-arrow {
	justify-self: start;
	align-self: center;
	z-index: 0;
}

/* Tablet and larger styles */
@media (min-width: calc(90vh * 1.2)) {
	.speech-bubble-box {
		height: 100%;
		aspect-ratio: 59/30;
		align-self: start;
	}
}

.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;
}


.desk {
	grid-column: 1/-1;
	grid-row: -2;
	align-self: start;
	justify-self: end;
	object-fit: scale-down;
	width: 100%;
}

/* Tablet and larger styles */
@media (min-width: calc(90vh * 1.2)) {
	.desk {
		grid-column: 1/5;
		grid-row: -3;
	}
}

.plant {
	display: none;
}

.presentation-board {
	grid-column: 1/4;
	grid-row: 1/-1;
	z-index: 4;
	container-type: size;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr;
	height: 70vh;
	width: auto;
}


/* Tablet and larger styles */
@media (min-width: calc(90vh * 1.2)) {
	/* This class is why the styles for mobile/desktop break at 90vh * 1.2 */
	/* See git commit log for a more detailed explanation */
	.presentation-board {
		height: 90vh;
		justify-self: end;
		min-height: 650px;
		grid-column: 4/7;
		grid-row: 2/5;
		aspect-ratio: 193/150;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
	}
}

.presentation-board-picture {
	z-index: 1;
	align-self: start;
	grid-template-columns: 100%;
	grid-template-rows: 100%;
}

.presentation-board-img {
	width: 120%;
	margin-top: 1vh;
	margin-left: -10vw;
}

.presentation-board-content {
	z-index: 2;
	background: rgb(250, 244, 239);
	display: grid;
	grid-template-columns: 5cqw 5cqw 1fr 5cqw 5cqw;
	grid-template-rows: min-content min-content auto 1fr;
	grid-row-gap: 2cqmin;
	height: 120vh;
	width: 100%;
	font-size: 4cqw;
	align-self: start;
}

/* Tablet and larger styles */
@media (min-width: calc(90vh * 1.2)) {
	.presentation-board-picture {
		place-self: center;
		width: 100cqw;
		aspect-ratio: 193/150;
		grid-column: 1/2;
		grid-row: 1/2;
	}

	.presentation-board-img,.presentation-board-content {
		width: 100cqw;
		height: 100cqmin;
		aspect-ratio: 193/150;
		object-fit: contain;
		grid-column: 1/2;
		grid-row: 1/2;
	}

	.presentation-board-img {
		margin-top: unset;
		margin-left: unset;
	}

	.presentation-board-content {
		grid-template-columns: 10cqw 2cqw 25cqw 1fr 25cqw 2cqw 10cqw;
		grid-template-rows: 6cqmin 8cqmin min-content min-content 50cqh 8cqmin;
		font-size: 2.1cqw;
		grid-row-gap: unset;
		place-self: center;
		background-color: transparent;
		height: 100cqh;
	}
}

.back, .next, .select-age {
	color: var(--light-blue);
	text-transform: uppercase;
	grid-row: 2/3;
	align-self: center;
	font-weight: bold;
	display: flex;
}

.select-age {
	float: right;
}

/* Tablet and larger styles */
@media (min-width: calc(90vh * 1.2)) {
	.select-age {
		display: none;
	}
}

.back:hover, .next:hover {
	color: var(--light-blue);
}

.back {
	grid-column: 2/4;
	grid-row: 1/2;
	justify-self: start;
}

.next {
	grid-column: 4;
	grid-row: 1/2;
	justify-self: end;
}

/* Tablet and larger styles */
@media (min-width: calc(90vh * 1.2)) {
	.back, .next, .select-age {
		grid-row: 2/3;
	}

	.next {
		grid-column: 5/7;
	}
}

.next .arrow {
	transform: rotate(.5turn) translateX(-50%);
}

.heading {
	grid-column: 3/4;
	grid-row: 1;
	place-self: center;
	text-align: center;
}

/* Tablet and larger styles */
@media (min-width: calc(90vh * 1.2)) {
	.heading {
		grid-column: 3/6;
		grid-row: 2/3;
	}
}

.text {
	grid-column: 2/5;
	grid-row: 2;
}

/* Tablet and larger styles */
@media (min-width: calc(90vh * 1.2)) {
	.text {
		grid-column: 3/6;
		grid-row: 3/4;
	}
}

.breakdown-container {
	padding-top: 1rem;
	grid-column: 2/5;
	grid-row: 4/-1;
	display: grid;
	grid-template-columns: 8cqw 1fr;
	grid-template-rows: 16cqh 1fr;
	container-type: size;
	height: 100%;
	overflow: scroll;
}

.breakdown-caption {
	font-size: 5cqw;
	grid-column: 1/3;
	grid-row: 1/2;
	place-self: center;
	text-align: center;
}

/* Tablet and larger styles */
@media (min-width: calc(90vh * 1.2)) {
	.breakdown-container {
		padding-top: 0;
		grid-column: 3/6;
		grid-row: 5/6;
		grid-template-rows: 10cqh 1fr;
		align-self: end;
		margin-bottom: unset;
		overflow: unset;
	}

	.breakdown-caption {
		font-size: 3.5cqw;
	}

}

.breakdown-individual {
	grid-column: 1/2;
	grid-row: 2/3;
	align-self: start;
	height: 10cqh;
	width: 5cqh;
}

/* Tablet and larger styles */
@media (min-width: calc(90vh * 1.2)) {
	.breakdown-individual {
		align-self: end;
		height: 10cqw;
		width: 5cqw;
	}
}

.breakdown-group {
	height: 4cqh;
	width: 2cqh;
	object-fit: contain;
}

/* Tablet and larger styles */
@media (min-width: calc(90vh * 1.2)) {
	.breakdown-group {
		height: 2.25cqw;
		width: 1.12cqw;
	}
}

.breakdown-group.g-25-34-breakdown,
.breakdown-group.g-25-34-high-low-risk {
	height: 6cqw;
	width: 3cqw;
}

.breakdown-group.g-35-39-breakdown,
.breakdown-group.g-35-39-high-low-risk {
	height: 8cqw;
	width: 4cqw;
	margin-bottom: 4cqw;
}

.breakdown-group.g-40-older-breakdown,
.breakdown-group.g-40-older-high-low-risk {
	height: 16cqw;
	width: 8cqw;
	margin-bottom: 4cqw;
}

/* Tablet and larger styles */
@media (min-width: calc(90vh * 1.2)) {
	.breakdown-group.g-25-34-breakdown,
	.breakdown-group.g-25-34-high-low-risk {
		height: 3cqw;
		width: 1.5cqw;
	}

	.breakdown-group.g-35-39-breakdown,
	.breakdown-group.g-35-39-high-low-risk {
		height: 6cqw;
		width: 3cqw;
	}

	.breakdown-group.g-40-older-breakdown,
	.breakdown-group.g-40-older-high-low-risk {
		height: 10cqw;
		width: 5cqw;
		margin-bottom: unset;
	}
}

.breakdown-graphic {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-content: flex-start;
	grid-column: 2/3;
	grid-row: 2/3;
	padding: 0;
	margin: 0;
}

/* Disable animations on mobile only */
/* Note: max-width, not min-width */
@media (max-width: calc(90vh * 1.2)) {
	.breakdown-graphic img {
		animation: none;
	}
}

/* Tablet and larger styles */
@media (min-width: calc(90vh * 1.2)) {
	.breakdown-graphic {
		flex-flow: column wrap;
		justify-content: flex-start;
		align-content: space-evenly;
		max-height: 90cqh;
		margin: 0;
	}
}

.buttons {
	grid-column: 2/5;
	grid-row: 3/4;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}


/* Tablet and larger styles */
@media (min-width: calc(90vh * 1.2)) {
	.buttons {
		flex-direction: row;
		grid-column: 3/6;
		grid-row: 4/5;
	}
}

.buttons-vertical {
	grid-column: 3/4;
	grid-row: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}

/* Tablet and larger styles */
@media (min-width: calc(90vh * 1.2)) {
	.buttons-vertical {
		grid-column: 3/6;
		grid-row: var(--btn-row);
		justify-content: center;
	}
}

.big-button, .age-button {
	margin-bottom: 1rem;
	padding: 1rem 2rem;
	text-transform: uppercase;
	border-radius: 1000px;
	aspect-ratio: 5/1;
	max-height: 6cqh;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	text-decoration: none;
}

.age-button {
	background: var(--purple);
	color: white;
	width: 100%;
	font-size: 1.2rem;
}

.big-button {
	background: white;
	border: 2px solid var(--purple);
	color: var(--dark-blue);
}

#start-over.big-button, #back-to-islands.big-button {
	aspect-ratio: unset;
	magin-bottom: 0;
}

/* Tablet and larger styles */
@media (min-width: calc(90vh * 1.2)) {
	.age-button {
		width: 30cqw;
		margin-right: 2rem;
		font-size: inherit;
	}
}

.charts {
	grid-column: 2/5;
	grid-row: 4;
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	grid-template-rows: 100%;
	height: auto;
	max-width: 100%;
	container-type: size;
	aspect-ratio: 21/11;
}

/* Tablet and larger styles */
@media (min-width: calc(90vh * 1.2)) {
	.charts {
		grid-column: 3/6;
		grid-row: 5/6;
	}
}

.chart-figure {
	grid-row: 1/-1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 30cqh 1fr;
}

.chart-figure.accurate {
	grid-column: 1/3;
}

.chart-figure.not-accurate {
	grid-column: 2/4;
}

.long-caption {
	align-self: center;
	justify-self: center;
	grid-row: 2/-1;
}

.accurate .long-caption {
	grid-column: 1/2;
	text-align: right;
}

.not-accurate .long-caption {
	grid-column: 3/4;
	text-align: left;
}

.chart-label {
	grid-row: 1/2;
	grid-column: 2/3;
	align-self: end;
	font-size: 5cqw;
	z-index: 2;
	opacity: 1;
	animation: 1000ms fadeInOpacity;
}

/* Tablet and larger styles */
@media (min-width: calc(90vh * 1.2)) {
	.chart-label {
		font-size: 6cqw;
		margin-bottom: 2qmin;
	}
}

.no-animation .chart-label {
	animation: unset;
}

.accurate .chart-label {
	justify-self: end;
	margin-right: 2cqw;
}

.not-accurate .chart-label {
	justify-self: start;
}

/* Tablet and larger styles */
@media (min-width: calc(90vh * 1.2)) {
	.accurate .chart-label {
		margin-right: 2cqw;
	}

	.not-accurate .chart-label {
		margin-left: 1cqw;
	}
}

#chart-35-39-high-risk .not-accurate .chart-label {
	justify-self: end;
	transform: translateX(5cqmin);
	align-self: center;
}

#chart-40-older-high-risk .chart-label {
	display: none;
}

.chart {
	grid-row: 1/-1;
	align-self: stretch;
	justify-self: stretch;
}

.chart-container {
	grid-row: 1/3;
}

.accurate .chart-container {
	grid-column: 2/4;
}

.not-accurate .chart-container {
	grid-column: 1/3;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}