.gallery {
    display: flex;
    flex-flow: row wrap;
	align-items: center;
    justify-content: space-evenly;
    width: 100%;
	margin: 0;
	padding: 0.5em;
	overflow: hidden;
}

.phone-image {
	display: block;
	flex: 0 0 auto;
	margin: 0.5em 0;
}

.link-button {
	margin: 0 0 0 1em;
}

.playstore {
	flex: 0 0 auto;
	margin: 0;
	border: none;
	border-radius: 0;
}

.youtube {
	flex: 0 0 auto;
	margin: 0;
	border: none;
	border-radius: 0;
}

.youtube-dark {
	display: none;
}

.shutter {
	display: block;
	position: fixed;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	z-index: 50;
}

.shutter span {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: solid 0.0625em #FFFFFF;
	background: #DDDDDD;
	background: radial-gradient(#FFFFFF, #DDDDDD);
}

.shutter span:nth-child(1) {
	left: 35.3%;
	top: -35.3%;
    transform-origin: 100% 100%;
}

.shutter span:nth-child(2) {
	left: -35.3%;
	top: -35.3%;
    transform-origin: 100% 0%;
}

.shutter span:nth-child(3) {
	left: -35.3%;
	top: 35.3%;
    transform-origin: 0% 0%;
}

.shutter span:nth-child(4) {
	left: 35.3%;
	top: 35.3%;
    transform-origin: 0% 100%;
}

.overlay {
    display: flex;
    flex-flow: column nowrap;
	align-items: center;
    justify-content: center;
	position: fixed;
	width: 100%;
	height: 100%;
	padding: 0;
	overflow: hidden;
	opacity: 1;
	z-index: 100;
}

.intro-image {
	display: block;
	margin: 0 0 0.5em 0;
	padding: 0;
}

.overlay h2 {
	display: block;
	margin: 0;
	padding: 0;
	text-align: center;
	font-weight: bold;
	font-size: 1.25em;
	color: #6696C8;
}

@keyframes rotate {
	to {
		transform: rotate(90deg);
	}
}

@keyframes fade-minimize {
	40% {
		opacity: 0.1;
		transform: scale(1, 1);
	}

	100% {
		opacity: 0;
		transform: scale(0, 0);
	}
}

.shutter span {
	animation: 0.4s ease-in 0.75s forwards rotate;
}

.shutter {
	animation: 0s linear 1.15s forwards fade-minimize; 
}

.overlay {
	animation: 0.4s linear 0.75s forwards fade-minimize; 
}

@media (prefers-color-scheme: dark) {
	.shutter span {
		border: solid 0.0625em #000000;
		background: #222222;
		background: radial-gradient(#000000, #222222);
	}
	
	.youtube-light {
		display: none;
	}

	.youtube-dark {
		display: block;
	}
}

@media all and (max-width: 960px) {
	.overlay h2 {
		font-size: 1em;
	}
}

@media all and (max-width: 720px) {
	.overlay h2 {
		font-size: 0.875em;
	}
}

@media all and (max-width: 540px) {
	.overlay h2 {
		font-size: 0.825em;
	}
}

@media all and (max-width: 480px) {
	.overlay h2 {
		font-size: 0.75em;
	}
}

.intro-image {
	width: 160px;
	height: auto;
	object-fit: contain;
	border: none;
}

@media all and (min-width: 400px) {
	.intro-image {
		width: 180px;
	}
}

@media all and (min-width: 520px) {
	.intro-image {
		width: 240px;
	}
}

@media all and (min-width: 640px) {
	.intro-image {
		width: 320px;
	}
}

@media all and (min-width: 800px) {
	.intro-image {
		width: 400px;
	}
}

.content .top-heading {
	margin: 0.5em 0.5em 1.5em 0.5em;
	font-weight: bold;
	font-size: 0.875em;
	font-style: italic;
	color: #6696C8;
}

.link-button-large {
	width: 80px;
	height: auto;
	object-fit: contain;
	border: none;
}

.link-button-small {
	width: 80px;
	height: auto;
	object-fit: contain;
	border: none;
}

.link-button-large {
	width: 80px;
	height: auto;
	object-fit: contain;
	border: none;
}

.movesets > img {
	aspect-ratio: 1 / 1;
	image-rendering: crisp-edges;
	width: 24px;
}

@media all and (min-width: 410px) {
	.link-button-large {
		width: 110px;
	}

	.link-button-small {
		width: 110px;
	}

	.movesets > span {
		font-size: 0.825em;
	}

	.movesets > img {
		width: 32px;
	}
}

@media all and (min-width: 650px) {
	.link-button-large {
		width: 165px;
	}

	.link-button-small {
		width: 165px;
	}

	.movesets > span {
		font-size: 0.875em;
	}

	.movesets > img {
		width: 48px;
	}
}

@media all and (min-width: 798px) {
	.link-button-large {
		width: 220px;
	}

	.link-button-small {
		width: 220px;
	}

	.movesets > span {
		font-size: 1em;
	}


	.movesets > img {
		width: 64px;
	}
}

.phone-image {
	width: 300px;
	height: auto;
	object-fit: contain;
	border: none;
}

@media all and (min-width: 410px) {
	.phone-image {
		width: 200px;
	}
}

@media all and (min-width: 550px) {
	.phone-image {
		width: 250px;
	}
}

@media all and (min-width: 650px) {
	.phone-image {
		width: 200px;
	}
}

@media all and (min-width: 798px) {
	.phone-image {
		width: 250px;
	}
}

@media all and (min-width: 950px) {
	.phone-image {
		width: 300px;
	}
}

@media all and (min-width: 1100px) {
	.phone-image {
		width: 350px;
	}
}

@media all and (min-width: 1250px) {
	.phone-image {
		width: 200px;
	}
}

@media all and (min-width: 1550px) {
	.phone-image {
		width: 250px;
	}
}

@media all and (min-width: 1850px) {
	.phone-image {
		width: 300px;
	}
}

@media all and (min-width: 2150px) {
	.phone-image {
		width: 350px;
	}
}