:root {
	--sky-blue: rgb(155, 200, 255);
	--titleFontSize: 5.4rem; /* Must be in 'rem' for 'intialize()' (from index.js) to work. */
	background-color: var(--sky-blue); /* Change la couleur du fond de l'app. */
	font-size: 62.5%; /* Taille par défaut = 62.5% de la taille par défaut des écran (16pix) => = 10pix */
}

* { /* Applique à tous les éléments. */
	box-sizing: border-box; /* La taille des bords sont désormais inclus dans la taille des "boxes". */
	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}


h1,
h2,
h3,
h4 {
	margin-bottom: 1rem;
}

h1 {
	font-size: var(--titleFontSize);
	color: rgb(0,89,198);
	margin-bottom: 0rem;
	/*margin-top: calc(2*var(--titleFontSize));*/
	font-family: 'Lucida Handwriting', 'Segoe Print', sans-serif;
}

h1 > span {
	font-size: 2.4 rem;
	font-weight: 500;
}

h2 {
	font-size: 1.8rem;
	font-weight: 500;
	font-family: 'Segoe Print', 'Lucida Handwriting', sans-serif;
	margin-bottom: 2.4rem;
}



/* Utility classes */

.container {
	width: 100vw;   /* 100vw = 100% of view width */
	min-height: 100vh;  /* 100vh = 100% of view height */
	display: flex;  /* Make it be a flex-box */
	justify-content: center; /* Content horizontal alignement: centered */
	align-items: center;  /* Content vertical alignment: centered */
	margin: 0 auto;
	overflow-y: auto;
}

.container > * {
	width: 100%;
}

.flex-column {
	display: flex;
	flex-direction: column;
}

.flex-center {
	justify-content: center;
	align-items: center;
}

.justify-center {
	justify-content:center;
}

.text-center {
	text-align: center;
}

.hidden {
	display: none;
}




/* Buttons */

.home-menu-button {
	font-size: 1.6rem;
	padding: .85rem 0;
	width: 20rem;
	text-align: center;
	border: 0.25rem solid rgb(193, 152, 9);
	border-radius: 1rem;
	margin-bottom: 1rem;
	text-decoration: none;
	color: rgb(52, 38, 27);
	background-color: rgb(236, 228, 211);
}

.home-menu-button:hover { /* Visual change triggered when the mouse goes over the button. */
	cursor: pointer;
	box-shadow: .3rem .3rem .2rem rgba(0,0,0, .15);
	/*box-shadow: 0rem 4rem 1.4rem 0 rgba(86,185,235, .05); */
	transform: translateY(-0.12rem);
	transition: transform 150ms;
}

.home-menu-buttom[disabled]:hover {
	cursor: not allowed;
	box-shadow: none;
	transform: none;
}






/* Canvas */

canvas {
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: var(--sky-blue);
	z-index: -1;
}