#container {
	text-align: justify;
	width: 95vw;
	margin: 0 auto 60px auto;
}

h2 {
	text-align: center;
}

p {
	margin: 5px 0;
}

span {
	padding: 0 5px;
	display: inline-block;
	cursor: pointer;
	line-height: 28px;

	/* Désactiver sélection du texte au double-clic */
	-webkit-user-select: none; /* webkit (safari, chrome) browsers */
	-moz-user-select: none; /* mozilla browsers */
	-khtml-user-select: none; /* webkit (konqueror) browsers */
	-ms-user-select: none; /* IE10+ */
}

.fluencyButton {
	cursor: pointer;
	margin-top: 15px;
	background: var(--dark-blue);
	padding: 10px 5px;
	width: 300px;
	border-radius: 20px;
	color: white;
	text-align: center;
}

span.wrong {
	color: red;
}

span.end {
	text-decoration: underline;
}

#textContainer {
	border: 1px solid;
	padding: 5px;
}

#chronoText {
	text-align: center;
	margin-bottom: 5px;
}

#chronoBox {
	height: 12px;
	background: #dedede;
}

#chronoPercent {
	height: inherit;
	background: var(--light-blue);
}

#endContainer {
	margin-top: 20px;
}

.button {
	width: 300px;
	margin-top: 0;
}

.hidden {
	display: none;
}

#textSelection {
	width: 750px;
	margin: auto;
}

#fluencyTest {
	display: flex;
	gap: 1em;
}

#fluencyTest.hidden {
	display: none;
}

.material-symbols-outlined {
	vertical-align: text-bottom;
}

hr {
	margin: 1em 0;
}

#rules {
	margin-top: 1em;
}