@font-face {
  font-family: "sawton circular";
  src: url("sawtoncircular-bold-webfont.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "sawton circular";
  src: url("sawtoncircular-regular-webfont.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

* {
	font-family: "sawton circular", ui-sans-serif, sans-serif;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
  --number-background-color: hsl(120, 60%, 95%);
  --number-border-color: hsl(120, 60%, 80%);
  --number-text-color: hsl(120, 60%, 60%);
  --number-shadow-color: hsla(120, 60%, 70%, 20%);
}

body {
	background-color: hsl(120, 0%, 98%);
}

/* p {
	line-height: 1.7;
} */

.numberWrapper {
	font-size: clamp(1.2rem, 3.5vw, 2.2rem);
	width: 95vw;
	margin: 1rem auto 1.5rem auto;
	text-align: justify;
	position: relative;
}

h1 {
	font-size: max(1.2em, 1.6rem, 6vw);
	line-height: 1.1;
	margin-bottom: .2em;
}

.numberWrapper h2 {
	/* font-size: max(min(3rem, 6vw), 1.6rem); */
	font-size: max(1.2em, 1.6rem, 5vw);
	line-height: 1;
}

.numberWrapper:first-of-type {
	font-size: max(4vw, 1.4rem);
	line-height: 1.8;
	padding-bottom: 1em;
	margin-top: .5em;
	margin-bottom: 1em;
	border-bottom: .05em dashed hsl(0, 0%, 50%);
}

.numberWrapper:nth-of-type(2) {
	margin-bottom: 1rem;
}

.numberWrapper:nth-of-type(3) {
	padding: .5em;
	margin-top: 0;
	line-height: 1.5;
	background-color: var(--number-background-color);
	border: .05em solid var(--number-border-color);
	border-radius: .5em;
	color: var(--number-text-color);
}

.bigNumber {
	/* position: relative; */
	display: inline-block;
	box-sizing: border-box;
	padding: .25em;
	line-height: 1;
	background-color: var(--number-background-color);
	border: .05em solid var(--number-border-color);
	border-radius: .5em;
	color: var(--number-text-color);
}

.blueNumber {
	--number-background-color: hsl(240, 60%, 95%);
	--number-border-color: hsl(240, 60%, 80%);
	--number-text-color: hsl(240, 60%, 60%);
	--number-shadow-color: hsla(240, 60%, 70%, 20%);
}

.yellowNumber {
	--number-background-color: hsl(45, 60%, 95%);
	--number-border-color: hsl(45, 60%, 80%);
	--number-text-color: hsl(45, 60%, 60%);
	--number-shadow-color: hsla(45, 60%, 70%, 20%);
}

.orangeNumber {
	--number-background-color: hsl(30, 60%, 95%);
	  --number-border-color: hsl(30, 60%, 80%);
	  --number-text-color: hsl(30, 60%, 60%);
	  --number-shadow-color: hsla(30, 60%, 70%, 20%);
}

.redNumber {
	--number-background-color: hsl(0, 60%, 95%);
	--number-border-color: hsl(0, 60%, 80%);
	--number-text-color: hsl(0, 60%, 60%);
	--number-shadow-color: hsla(0, 60%, 70%, 20%);
}

.grayNumber {
	--number-background-color: hsl(0, 0%, 95%);
	--number-border-color: hsl(0, 0%, 70%);
	--number-text-color: hsl(0, 0%, 40%);
	--number-shadow-color: hsla(0, 0%, 70%, 20%);
}

.footnote {
	display: none;
	box-sizing: border-box;
	padding: .35em;
	line-height: 1;
	background-color: var(--number-background-color);
	border: .05em solid var(--number-border-color);
	border-radius: .5em;
	color: var(--number-text-color);
	box-shadow: 0 0 .25em .35em var(--number-shadow-color);
	max-width: calc(95vw - 2rem);
	position: absolute;
	right: 0;
	bottom: -1.2em;
	z-index: 1;
}

@media (any-hover: hover) {
	.bigNumber:hover .footnote {
		display: block;
	}
}

@media screen and (max-height: 65vw) {
	.footnote {
		position: fixed;
		right: 2rem;
		bottom: 2rem;
	}
}

.signature {
	color: hsl(0, 0%, 50%);
	line-height: 1;
	font-size: max(min(2rem, 3.5vw), 1.2rem);
}