body {
	--main-color: #555;
	--bg-color: #fff;
	--link-color: color-mix(in lch, var(--main-color), #0009);
	--link-hover-color: color-mix(in lch, var(--main-color), #0005);
}

body {font-family: Cantarell, Arial, sans-serif; background-color: var(--bg-color); font-size: 18px;}

:is(h1, h2, h3, h4, p) {margin: 10px 0;}

header, footer {max-width: 400px; text-align: center; margin: 36px auto;}

header {
	h1, h2, p {margin: 0px 0;}
	h1 {font-size: 20px;}
	h2 {font-size: 60px; font-weight: 900;}
}

footer {
	p {margin: 10px 0; text-wrap: balance;}
	.gray {color: #0009;}
}

a {
	& {color: var(--link-color);}
	&:hover {color: var(--link-hover-color);}
}

.card {
	& {max-width: 400px; margin: 10px auto; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 3px 0 #0002;}
	.inner {margin: 20px;}
	h4 {color: var(--main-color);}
}

.item {
	& {--bar-mult: 1px; margin: 7px 0; display: grid; grid-template-columns: 1fr max-content 65px; align-items: center; gap: 5px;}
	.num {font-weight: 900; color: var(--main-color); text-align: right;}
	.bar {height: 6px; width: calc(var(--pct) * var(--bar-mult)); background-color: var(--main-color); border-radius: 3px; margin-top: 2px; justify-self: end;}

	&.wind {
		& {grid-template-columns: 1fr 20px max-content 65px;}
		svg {color: var(--main-color); transform: rotateZ(calc(var(--dir) - 90deg)); margin-top: 1px;}
	}

	@media screen and (max-width: 400px) {
		& {--bar-mult: .8px;}
	}
}