/*
  Made By:
  https://jbpage.netlify.app : Just Coding | JumperBot_
  https://www.facebook.com/profile.php?id=100010647758820 : Sequence 0
  https://web.facebook.com/hansmicheal.dayondon/ : Under_YourScore | Ander
  https://www.facebook.com/aliyahkirsten.corpuz/ : Jijo
  https://www.facebook.com/so.what.lmao178/ : mlk178
  https://www.facebook.com/rachel.gapaz.7 : chew
*/

* {
	font-family: sans-serif;
	user-select: none;
}

html,
body,
main,
section {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	background-repeat: no-repeat !important;
	background-size: cover;
	background-position: center !important;
}

body {
	background-color: #111;
	background-size: max(80vh, 80vw);
	filter: brightness(1);
	transition: all 500ms;
}

@keyframes scaling {
	0% {
		transform: scale(1);
		filter: brightness(1);
	}

	25% {
		transform: scale(1.01);
		filter: brightness(0.9);
	}

	50% {
		transform: scale(1);
		filter: brightness(1);
	}
}

main {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 2vh;
	position: absolute;
	top: 0px;
	left: 0px;
	background-image: url("./res/Untitled55_3.png.webp");
}

button,
a {
	transition: all 500ms;
	cursor: pointer;
}

button:hover,
a:hover {
	filter: invert(1);
}

main > button {
	width: min-content;
	padding: 0.4em 0.6em;
	margin-bottom: 2vh;
	font: monospace, monospace;
	font-size: 4em;
	border: none;
	border-radius: 50px;
}

main > header {
	position: absolute;
	top: 4em;
	width: calc(min-content + 2em);
	max-width: 75vw;
	height: min-content;
}

main > header > p {
	display: block;
	margin: 0px;
	padding: 0px;
	font-size: 6em;
	font-weight: bolder;
	color: white;
	text-shadow: -1px -1px 0px #000, 0px -1px 0px #000, 1px -1px 0px #000,
		-1px 0px 0px #000, 1px 0px 0px #000, -1px 1px 0px #000, 0px 1px 0px #000,
		1px 1px 0px #000, -2px -2px 0px #000, -1px -2px 0px #000, 0px -2px 0px #000,
		1px -2px 0px #000, 2px -2px 0px #000, 2px -1px 0px #000, 2px 0px 0px #000,
		2px 1px 0px #000, 2px 2px 0px #000, 1px 2px 0px #000, 0px 2px 0px #000,
		-1px 2px 0px #000, -2px 2px 0px #000, -2px 1px 0px #000, -2px 0px 0px #000,
		-2px -1px 0px #000;
}

main > header > p:nth-child(1) {
	margin-left: -0.3em;
}

main > header > p:nth-child(2) {
	margin-top: -0.3em;
	margin-right: -0.3em;
	text-align: right;
}

main > div#qr {
	position: absolute;
	bottom: 2vh;
	right: 2vh;
	width: min(25vw, 25vh);
	aspect-ratio: 619/798;
	padding: 25px;
	border-radius: 25px;
	background-color: white;
}

main > div#qr::before {
	content: "";
	display: block;
	width: min(25vw, 25vh);
	aspect-ratio: 619/798;
	background-image: url("./res/QR.jpg");
	background-size: cover;
}

main > div#credits {
	position: absolute;
	bottom: 2vh;
	left: 50%;
	transform: translateX(-50%);
	width: max-content;
	height: max-content;
	padding: 2em;
	display: none;
	flex-direction: column;
	border-radius: 25px;
	background-color: #222;
}

main > div#credits > p,
main > div#credits > a,
main > div#credits > button {
	margin: 0.2em 0px;
	padding: 0px;
	font-size: 2em;
	color: white;
}

main > div#credits > p > sub {
	position: absolute;
	top: 4em;
	right: 0px;
	margin-right: 2em;
	font-size: 0.5em;
}

main > div#credits > button {
	border: none;
	background-color: #444;
}

main > div#credits > a {
	text-decoration: none;
	padding: 0.4em;
	border-radius: 5px;
	background-color: #111;
}

section {
	display: none;
}

section > img#speaker {
	display: block;
	height: min(60vh, 60vw);
	width: 100%;
	margin: 0px;
	padding: 0px;
	position: absolute;
	left: 0px;
	bottom: min(-60vh, -60vw);
	background-position: center;
	object-fit: contain;
	border: none;
	transition: all 1s;
}

@keyframes talking {
	0% {
		transform: rotate(0deg);
		margin-bottom: 0px;
	}
	20% {
		transform: rotate(2deg);
		margin-bottom: -5vh;
	}
	40% {
		transform: rotate(0eg);
		margin-bottom: -2vh;
	}
	60% {
		transform: rotate(-2deg);
		margin-bottom: -5vh;
	}
	80% {
		transform: rotate(0deg);
		margin-bottom: 0px;
	}
}

section > div#dialogueBox {
	height: 10em;
	width: calc(100% - min(8vh, 8vw));
	padding: min(2vh, 2vw);
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -20em;
	background-color: #fff;
	border-radius: 15px;
	transition: all 1s;
	cursor: pointer;
}

section > div#dialogueBox::before {
	content: attr(data-speaker);
	height: min-content;
	width: min-content;
	padding: min(2vh, 2vw);
	padding-right: min(4vh, 4vw);
	position: absolute;
	left: 2vh;
	bottom: calc(4em);
	background-color: #ddd;
	border-radius: 15px;
	font-size: 3em;
	transition: all 1s;
}

section > div#dialogueBox > p:nth-child(1) {
	margin: min(2vh, 2vw);
	font-size: xx-large;
}

section > div#dialogueBox > p:nth-child(2) {
	position: absolute;
	bottom: min(2vh, 2vw);
	right: min(2vh, 2vw);
	padding: 0.5em;
	margin: 0px;
	border-radius: 5px;
	font-size: larger;
	background-color: red;
}

section > div#puzzle,
section > div#runner,
section > div#breaker,
section > div#stalker {
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
}

section > div#puzzle {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
}

section > div#puzzle > div {
	height: 100%;
	width: 100%;
	display: grid;
	grid-template-rows: min-content min(70vw, 70vh) calc(min(20vw, 20vh));
	align-items: center;
	align-content: center;
}

section > div#puzzle > div > p {
	height: min-content;
	margin: 0px;
	padding: 0px;
	text-align: center;
	font-size: xx-large;
	color: white;
	text-shadow: -1px -1px 0px #000, 0px -1px 0px #000, 1px -1px 0px #000,
		-1px 0px 0px #000, 1px 0px 0px #000, -1px 1px 0px #000, 0px 1px 0px #000,
		1px 1px 0px #000, -2px -2px 0px #000, -1px -2px 0px #000, 0px -2px 0px #000,
		1px -2px 0px #000, 2px -2px 0px #000, 2px -1px 0px #000, 2px 0px 0px #000,
		2px 1px 0px #000, 2px 2px 0px #000, 1px 2px 0px #000, 0px 2px 0px #000,
		-1px 2px 0px #000, -2px 2px 0px #000, -2px 1px 0px #000, -2px 0px 0px #000,
		-2px -1px 0px #000;
}

section > div#puzzle > div > div:nth-child(2) {
	display: grid;
	gap: 2vh;
	grid-template-columns: auto auto auto auto;
	justify-content: center;
	align-items: center;
	transition: gap 500ms;
}

section > div#puzzle > div > div:nth-child(3) {
	height: min(20vw, 20vh);
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-content: space-around;
}

section > div#puzzle > div > div:nth-child(2) > button {
	border: solid 5px gray;
	background-color: #111;
}

section > div#puzzle > div > div > button {
	width: min(10vh, 10vw);
	aspect-ratio: 1;
	margin: 0px;
	padding: 0px;
	background-size: cover;
	background-position: center;
	border: none;
}

section > div#puzzle > div > div:nth-child(2) > button {
	width: min(15vh, 15vw);
}

section > div#runner > p,
section > div#runner > div > p {
	text-align: center;
	font-size: xx-large;
	color: white;
	text-shadow: -1px -1px 0px #000, 0px -1px 0px #000, 1px -1px 0px #000,
		-1px 0px 0px #000, 1px 0px 0px #000, -1px 1px 0px #000, 0px 1px 0px #000,
		1px 1px 0px #000, -2px -2px 0px #000, -1px -2px 0px #000, 0px -2px 0px #000,
		1px -2px 0px #000, 2px -2px 0px #000, 2px -1px 0px #000, 2px 0px 0px #000,
		2px 1px 0px #000, 2px 2px 0px #000, 1px 2px 0px #000, 0px 2px 0px #000,
		-1px 2px 0px #000, -2px 2px 0px #000, -2px 1px 0px #000, -2px 0px 0px #000,
		-2px -1px 0px #000;
}

section > div#breaker {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(95vh, 95vw) !important;
	height: min(95vh, 95vw) !important;
	background-color: #333;
	border-radius: 25px;
}

section > div#breaker::before {
	content: "";
	position: absolute;
	bottom: min(20vh, 20vw);
	left: 50%;
	transform: translateX(-50%);
	width: min(90vh, 90vw);
	height: min(60vh, 60vw);
	background-color: #555;
	border-radius: 25px;
}

section > div#breaker > p {
	text-align: center;
	font-size: xx-large;
	color: white;
	text-shadow: -1px -1px 0px #000, 0px -1px 0px #000, 1px -1px 0px #000,
		-1px 0px 0px #000, 1px 0px 0px #000, -1px 1px 0px #000, 0px 1px 0px #000,
		1px 1px 0px #000, -2px -2px 0px #000, -1px -2px 0px #000, 0px -2px 0px #000,
		1px -2px 0px #000, 2px -2px 0px #000, 2px -1px 0px #000, 2px 0px 0px #000,
		2px 1px 0px #000, 2px 2px 0px #000, 1px 2px 0px #000, 0px 2px 0px #000,
		-1px 2px 0px #000, -2px 2px 0px #000, -2px 1px 0px #000, -2px 0px 0px #000,
		-2px -1px 0px #000;
}

section > div#breaker > div:nth-child(2) {
	position: absolute;
	bottom: min(25vh, 25vw);
	left: 50%;
	transform: translateX(-50%);
	width: min(80vh, 80vw);
	height: min(50vh, 50vw);
	border-radius: 25px;
	display: grid;
	grid-template-columns: auto auto;
	align-content: space-between;
	justify-content: space-evenly;
}

section > div#breaker > div:nth-child(2) > button {
	width: min(30vh, 30vw);
	height: min(10vh, 10vw);
	background: linear-gradient(to right, black 0%, black 50%, red 50%, red 100%);
}

section > div#breaker > div:nth-child(2) > button.activated {
	background: linear-gradient(
		to right,
		green 0%,
		green 50%,
		black 50%,
		black 100%
	);
}

section > div#stalker > div:nth-child(1) {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	animation: shaking-with-pause 2s infinite;
	background-image: url("./res/stalker.png.webp");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: brightness(0);
	z-index: -1;
}

@keyframes shaking-with-pause {
	0% {
		transform: rotate(0deg);
	}
	5% {
		transform: rotate(5deg) scale(1.2);
	}
	10% {
		transform: rotate(0eg);
	}
	15% {
		transform: rotate(-5deg) scale(1.2);
	}
	20% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(5deg) scale(1.2);
	}
	30% {
		transform: rotate(0eg);
	}
	35% {
		transform: rotate(-5deg) scale(1.2);
	}
	40% {
		transform: rotate(0deg);
	}
	45% {
		transform: rotate(5deg) scale(1.2);
	}
	50% {
		transform: rotate(0eg);
	}
}

section > div#stalker > p {
	height: min-content;
	margin: 0px;
	margin-top: 2em;
	padding: 0px;
	text-align: center;
	font-size: xx-large;
	color: white;
	text-shadow: -1px -1px 0px #000, 0px -1px 0px #000, 1px -1px 0px #000,
		-1px 0px 0px #000, 1px 0px 0px #000, -1px 1px 0px #000, 0px 1px 0px #000,
		1px 1px 0px #000, -2px -2px 0px #000, -1px -2px 0px #000, 0px -2px 0px #000,
		1px -2px 0px #000, 2px -2px 0px #000, 2px -1px 0px #000, 2px 0px 0px #000,
		2px 1px 0px #000, 2px 2px 0px #000, 1px 2px 0px #000, 0px 2px 0px #000,
		-1px 2px 0px #000, -2px 2px 0px #000, -2px 1px 0px #000, -2px 0px 0px #000,
		-2px -1px 0px #000;
}

section > div#stalker > div:nth-child(3) {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(5vh, 5vw);
	aspect-ratio: 1;
	background-color: gray;
	border-radius: 5px;
}

section > div#stalker > div:nth-child(4) {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(5vh, 5vw);
	aspect-ratio: 1;
	background-color: rgba(255, 255, 255, 75%);
	border-radius: 9999999999999px;
}

section > div#stalker > div:nth-child(5) {
	width: 75vw;
	height: 2em;
	position: absolute;
	bottom: 2em;
	left: 50%;
	transform: translateX(-50%);
	background-color: red;
	border-radius: 5px;
}