/*	===================================================
	PROJECT: PhiziQuiz
	DESCRIPTION: Style for the "exercise session" menu.
	AUTHOR: Quentin LEPONCE
	=================================================== */


@import url("top_navigation_bar.css");


:root {
	background-color: rgb(204, 254, 171); /* 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: 5.4rem;
	color: rgb(64, 109, 220,198,89);
	margin-bottom: 3.8rem;
}

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

h2 {
	font-size: 2.6rem;
	color: rgb(64, 109, 22);
	margin-bottom: 1.7rem;
	font-weight: 700;
}

h3 {
	font-size: 2.8rem;
	font-weight: 500;
}


/* Utility classes */

.container {
	width: 100vw;   /* 100vw = 100% of view width */
	min-height: 100vh;  /* 100vh = 100% of view hieght */
	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;
}

.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 */

.exercise-button {
	font-size: 1.6rem;
	padding: .85rem 0;
	width: 20rem;
	text-align: center;
	border: 0.25rem solid rgb(64, 109, 22);
	border-radius: 1rem;
	margin-bottom: 1rem;
	text-decoration: none;
	color: rgb(52, 38, 27);
	background-color: rgb(170, 227, 119);
}

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

.exercise-button[disabled]:hover {
	cursor: not allowed;
	box-shadow: none;
	transform: none;
}


.methodology-button {
	font-size: 1.6rem;
	padding: .85rem 0;
	width: 20rem;
	text-align: center;
	border: 0.25rem solid rgb(145, 99, 42);
	border-radius: .5rem;
	margin-bottom: 1rem;
	text-decoration: none;
	color: rgb(81, 55, 2);
	background-color: rgb(248, 192, 44);
}

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

.return-button {
	font-size: 1.6rem;
	padding: .85rem 0;
	width: 20rem;
	text-align: center;
	border: 0.25rem solid rgb(34, 47, 164);
	border-radius: .5rem;
	margin-bottom: 1rem;
	text-decoration: none;
	color: rgb(34, 47, 164);
	background-color: rgb(169, 210, 252);
}

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