@keyframes loadDown {
	0% {
		transform: translateY(-10px);
		opacity: 0;
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes loadRight {
	0% {
		transform: translateX(-10px);
		opacity: 0;
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes loadUp {
	0% {
		transform: translateY(10px);
		opacity: 0;
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes loadLeft {
	0% {
		transform: translateX(10px);
		opacity: 0;
	}
	100% {
		opacity: 1;
		transform: translateX(0px);
	}
}

@media (max-width: 1540px) {
	html {
		font-size: 12px;
	}

	.displayWinningStats #win-overlay-header {
		max-width: 60vw;
	}
}

@media (max-width: 1025px) {
	.game-overlay {
		flex-wrap: wrap;
	}
	.displayWinningStats #stats {
		margin-top: 5vh;
		opacity: 1;
		width: 95vw;
	}
	.displayWinningStats #win-overlay h2 {
		max-width: 100%;
	}
	.displayWinningStats #win-overlay img {
		margin-top: 3vh;
	}
}

@media (max-width: 769px) {
	#alphabet-buttons {
		padding: 2rem;
		max-width: 100vw;
		transform: scale(1);
	}
}

@media (max-width: 541px) {
	#page-heading {
		font-size: 3rem;
		margin-bottom: 2rem;
	}
	#difficulty-selector {
		font-size: 1rem;
	}
	.game-overlay h1 {
		font-size: 5rem;
	}
	.displayWinningStats #win-overlay h2 span {
		background-color: transparent;
		color: #fff;
		box-shadow: none;
		padding-left: 0;
	}
	#alphabet-buttons {
		padding: 0.5rem;
	}
	#alphabet-buttons button {
		font-size: 1rem;
		padding: 0.25rem 0;
		width: 3rem;
	}
	#mystery-value {
		font-size: 1.5rem;
		text-align: center;
		justify-content: center;
	}
}

@media (max-width: 415px) {
	#page-heading {
		letter-spacing: 10px;
	}
	#instructions {
		font-size: 1rem;
	}
	#mystery-value {
		margin-top: 2rem;
	}
}

@media (max-width: 376px) {
	#hangman-game-container {
		padding-top: 2rem;
	}
	#page-heading {
		margin-bottom: 0;
		font-size: 2.5rem;
	}
	#alphabet-buttons {
		margin: 1.5rem 0;
	}
	#mystery-value {
		margin-top: 0;
		letter-spacing: 10px;
	}
	#lives {
		font-size: 1rem;
	}
	.displayWinningStats #win-overlay {
		padding: 0 0.1rem;
	}
	.displayWinningStats #win-overlay h2 {
		max-width: 90vw;
		font-size: 1.25rem;
		padding: 0.5rem;
	}
	#stats #win-overlay-header {
		font-size: 2.5rem;
	}
	.game-overlay #initial-win-heading {
		margin-bottom: 25vh;
	}
}
