body {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	font-weight: 900;
}

.navbar {
	background-color: #000;
}
#test-form {
	font-size: 1.2em;
	display: none;
}

.progress-bar {
	backgrond-color: #000;
}

.personality-chart {
	overflow: visible;
	margin-top: 10px;
	background: #6819e6;
	/* background: linear-gradient(90deg, rgba(119,48,237,1) 0%, rgba(179,56,240,1) 100%); */
	background: linear-gradient(90deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,1) 100%);
	position: relative;
	border-radius: 0.25rem;
	height: 15px;
}

.personality-chart .my-marker,
.personality-chart .partner-marker {
	width: 20px;
    height: 20px;
    background-color: #6819e6;
    margin-top: -3px;
    position: absolute;
    top: 0;
    border-radius: 5px;
    margin-left: -10px;
}

/*Format the radio buttons*/
input[type=radio] {
	display:none;
	margin:10px;
}

input[type=radio] + label + input[type=radio] + label + input[type=radio] + label + input[type=radio] + label + input[type=radio] + label {
	margin-bottom: 50px;
}

input[type=radio] + label {
	display:block;
	margin:5px 0px;
	padding: 4px 12px;
	background-color:gainsboro;
	color:black;
	border-color: #ddd;
	font-size: 0.8em;
}
input[type=radio]:checked + label { 
   background-image: none;
	background-color: #6819e6;
	color:white;
}
/*Format the submit button*/
input[type=submit],
#start-button {
	background-color: #000;
	border-color: #000;
	color: white;
}
footer {
	background-color: black;
	color: white;
	font-size: 0.8em;
	padding: 40px 20px;
	margin-top: 50px;
}

#chart {
	width: 100%;
	max-width: 500px;
}

.progress-bar {
	background-color: #000;
}

.personal-desc div {
	display: none;
}

#back-button {
	background-color: black;
	color: white;
}