index.css

/* BASIC */
ul {
	padding: 0 0;
	margin: 0 0;
}

.inline-list {

}

.inline-block {
	display: inline;
}
/* HEADER */
.header {
	background-color: #2d9bf0;
	color: white;
}

.brand {
	font-size: 1.6rem;
	font-weight: 700;
	padding: 1rem;
}

/* MAIN */
.main {

}
/* Answers Monitoring Section */
.activity-monitoring {
	padding: 1rem;
}
.correct-answers {
}
.total-questions {
	text-align: right;
}

/* Question Header Section */
.question-header {
	text-align: center;
}
.question-title {
	font-size: 2.2rem;
}
.question-category {
	font-size: 1.25rem;
}
.question-description {
	text-align: left;
	margin: 1rem auto 0;
	font-size: 0.9rem;
	max-width: 676px;
	background-color: #F6F5F7;
	padding: 0.5rem 1.4rem;
}
.skip-button {
	background-color: #2d9bf0;
	border: #2d9bf0;
	width: 676px;
	margin: 0.6rem 0;
}
@media (max-width: 800px) {
	.skip-button {
		max-width: 200px;
		margin: 1rem 0;
	}
}
/* Answers proposition section */
.answer-container {
	max-width: 676px;
	margin: 2rem auto 0;
	text-align: center;
	border: 1px solid rgba(128, 128, 128, 0.18);
	border-radius: 2px;
}

.characters-container {
	padding: 7rem 0;
}

.character {
	background-color: white;
	border-radius: 2px;
	border: 1px solid rgba(128, 128, 128, 0.43);
	padding: 0.3rem 0.8rem;
	box-shadow: 1px 1px 3px 0 #ccc;
	font-weight: 600;
	color: rgba(51, 46, 46, 0.58);
	cursor: pointer;
}

.character:hover {
	color: rgba(0, 0, 0, 0.58)
}


/* Answer proposition */
.answers-for-drag {
	margin: 3rem 0;
}

.proposition-characters-container {
	padding: 1.5rem 0;
}