html {
	font-size: 14px;
}

@media (min-width: 768px) {
	html {
		font-size: 16px;
	}
}

html {
	position: relative;
	min-height: 100%;
}

body {
	margin-bottom: 60px;
	font-family: "UAF Sans";
}

.content {
	padding: 10px;
}

.questionnaire {
	width: 900px;
	margin: 0 auto;
}

.questionnaire label {
	padding: 10px;
	width: 90%;
	border: 1px solid white;
}

.questionnaire .form-group:has(input:checked) label {
	border: 1px solid green;
	box-shadow: 2px 2px 5px #ddd;
	background-color: #eeffff;
	transition: border-color 500ms ease-out, box-shadow 500ms ease-out, background-color 500ms ease-out;
}

.questionnaire:has(input[type="radio"]:checked) .form-group:not(:has(input:checked)) label {
	color: #999;
	border-color: #e5e5e5;
	transition: color 400ms ease-out;
}

.copyright {
	text-align: center;
}

.result .chosen.correct::before,
.result .chosen.incorrect::before {
	content: "+";
}

.result .not-chosen.correct::before,
.result .not-chosen.incorrect::before {
	content: "-";
}

.result .chosen.correct,
.result .not-chosen.correct {
	color: #595;
}

.result .chosen.incorrect,
.result .not-chosen.incorrect {
	color: #c55;
}

.result .chosen {
	font-weight: bold;
}

/* 
.result .correct {
	color: #595;
}

.result .chosen.incorrect {
	color: #c55;
} */

.input-group {
	margin-bottom: 5px;
}

@media (max-width: 768px) {
	.questionnaire {
		width: 100%;
		margin: 0 auto;
		padding: 0px 20px;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		text-align: center;
	}

	.questionnaire .form-group label {
		display: inline-block;
		width: 90%;
		padding: 20px;
		border-radius: 5px;
		border: 1px solid #fff;
	}

	.questionnaire input:not(.btn) {
		width: 20px;
		height: 20px;
		margin-right: 10px;
	}

	.questionnaire .btn {
		margin-top: 30px;
		display: block;
		width: 100%;
		height: 40px;
	}

	.questionnaire .results div {
		text-align: center;
		font-size: 18px;
		margin-bottom: 20px;
		margin-top: 20px;
		box-shadow: 3px 3px 15px #ddd;
		padding: 10px;
	}

	.questionnaire .results span {
		display: block;
		text-align: center;
		font-size: 45px;
	}

}

.input-label {
	border: 0px important !;
}

.header {
	background-color: #d0cebd;
	background-image: url(../header.webp);
	background-size:contain;
	background-position: center;
	background-repeat: no-repeat;
	height: 150px;
	margin-bottom: 20px;
}

@media (max-width: 480px) {
	.header {
		height: 120px;
	}
}

@media (max-width: 375px) {
	.header {
		height: 80px;
	}
}

.questionnaire h2 {
	margin-top: 10px;
}