h1 {
	font-family: "BioRhyme", serif;
	font-size: 2em;
	line-height: 1.2em;
	color: #006994;
	margin: 15px 0px;
}

html {
	font-size: calc(1em + 0.1vw);
}

* {
	font-family: "Cabin", Helvetica, Arial, sans-serif;
}

p {
	font-family: "Cabin", Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.8em;
}

.explain {
	font-weight: bold;
	bottom-margin: 3em;
}

.small {
	font-size: -1.2em;
}

.short {
	background: #e2f7ff;
	padding: 0.5em;
}

@media (min-aspect-ratio: 1/1) {
	/*
	calc space result space
	 70%   5%    20%    5%
	rest   5%   200px   5%
	rest   5%   375px   5%
	*/

	.calculator  {
		width: 70%;
		max-width: calc(90% - 200px);
		min-width: calc(90% - 375px);
		padding: 2em;
	}
	
	.graph {
		width: 70%;
		max-width: calc(90% - 200px);
		min-width: calc(90% - 375px);
		padding: 2em;
	}
	
	.result-summary {
		position: fixed;
		height: 16em;
		min-height: 240px;
		top: 20%;
		width: 20%;
		min-width: 200px;
		max-width: 375px;
		right: 5%;
		background: #006994;
		border-radius: 1em;
		padding: 0.5em;
		color: #ffffff;
		text-align: center;
		vertical-align: middle;
	}
}

@media not all and (min-aspect-ratio: 1/1) {
	.calculator {
		padding: 1em;
	}
	
	.graph {
		padding: 1em;
	}
	
	.result-summary {
		position: -webkit-sticky;
		position: sticky;
		height: 20%;
		bottom: 2px;
		width: 95%;
		background: #006994f1;

		#: linear-gradient(transparent 0, #006994 5%);
		border-radius: 1em;
		color: #ffffff;
		text-align: center;
		vertical-align: middle;
		margin-left: auto;
		margin-right: auto;
	}
	

}

sup {
	color: blue;
}

summary {
	bottom-margin: 1em;
}

btn button {
	font-size: inherit; 
}

input { 
	font-size: inherit;
}