@keyframes button-hover {
	from {background-position: 0% 100%;}
	to {background-position: 0% 0%;}
}

#home-page-content {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: auto;
	color: rgb(249,249,249);
}
#home-page-background {
	position: absolute;
	top: 0;
	min-height: 100%;
	width: 100%;
	background-color: rgb(52,152,219);
	box-shadow: 1.5em 1.5em 2em rgb(177,213,238) inset;
}
#home-page-title {
	margin: 2em;
	text-align: center;
}
#home-page-body {
	display: flex;
	justify-content: center;
	width: 100%;
	flex-direction: column;
}
#home-page-list {
	display: grid;
	grid-template-columns: 10vw 2em 50vw 2em 10vw;
	grid-template-rows: max-content 2em 2em max-content 2em max-content 2em 2em max-content 2em 2em max-content 2em max-content 2em 2em max-content 2em 2em max-content 2em max-content 2em 2em;
	margin: auto;
}
.home-page-border {
	border: 0.2em solid rgb(249,249,249);
	border-radius: 1.1em;
	cursor: pointer;
	background-color: inherit;
	font: inherit;
}
.home-page-border:hover {
	background-image: linear-gradient(150deg, rgb(47,137,197) 46%, white 50%, rgb(47,137,197) 54%);
	background-size: 100% 300%;
	animation-name: button-hover;
	animation-duration: 3s;
	animation-iteration-count: infinite;
}
#home-page-border-1 {
	grid-area: 3 / 2 / 8 / 5;
}
#home-page-border-2 {
	grid-area: 11 / 2 / 16 / 5;
}
#home-page-border-3 {
	grid-area: 19 / 2 / 24 / 5;
}
.home-page-image {
	width: 40vw;
	height: 40vw;
	margin: 0 5vw;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	pointer-events: none;
}
#home-page-image-1 {
	grid-area: 4 / 3;
	background-image: url("../images/homePageImg1.svg");
}
#home-page-image-2 {
	grid-area: 12 / 3;
	background-image: url("../images/homePageImg2.svg");
}
#home-page-image-3 {
	grid-area: 20 / 3;
	background-image: url("../images/homePageImg3.svg");
}
.home-page-image-caption {
	width: 50vw;
	font-size: 200%;
	text-transform: uppercase;
	text-align: center;
	pointer-events: none;
}
#home-page-image-caption-1 {
	grid-area: 6 / 3;
}
#home-page-image-caption-2 {
	grid-area: 14 / 3;
}
#home-page-image-caption-3 {
	grid-area: 22 / 3;
}
.home-page-image-description {
	text-align: center;
}
#home-page-image-description-1 {
	grid-area: 1 / 2 / 2 / 5;
}
#home-page-image-description-2 {
	grid-area: 9 / 2 / 10 / 5;
}
#home-page-image-description-3 {
	grid-area: 17 / 2 / 18 / 5;
}
#home-page-links {
	display: flex;
	align-self: center;
	gap: 0.5em;
	flex-direction: column;
	margin-bottom: 2em;
}
#home-page-links > div {
	text-align: center;
}
#home-page-links > div > a {
	color: rgb(249,249,249);
}
#dialog-box.home-page-play-game-dialog {
	height: auto;
	max-height: 90%;
	aspect-ratio: auto;
}
#dialog-box.home-page-play-game-dialog > #dialog-box-content {
	flex: auto;
}
#home-page-play-game-dialog {
	display: flex;
	flex: 1 1 0.0625em;
	flex-direction: column;
	align-items: center;
}
#home-page-play-game-dialog > #dialog-box-content-text {
	margin-bottom: 2em;
}
@media only screen and (orientation: landscape) and (min-width: 95em) and (max-height: 46.75em) {
	#home-page-title {
		margin: 1.5em;
	}
	#home-page-links {
		margin-bottom: 1em;
	}
}
@media only screen and (orientation: landscape) and (min-width: 61.75em) {
	#home-page-list {
		grid-template-columns: 5vw 2em 17vw 2em 10vw 2em 17vw 2em 10vw 2em 17vw 2em 5vw;
		grid-template-rows: 2em max-content 2em max-content 2em 2em max-content 0.5em;
	}
	#home-page-border-1 {
		grid-area: 1 / 2 / 6 / 5;
	}
	#home-page-border-2 {
		grid-area: 1 / 6 / 6 / 9;
	}
	#home-page-border-3 {
		grid-area: 1 / 10 / 6 / 13;
	}
	.home-page-image {
		width: 14vw;
		height: 14vw;
		margin: 0 1.5vw;
	}
	#home-page-image-1 {
		grid-area: 2 / 3;
	}
	#home-page-image-2 {
		grid-area: 2 / 7;
	}
	#home-page-image-3 {
		grid-area: 2 / 11;
	}
	.home-page-image-caption {
		width: 17vw;
	}
	#home-page-image-caption-1 {
		grid-area: 4 / 3;
	}
	#home-page-image-caption-2 {
		grid-area: 4 / 7;
	}
	#home-page-image-caption-3 {
		grid-area: 4 / 11;
	}
	#home-page-image-description-1 {
		grid-area: 7 / 2 / 8 / 5;
	}
	#home-page-image-description-2 {
		grid-area: 7 / 6 / 8 / 9;
	}
	#home-page-image-description-3 {
		grid-area: 7 / 10 / 8 / 13;
	}
	#home-page-links {
		gap: 2em;
		flex-direction: row;
	}
}