/*
This file is part of the Tetris project.

Author
------
Written 2023 by Maarten Tromp <maarten@geekabit.nl>.

Website
-------
https://www.geekabit.nl/projects/tetris-window/

License
-------
CC0 (no copyright, public domain)
The person who associated a work with this deed has dedicated the work to the public domain by
waiving all of his or her rights to the work worldwide under copyright law, including all related
and neighbouring rights, to the extent allowed by law. You can copy, modify, distribute and perform
the work, even for commercial purposes, all without asking permission.
https://creativecommons.org/share-your-work/public-domain/cc0/
*/


@font-face {
	font-family: "Arcade";
	src: url("arcade.woff2") format("woff2");
	/* Arcade font by Yuji Adachi
	https://fontmeme.com/fonts/arcade-yuji-adachi-font/ */
}

body, input, button {
	font-family: "Arcade";
	font-size: 6vmin;
	text-transform: uppercase;
	color: white;
	background-color: black;
}
input, button {
	border: .1em solid currentColor;
}


div.hidden {
	/* Combining dom property "hidden" and css "display: flex" does not work well
	use css class "hidden" for those elements instead. */
	display: none !important;
}

body {
	/* stop page from scrolling */
	overflow: hidden;
}

body, img, svg {
	margin: 0;
	border: 0;
	padding: 0;
}

h1 {
	margin-top: -.12em;
	margin-bottom: -.24em;
}

a {
	color: currentColor;
	text-decoration: solid underline currentColor .1em;
}

div#overlay {
	display: flex;
	background-color: rgba(0, 0, 0, 0.75);
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	align-items: center;
	justify-content: center;
	z-index: 1;
}
div#message, div#pressStart, div#enterName, div#selectGame {
	text-align: center;
}
div#splash, div#controller {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}
div#rotate {
	display: flex;
	position: fixed;
	width: 100vw;
	justify-content: center;
	z-index: 1;
}

div#splash img {
	width: 100vw;
	height: 100vh;
	object-fit: cover;
}

div#controller svg {
	width: 100vw;
	height: 100vh;
	object-fit: contain;
}

div#rotate svg {
	fill: currentColor;
	height: 15vmin;
}

div#selectGame button {
	width: 6.5em;
	object-fit: contain;
}
div#selectGame img {
	width: 100%;
	object-fit: contain;
}

@media(orientation: landscape) {
	div#rotate {
		display: none;
	}
}