body { font-family: 'Century Gothic', sans-serif; }

fieldset {
	border: 0;
	margin-top: 1em;
	line-height: 1.75em;
}

legend {
	margin-left: -1em;
	font-weight: bold;
}

#results {display: none;}

input[name=units] { margin-left: 1.5em; }

input[type=number] { width: 3em; }
.white {
    color:white;
}
.black{
    color:black;
}

.u:after {
	content: 'Underweight';
	background-color: yellow;
}

.n:after {
	content: 'Normal';
	background-color: green;
	color: #fff;
}

.ow:after {
	content: 'Overweight';
	background-color: yellow;
}

.o:after {
	content: 'Obese';
	background-color: orange;
}

.so:after {
	content: 'Seriously Obese';
	background-color: red;
}

#metric:checked ~ #inputs legend:after { content: 'Metric'; }
#metric:checked ~ #inputs label[for=weight]:after { content: '(kg):'; }
#metric:checked ~ #inputs label[for=height]:after { content: '(m):'; }

#imperial:checked ~ #inputs legend:after { content: 'Imperial'; }
#imperial:checked ~ #inputs label[for=weight]:after { content: '(lb):'; }
#imperial:checked ~ #inputs label[for=height]:after { content: '(in):'; }