/*	============================================
	PROJECT: PhyQuiz
	DESCRIPTION: Style for the exercise quizzes.
	AUTHOR: Quentin LEPONCE
	============================================ */


@import url("top_navigation_bar.css");
@import url("../utility/dropdown.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: .95rem 0;
	width: 27rem;
	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);
	user-select: none;
}

.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;
}

/* ///// */

.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);
	user-select: none;
}

.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;
}





/* Fields personnalisation */

#question-statement {
	max-width: 50rem;
	font-size: 1.8rem;
	padding: 1.5rem 1rem 0 1rem;
	margin-top: var(--topnav-height); /* i.e. The statement is translated downward to not overlap under the menu bar.*/
	color: rgb(64, 109, 22);
	margin-bottom: 1.7rem;
	font-weight: 600;
	font-family: 'Segoe UI', Tahoma, Verdana, sans-serif;
}

#question-feedback-screen {
	vertical-align: middle;
	text-align: center;
}

#exercise-intro-screen {
	width: 100vw;
	height: 100vh;
	vertical-align: middle;
	text-align: center;
}

#question-feedback-screen {
	width: 100vw;
	height: 100vh;
	vertical-align: middle;
	text-align: center;
}

#answering-button-area button > mjx-container {
	pointer-events: none;
}