.geno {
  font-size: 40px;
  font-weight: 500;
  font-family: "Helvetica", "Arial", "Verdana", serif;
  text-align: center;
  /* white outline to help when displayed on darker background: */
  /* text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white */
}

.fitness {
  font-size: 42px;
  font-weight: 700;
  font-family: "Helvetica", "Arial", "Verdana", serif;
  text-align: center;
}

.info {
  font-size: 48px;
  font-weight: 700;
  font-family: "Helvetica", "Arial", "Verdana", serif;
  text-align: left;
  width: 8em;
}

.neuro-viewer-container{
	background-color: black;
	border-radius: 0px 30px 0px 0px;
	border-color: white;
	border-style: double double none none;
	border-width: 5px;
	pointer-events: none;
}

#neuro-viewer-2d{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 25%;
	height: 25%;
}

#neuro-viewer-3d{
	background-color: black;
	border-radius: 30px 30px 30px 30px;
	border-color: white;
	border-style: double double double double;
	border-width: 5px;
	pointer-events: none;
}

#neuro-viewer-canvas{
	width: 100%;
	height: 100%;	
}

.controls {
	position: absolute;
	bottom: 0;
	right: 0;
	background-color: gainsboro;
	border-radius: 30px 0px 0px 0px;
	border-color: gray;
	border-style: double none none double;
	border-width: 5px;
	font-family: "Sans-serif", Verdana, Geneva, Tahoma, sans-serif;

	display: flex;
  	justify-content: center;
	align-items: safe center;
}

.column {
	display: flex;
	flex-direction: column;
}

.row {
	display: flex;
	flex-direction: row;
}

.slider-value{
	margin-left: 5%;
}

.slider{
	margin-left: 2%;
	margin-right: 2%;
}

.control-container{
	margin-top: 2%;
	width: 70%;
}

.rater-button{
	padding: 0;
	border: none;
	background: none;
	font-size: 30px;
	margin-left: 2%;
}

button.inactive{
	opacity: 0.33;
}

button:active{
	transform: translateY(4px); 
}

button.inactive:active{
	transform: translateY(0px); 
}