@font-face {
	src: url("../assets/falling-sky.otf");
	font-family: "falling-sky";
}
:root {
	--light-green: #2B2;
	--green: #5A5;
	--dark-green: #383;
	--light-red: #F32;
	--red: #F55;
	--dark-red: #B13;
}
body {
	min-height: 100vh;
	margin: 0;
	font-family: "falling-sky";
	display: grid;
	grid-template-rows: auto 25px;
	grid-template-columns: 55px auto 55px;
	color: #FFF;
	background: #282838;
}
header, aside {
	height: 100%;
	width: 100%;
	padding: 15px 0px;
	gap: 15px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #21212D;
	grid-row: 1 / 3;
}
header img, aside img {
	width: 35px;
	height: 40px;
	cursor: pointer;
}
aside img {
	height: 30px;
}
main {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
div {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
}
main > section {
	min-width: 350px;
	min-height: 500px;
	width: 100%;
	height: 100%;
	max-width: 700px;
	max-height: 900px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
main #sl-in {
	display: none;
	min-width: 300px;
	width: calc(100% - 60px);
	max-width: 700px;
	height: 24px;
	margin: 10px 0px 30px 0px;
	padding: 0;
	opacity: 1;
	appearance: none;
	background: #21212D;
}
main #sl-in::-moz-range-thumb {
	appearance: none;
	height: 24px;
	width: 24px;
	border: none;
	border-radius: 8px;
	background: #06F;
}
main #sl-in::-webkit-slider-thumb {
	appearance: none;
	height: 24px;
	width: 24px;
	border: none;
	border-radius: 8px;
	background: #06F;
}
.val {
	width: 100%;
	min-height: 40px;
	height: 65%;
	border: 2px solid #06F;
	border-radius: 10px;
	box-sizing: border-box;
	grid-template-rows: 1fr 1fr;
	grid-area: 1 / 3 / 2 / 4;
}
.val:focus-within {
	min-width: 130px;
}
.val[aria-disabled="true"] {
	min-width: unset;
}
.bg {
	border-radius: inherit;
	background: var(--green);
	grid-area: 2 / 1 / 3 / 2;
}
.grad {
	border-radius: inherit;
	transform: scaleX(0%);
	transform-origin: 0% 50%;
	transition: transform 500ms;
	grid-area: 1 / 1 / 2 / 2;
}
main h1 {
	margin: 0;
	font-size: 24px;
	z-index: 1;
	grid-area: 1 / 1 / 2 / 2;
}
main h2 {
	margin: 0;
	font-size: 16px;
	font-weight: normal;
	z-index: 1;
	grid-area: 1 / 1 / 2 / 2;
}
main h3 {
	margin: 0;
	font-size: 16px;
	font-weight: normal;
	grid-area: 2 / 1 / 3 / 2;
}
main h4 {
	margin: 5px;
	font-size: 22px;
	place-self: end start;
	color: var(--red);
}
main h5 {
	margin: 0;
}
main img {
	display: none;
	height: 25px;
	z-index: 2;
	cursor: pointer;
	grid-area: 1 / 1 / 3 / 2;
}
main input {
	width: 100%;
	height: 100%;
	padding: 0px 35px 0px 0px;
	border: none;
	outline: none;
	border-radius: 8px;
	box-sizing: border-box;
	font-size: 24px;
	text-align: right;
	z-index: 2;
	opacity: 0;
	cursor: pointer;
	color: #FFF;
	background: #06F;
	grid-area: 1 / 1 / 3 / 2;
}
main input::placeholder {
	font-size: 18px;
}
main input:focus {
	opacity: 1;
}
.val[aria-disabled="true"] input {
	opacity: 0;
}
.percent {
	margin: 0px -90px 0px 0px;
	font-size: 24px;
	z-index: 3;
	display: none;
	grid-area: 1 / 1 / 3 / 2;
}
main input:focus ~ .percent {
	display: grid;
}
.val[aria-disabled="true"] .percent {
	display: none;
}
.e .val {
	height: 100%;
	min-width: 130px;
	border: none;
	grid-template-rows: 1fr 2fr;
}
.e h1 {
	background: #FFF;
}
.e h2 {
	width: 100%;
	height: 100%;
	border-radius: 10px;
	background: #FFF;
	grid-area: 2 / 1 / 3 / 2;
}
.e h3 {
	color: #FFF !important;
	grid-area: 1 / 1 / 2 / 2;
}
.e img {
	display: block;
	grid-area: 2 / 1 / 3 / 2;
}
.e input {
	grid-area: 2 / 1 / 3 / 2;
}
.e .percent {
	grid-area: 2 / 1 / 3 / 2;
}
.ar {
	overflow: hidden;
}
.l {
	transform: scaleX(-1);
}
.row {
	width: 100%;
	height: 14%;
	box-sizing: border-box;
	display: grid;
	place-items: center;
}
.r1 {
	grid-template-columns: 1fr 1fr 180px 1fr 1fr;
	z-index: 5;
	transition: all 0.3s;
}
.r1 .grad {
	grid-area: 2 / 1 / 3 / 2;
}
.r1:not(.e) .val {
	height: 100%;
	border: none;
	grid-template-rows: 1fr 2fr;
}
.r1:not(.e) h2 {
	font-size: 24px;
	grid-area: 2 / 1 / 3 / 2;
}
.r1:not(.e) h3 {
	grid-area: 1 / 1 / 2 / 2;
}
.r1 input:focus {
	padding: 0px 30px;
	grid-area: 2 / 1 / 3 / 2;
}
.r2 {
	grid-template-columns: 2fr 1fr 140px 1fr 2fr;
	z-index: 4;
}
.r2 .val {
	width: 90px;
}
.r2 h3 {
	color: var(--red);
}
.r2 .healthy {
	justify-self: end;
	color: var(--green);
}
.r2.e h4 {
	display: none;
}
.r2.e .ar {
	display: none;
}
.r3 {
	height: 44%;
	padding: 0px 5px;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	z-index: 3;
}
.b {
	width: 100%;
	height: 100%;
	padding: 5px 0px 0px 0px;
	border: 2px solid var(--red);
	border-radius: 15px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	background: #21212D;
}
.br {
	border-color: var(--green);
}
.b1 {
	flex: 2;
	grid-template-columns: 1fr 95px 1fr;
}
.b1 > div {
	border-radius: 10px;
	background: var(--dark-red);
	grid-column: 2;
}
.br .b1 > div {
	background: var(--dark-green);
}
.e .b1 {
	visibility: hidden;
}
.b2 {
	flex: 4;
	grid-template-columns: 1fr 2fr 90px 2fr 1fr;
}
.b2 .val {
	height: 55%;
}
.e .b2 .val {
	height: 90%;
}
.e .ar {
	visibility: hidden;
}
.b2 h3 {
	color: var(--light-red);
}
.br .b2 h3 {
	color: var(--dark-green);
}
.b2 .ar {
	grid-area: 1 / 2 / 2 / 3;
}
.b2 .ar:last-of-type {
	grid-area: 1 / 4 / 2 / 5;
}
.b3 {
	flex: 2;
	grid-template-columns: 1fr 90px 2fr 90px 1fr;
}
.b3 h1 {
	width: 100%;
	height: 100%;
	border: 2px solid var(--light-red);
	border-radius: 10px;
	box-sizing: border-box;
	display: grid;
	place-items: center;
	background: none;
	grid-area: 1 / 2 / 2 / 3;
}
.b3 h1:last-of-type {
	border-color: var(--dark-red);
	grid-area: 1 / 4 / 2 / 5;
}
.br .b3 h1 {
	border-color: var(--light-green);
}
.br .b3 h1:last-of-type {
	border-color: var(--dark-green);
}
.b4 {
	flex: 1;
	grid-template-columns: 1fr 1fr;
}
.b4 h4 {
	margin: 0;
	font-weight: normal;
}
.e .b3, .b.e .b4 {
	visibility: hidden;
}
.r4 {
	grid-template-columns: 1fr 1fr 150px 2fr 150px 1fr 1fr;
	z-index: 2;
}
.r4 h5 {
	margin-bottom: 5px;
	align-self: end;
	grid-area: 1 / 3 / 2 / 4;
}
.r4 h5:last-of-type {
	grid-area: 1 / 5 / 2 / 6;
}
.r4 .ar:first-of-type {
	grid-area: 1 / 2 / 2 / 3;
}
.r4 .ar {
	grid-area: 1 / 4 / 2 / 5;
}
.r4 .ar:last-of-type {
	grid-area: 1 / 6 / 2 / 7;
}
.r5 {
	grid-template-columns: 1fr 160px 1fr 160px 1fr;
	grid-template-rows: 2fr 1fr;
	z-index: 1;
}
.r5 > div {
	border-radius: 10px;
	background: var(--light-green);
	grid-area: 1 / 2 / 2 / 3;
}
.r5 > div:last-of-type {
	background: var(--dark-red);
	grid-area: 1 / 4 / 2 / 5;
}
.r5 > section {
	padding: 0px 10px;
	width: 100%;
	gap: 10px;
	box-sizing: border-box;
	display: flex;
	grid-area: 2 / 2 / 2 / 4;
}
.r5 > section:last-of-type {
	justify-content: end;
	grid-area: 2 / 4 / 2 / 5;
}
.r1.s0 {
	transform: translateY(300%);
}
.r1.s1 {
	transform: translateY(200%);
}
.r1.s2 {
	transform: translateY(100%);
}
.r1.s3 {
	transform: translateY(0%);
}
.r2.s0 {
	visibility: hidden;
	opacity: 0;
	transition: transform 0s 0.3s, opacity 0.3s 0s, visibility 0s 0.3s;
	transform: translateY(200%);
}
.r2.s1 {
	visibility: visible;
	opacity: 1;
	transition: all 0.3s;
	transform: translateY(200%);
}
.r2.s2 {
	visibility: visible;
	opacity: 1;
	transition: all 0.3s;
	transform: translateY(100%);
}
.r2.s3 {
	visibility: visible;
	opacity: 1;
	transition: all 0.3s;
	transform: translateY(0%);
}
.r3.s0, .r3.s1 {
	visibility: hidden;
	opacity: 0;
	transition: transform 0s 0.3s, opacity 0.3s 0s, visibility 0s 0.3s;
	transform: translateY(31.5%);
}
.r3.s2 {
	visibility: visible;
	opacity: 1;
	transition: all 0.3s;
	transform: translateY(31.5%);
}
.r3.s3 {
	visibility: visible;
	opacity: 1;
	transition: all 0.3s;
	transform: translateY(0%);
}
.r4.s0, .r4.s1, .r4.s2, .r5.s0, .r5.s1, .r5.s2 {
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.3s 0s, visibility 0s 0.3s;
}
.r4.s3, .r5.s3 {
	visibility: visible;
	opacity: 1;
	transition: all 0.3s;
}
footer {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	grid-area: 2 / 2 / 3 / 3;
}
footer a {
	text-decoration: none;
	color: #67A;
}
@media screen and (max-width: 810px) { /* max-width of (main > section) + header + aside */
	body {
		grid-template-rows: 55px auto 25px;
		grid-template-columns: auto;
	}
	header, aside {
		padding: 0px 15px;
		flex-direction: row;
		grid-row: unset;
	}
	aside {
		position: absolute;
		top: 0;
		right: 0;
		height: 55px;
		width: 30%;
		justify-content: end;
	}
	footer {
		grid-area: unset;
	}
}
@media screen and (max-width: 430px) {
	.r4 {
		grid-template-columns: 1fr 2fr 130px 3fr 130px 2fr 1fr;
	}
}
@media screen and (max-width: 400px) {
	.b3 {
		grid-template-columns: 1fr 75px 2fr 75px 1fr;
	}
	.b3 h1 {
		font-size: 18px;
	}
}