@charset "UTF-8";
@import 'sanitize.css';

@font-face {
	font-family: 'Bebas_Neue';
	src: url('../font/Bebas_Neue/BebasNeue-Regular.ttf') format('truetype');
}

body {
	margin: 1% auto 0;
	width: 97%;
	height: 95vh;
	background: url('../img/eyes-target.jpg') no-repeat fixed bottom / cover;
}
h1 {
	position: fixed;
	top: 10vh;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	font-family: Bebas_Neue;
	word-break: keep-all;
	user-select: none;
}
#levels {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: flex-start;
	align-content: stretch;
	margin-top: 50vh;
}
.level {
	background-color: black;
	color: red;
	text-align: center;
	font-weight: bold;
}
#password {
	position: absolute;
}
#music-volume {
	position: fixed;
	left: 10px;
	bottom: 10px;
	z-index: 1;
}
svg {
	width: 100%;
	height: 100%;
	background-color: #eeeeee;
}
#won {
	border: black 1px solid;
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	background-color: red;
	width: 300px;
	height: 200px;
	line-height: 50px;
	text-align: center;
}

/* Smartphone en portrait */
@media all and (min-width: 0px) {
	h1 {
		font-size: 4rem;
	}
	.level {
		width: 100px;
		height: 100px;
		line-height: 100px;
		font-size: 1.5rem;
		margin: 10px;
	}
	#password {
		width: 100px;
	}
}
/* Smartphone en paysage, tablette en portrait, petite tablette en paysage */
@media all and (min-width: 480px) {
	h1 {
		font-size: 5rem;
	}
	.level {
		width: 150px;
		height: 150px;
		line-height: 150px;
		font-size: 2rem;
		margin: 20px;
	}
	#password {
		width: 150px;
	}
}
/* Tablette en paysage, ordinateur de taille petite et moyenne */
@media all and (min-width: 960px) {
	.level {
		width: 200px;
		height: 200px;
		line-height: 200px;
		font-size: 3rem;
		margin: 50px;
	}
	#password {
		width: 200px;
	}
}
/* Ordinateur de grande taille */
@media all and (min-width: 1280px) {
	.level {
		margin: 50px 100px;
	}
}