/* 	Photo by Matheus Ferrero on Unsplash 
	https://unsplash.com/photos/TkrRvwxjb_8 */
.jumbotron {
	background-image: url(/personlighetstest/imgs/jumbotron-background.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center top;
	height: 100vh;
	color: white;
	text-shadow: 0 0 0.3em black;
	margin: 0;
}

.jumbotron h1 {
	font-family: 'Lemon', cursive;
}

.jumbotron p {
	font-family: 'Nunito', cursive;
}

.jumbotron a.btn {
	color: white;
	background-color: #ba4844;
	border-color: #fff;
	box-shadow: 0 0 5px black;
	min-width: 20%;
}

.jumbotron a.btn:hover {
	color: white;
	background-color: #cc3c37;
	box-shadow: 0 0 5px black;
}

.bg-blurred {
	background-image: url(/personlighetstest/imgs/jumbotron-background-blurred.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center top;
	height: 100vh;
}

.card {
	font-family: 'Nunito', cursive;
	overflow: hidden;
}

.card h4 {
	font-family: 'Bitter', serif;
}

.question-start {
	min-height: 3rem;
}

.option-one, .option-two {
	min-height: 6rem;
}

/*  Range slider inspirerad av:
	https://www.w3schools.com/howto/howto_js_rangeslider.asp 
	och
	https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */

.slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 15px;
	margin: 40px 0;
	background-color: #ddd;
	border-radius: 4px;
}

.slider:focus {
	outline: none;
}

.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 30px;
	height: 30px;
	background-color: #007bff;
	border: 0;
	border-radius: 20%;
	cursor: pointer;
}

.slider::-moz-slider-thumb {
	width: 30px;
	height: 30px;
	background-color: #555;
	border: 0;
	border-radius: 20%;
	cursor: pointer;
}

.slider::-webkit-slider-thumb:active {
	box-shadow: 0 0 0 15px rgba(0, 123, 255, 0.2);
}

.progress {
	font-weight: 400;
	font-size: 1rem;
	vertical-align: middle;
	line-height: 1.25;
	word-wrap: normal;
}
.progress-bar {
	height: 38px;
	padding: .5rem .75rem;
	line-height: 1.25;
}