stylish.css

body {
	background-color: grey;
	color: white;
}

.hidden {
	display: none;
}

textarea {
	width: 40%;
	height: 4%;
}

input {
	width: 40%;
	height: 15px;
	margin-bottom: .5%;
}

#invalid {
	color: orange;
}

#calculate {
	position: absolute;
	left: 45%;
	width: 30%;
	height: 5%;
	border-radius: 12px;

}

.filler2 {
	width: 100px;
}

.select {
	width: 42%;
	text-align-last: center;
	margin-bottom: .5%;
}

#inputs {
	position: absolute;
	width: 30%;
	height: 98%;
	left: 5%;
}

.efficiency {
	float: right;
	padding-right: 1px;
}

.efficiencyContainer {
	width: 100%;
	display: inline-flex;
}

/* https://css-tricks.com/mixing-colors-in-pure-css/ */

.efficiencyColour {
	animation: kf-color-mix 1s linear forwards paused;
	flex-grow: 99;
}

@keyframes kf-color-mix {
	0% { background-color: red }
	100% { background-color: green }
}

#efficiency ~ .efficiencyColour {
	animation-delay: calc(-1s * var(--efficiency) / var(--max));
}

#capacity ~ .efficiencyColour {
	animation-delay: calc(-1s * var(--capacity) / var(--max));
}

#supply ~ .efficiencyColour {
	animation-delay: calc(-1s * var(--supply) / var(--max));
}

#overclocker ~ .efficiencyColour {
	animation-delay: calc(-1s * var(--overclocker) / var(--max));
}

#inputs {
	--max: max(var(--efficiency), var(--capacity), var(--supply), var(--overclocker));
}

#hze {
	width: 10%;
}

#macros {
	position: absolute;
	width: 20%;
	height: 100%;
	left: 35%;
	top: 0%;
	background-color: #999999;
}

.macro {
	position: relative;
	width: 60%;
	height: 5%;
	left: 20%;
	margin-top: .5%;
	margin-bottom: .5%;
	text-align: center;
}

.macroZone {
	position: relative;
	width: 57%;
	left: 20%;
}

#uncoordsZone {
	width: 50%;
}

#uncoordsGoal {
	width: 15%;
}

#offset5Label {
	display: block;
	position: relative;
	float: left;
	white-space: nowrap;
}

#results {
	position: absolute;
	width: 40%;
	height: 100%;
	left: 55%;
	top: 0%;
	background-color: #666666;
	padding-left: 5px;
}

.table {
	border-style: solid;
	border-width: 1px;
}

#faq {
	position: absolute;
	width: 15%;
	height: 8%;
	right: 4.5%;
	bottom: 0%;
	background-color: #CCCCCC;
}

#faqScreen {
	position: absolute;
	width: 98%;
	height: 91%;
	max-height: 91%;
	overflow-y: scroll;
	padding-left: 5px;
	padding-right: 5px;
	background-color: #111111;
	color: rgb(240, 240, 240);
	font-size: 150%;
	outline-style: none;
}

.answer {
	font-size: 75%;
	color: #aaaaaa
}