:root{
	--color: #5744d2;
	--hoverColor: #422bd0;
}


::selection, ::-moz-selection{
	color: white;
	background: var(--color);
}

html{
	width: 100%;
	height: 100%;
	font-family: sans-serif;
	margin: 0px;
	padding: 0px 30px 30px 30px;
	box-sizing: border-box;
}

header{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

#questionText{
	font-size: 1.2em;
	text-align: justify;
	text-justify: auto;
}

#textAnsInput{
	height: 40px;
	width: 300px;
	border: 2px solid lightgrey;
	border-radius: 7px;
	max-width: 100%;
	box-sizing: border-box;
	padding-left: 10px;
}

input[type=checkbox]{
	accent-color: var(--color);
}

#qcm > *{
	margin-bottom: 5px;
}

@supports (zoom: 1.5){
	#qcm > input[type=checkbox]{
		zoom: 1.5;
	}
}

@supports not (zoom:1.5){
	#qcm > input[type=checkbox]{
		transform: scale(1.5);
	}
}



#qcm label{
	margin-left: 5px;
}

button{
	margin-top: 20px;
	background-color:  var(--color);
	border: 1px solid  var(--hoverColor);
	width: 100px;
	height: 40px;
	cursor: pointer;
	border-radius: 10px;
	color: white;
	font-weight: bold;
}

button:hover{
	background-color:  var(--hoverColor);
}

.message{
	border-radius: 10px;
	width: 100%;
	box-sizing: border-box;
	color: white;
	padding-left: 10px;
	padding-right: 10px;
}

#errorMessageContainer{
	background-color: #ff3a3a;
	border: 1px solid darkred;
}

#sucessMessageContainer{
	background-color: #5ac52e;
	border: 1px solid green;
}

#progressBarContainer {
    display: flex;
    height: 8px; /* 1px si tu veux un effet super fin */
    width: 100%;
    margin-top: 10px;
}

.progressBarItem {
    flex-grow: 1;
    cursor: pointer;
    background-color: gray; /* par défaut : pas encore répondu */
    transition: background-color 0.3s;
}

.progressBarItem.correct {
    background-color: green;
}

.progressBarItem.incorrect {
    background-color: red;
}