@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-optical-sizing: auto;
	font-family: "Press Start 2P", system-ui;
	font-weight: 400;
	font-style: normal;
}

html,
body {
	width: 100vw;
	min-height: 100vh;
	min-height: 100dvh;
}

body {
	position: relative;
	margin: 0;
	background-color: #b566a9;
	overflow-x: hidden;
	display: grid;
	grid-template-rows: repeat(2, auto);
	align-items: center;
	justify-items: center;
}

h1 {
	margin: 0;
	padding: 0;

	&.logo {
		color: #e777d1;
		font-size: clamp(3rem, 8vw, 6rem);
		text-align: center;
		text-transform: uppercase;
		text-shadow: 0 5px 0 #d855a8, 0 15px 0 #8c1d5c;
	}
}

h2 {
	margin: 0;
	padding: 0;

	&.subheading {
		color: #422633;
		font-size: clamp(0.75rem, 1.25vw, 2rem);
	}
}

.subheading {
	margin-top: 2rem;
	text-align: center;
}

.yandere {
	position: absolute;
	top: 50%;
	left: calc(50% - 50px);
	width: 96px;
	height: 96px;
	background-repeat: no-repeat;
	image-rendering: pixelated;
	transform: scale(4);
	overflow: hidden;

	&.idle {
		/*usando !important para corrigir um bug do javascript, que não
		consegue executar o keyup após um keydown muito rápido*/
		background-image: url("../src/pix_chan.png") !important;
		animation: idle 1s steps(10, end) infinite !important;
	}

	&.turn {
		background-image: url("../src/pix_chan.png");
		animation: idle 1s steps(10) infinite;
	}

	&.back {
		background-image: url("../src/pix_chan_back.png");
		animation: idle 1.5s steps(10, end) infinite;
		/* animation: attack 0.35s steps(10, end) infinite; */
	}
}

@keyframes idle {
	0% {
		background-position-x: 0;
	}
	100% {
		background-position-x: -960px;
	}
}

@keyframes turn {
	0% {
		background-position-x: 0;
	}
	100% {
		background-position-x: -1536px;
	}
}

@keyframes attack {
	0% {
		background-position-x: 0;
	}
	100% {
		background-position-x: -672px;
	}
}