:root{
	--machine-width: 240px;
	--machine-height: 631px;
	--machine-screen-y: 130px;
	--machine-screen-width: 139px;
	--machine-screen-height: 110px;
	--machine-y-padding: 120px;
	--arrow-width: 21px;
	--arrow-height: 42px;
	--arrow-scale-desktop: 0.6;
	--arrow-scale-mobile: 1.2;
	--arrow-x-padding-desktop: 35px;
	--arrow-x-padding-mobile: calc(var(--machine-width) + 12px);
}
@font-face{
	font-family: "sans";
	src: url("NotoSans.woff2");
}
body{
	background-color: black;
	margin: 0px;
	overflow: hidden;
}
#machine_arrows_mobile{
	display: none;
}
#machine_container{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}
#machine_container a{
	color: white;
	font-family: "sans";
	font-style: italic;
	text-decoration: none;
}
#machine{
	width: var(--machine-width);
	height: var(--machine-height);
	background-image: url("assets/menu/pics/machine.png");
	position: relative;
	pointer-events: none;
}

div.machine_screen, #machine_joystick, #machine_buttons, #machine_description{
	position: absolute;
}
div.machine_screen{
	left: 51px;
	top: var(--machine-screen-y);
	z-index: -1;
	opacity: 0.9;
	cursor: pointer;
	pointer-events: auto;
	width: var(--machine-screen-width);
	height: var(--machine-screen-height);
}
div.machine_screen.white{
	background-color: white;
	opacity: 0;
	pointer-events: none;
}
div.machine_screen.noise{
	opacity: 1;
	height: var(--machine-screen-width);
	background-image: url("assets/menu/pics/noise.png");
	animation-name: screen_noise;
	animation-iteration-count: infinite;
	animation-play-state: running;
	animation-timing-function: steps(4);
	animation-duration: 0.2s;
	image-rendering: pixelated;
	pointer-events: none;
}
div.machine_screen.game:hover + div.machine_screen.white{
	opacity: 0.2;
}
div.arrow{
	position: absolute;
	width: var(--arrow-width);
	height: var(--arrow-height);
	background-image: url("assets/menu/pics/arrow.png");
	transform: scale(var(--arrow-scale-desktop));
	cursor: pointer;
}
div.arrow.left{
	right: var(--arrow-x-padding-desktop);
	transform: scale(calc(0 - var(--arrow-scale-desktop)));
}
div.arrow.right{
	left: var(--arrow-x-padding-desktop);
}
@keyframes screen_noise{
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(360deg);
	}
}
#machine_joystick{
	left: 50px;
	bottom: 333px;
	width: 49px;
	height: 36px;
	background-image: url("assets/menu/pics/joystick.png");
	pointer-events: auto;
}
#machine_joystick_arrows{
	visibility: hidden;
}
#machine_joystick:hover #machine_joystick_arrows{
	visibility: visible;
}
#machine_buttons{
	right: 50px;
	bottom: 333px;
	width: 66px;
	height: 19px;
	background-image: url("assets/menu/pics/buttons.png");
}
#machine_description{
	color: white;
	font-family: "sans";
	width: 400px;
	left: 50%;
	bottom: 150px;
	transform: translateX(-50%);
	text-align: center;
	background-color: rgba(100, 100, 100, 0.5);
	border-radius: 20px;
	padding: 10px;
	visibility: hidden;
}
#machine_description h1{
	margin-top: 0px;
	margin-bottom: 0px;
}
#machine_description p{
	margin-top: 0px;
	margin-bottom: 8px;
}
#go_back{
	width: 188px;
	height: 49px;
	background-image: url("assets/pics/go_back.png");
	margin: auto;
	cursor: pointer;
	margin-top: 16px;
}
#go_back:hover{
	background-image: url("assets/pics/go_back_over.png");
}
p{
	color: white;
	font-family: "sans";
	text-align: center;
}
#exit_sign{
	width: 190px;
	height: 74px;
	background-image: url("assets/menu/pics/exit.png");
	position: absolute;
	top: -6px;
	left: 8px;
	cursor: pointer;
}
#exit_sign:hover{
	filter: brightness(1.2);
}
#game{
	visibility: hidden;
}
@media (max-width: 1080px){
	#machine_arrows_mobile{
		display: block;
		pointer-events: none;
		position: absolute;
		width: var(--machine-width);
		height: var(--machine-screen-height);
		top: var(--machine-screen-y);
	}
	#machine_joystick_arrows{
		display: none;
	}
	div.arrow{
		pointer-events: auto;
		transform: scaleX(var(--arrow-scale-mobile));
		top: calc(calc(var(--machine-screen-height) / 2) - calc(var(--arrow-height) / 2));
	}
	div.arrow.left{
		right: var(--arrow-x-padding-mobile);
		transform: scaleX(calc(0 - var(--arrow-scale-mobile)));
	}
	div.arrow.right{
		left: var(--arrow-x-padding-mobile);
	}
}
@media (max-width: 1080px) and (orientation: portrait){
	#machine_description{
		width: 300px;
	}
	#exit_sign{
		left: 0px;
		transform-origin: top left;
		transform: scale(0.6);
	}
}
@media (max-height: 700px) and (orientation: landscape){
	#machine{
		top: var(--machine-y-padding);
	}
	#machine_description{
		transform: translateX(-50%) translateY(calc(0px - var(--machine-y-padding)));
	}
	div.arrow{
		transform: translateY(var(--machine-y-padding));
	}
	div.arrow.left{
		transform: translateY(var(--machine-y-padding)) scale(calc(0 - var(--arrow-scale-mobile)));
	}
}