:root {
  --cold:		rgb(40, 100, 120);
  --cool:		rgb(40, 40, 120);
  --neutral:	rgb(100,100,100);
  --warm:		rgb(150,40,40);
  --hot:		rgb(150,70,40);
}

body {
	background-color:#222222;
	color:#cccccc;
/* 	font-family: HelveticaNeue,helvetica,arial,sans-serif; */
	
	font-family: "thermal-variable", HelveticaNeue,helvetica,arial,sans-serif;
	font-variation-settings: "opsz" 500, "wght" 400;
}

#legend {
	height:40px;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:center;
	width:400px;
	font-size:20px;
	font-family: "thermal-variable", HelveticaNeue,helvetica,arial,sans-serif;
}
#legend>div {
	padding:13px;
	text-align:center;
}
#legend>div:nth-child(1) {
	background-color:var(--cold);
	width:80px;
	border-top-left-radius:20px;
	border-bottom-left-radius:20px;
}
#legend>div:nth-child(2) {
	background: linear-gradient(90deg, var(--cool) 0%, var(--neutral) 50%, var(--warm) 100%);
	flex-grow:10;
}
#legend>div:nth-child(3) {
	background-color:var(--hot);
	width:80px;
	border-top-right-radius:20px;
	border-bottom-right-radius:20px;
}

#controls {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:2vh;
	padding:20px 20px 6vh 20px;

}

#outertable {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:2vh;
	padding:6vh 20px 0 20px;
}

div.innertable {
	padding:3% 3% 3% 3%;
	border-radius: 10px;
	background-color: rgb(150,40,50);
	
	width:70vw;
	max-width:800px;
}



div.topham {
	display:flex;
	flex-direction:row;
	width:100%;
	justify-content:space-between;
	padding:0 0 40px 0;
}


.field_name {
	padding:0;margin:0;
	font-variation-settings: "opsz" 500, "wght" 600;
	font-size:72px;
	font-weight:100;
}
.field_temp {
	padding:0;margin:0;
	font-variation-settings: "opsz" 500, "wght" 600;
	font-size:130px;
	font-weight:100;
}

div.botham {
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	gap:20px;
}

div.botfield {
	text-align:center;
}

div.botfield>div:nth-child(1) {
	font-size:36px;
}

div.gapper {
	flex-grow:10;
}

div.timestamp {
	text-align:right;
	color:#ffffff44;
/* 	padding:0 0 30px 0; */
}