html, body {
	background: #eee;
	color: #111;
	font-size: 16px;
	font-family: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
	font-weight: normal;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
}

h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; padding: 0; }
h1 { font-size: 3em; }
h2 { font-size: 2.25em; }
h3 { font-size: 1.75em; }
h4 { font-size: 1.5em; }
h5 { font-size: 1.251em; }

.main-widget {
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	font-size: 2em;
}

.main-widget .meter-widget {
	width: calc(min(65vh, 65vw));
	height: calc(min(65vh, 65vw));
}

.meter-widget {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items:center;
	
	width: calc(min(50vh, 50vw));
	height: calc(min(50vh, 50vw));
	box-sizing: border-box;
	
	clip-path: circle();
	background:
		radial-gradient(circle at 50% 50%, #eee 0%, #eee 60%, transparent 60.3%),
		conic-gradient(from 225deg, #070 calc(var(--value) * 2.7deg), #e10 calc(var(--value) * 2.7deg), #e10 270deg, transparent 270deg);
}

.linear-widget {
	display: flex;
	align-items: center;
	--width: 30vw;
	padding-left: calc(var(--width));
	box-sizing: border-box;
	height: 2em;
	background: linear-gradient(to right, #070, #070 calc(var(--value) * var(--width) * 0.01), #e10 calc(var(--value) * var(--width) * 0.01), #e10 var(--width), transparent var(--width));
}

.linear-widget:before {
	counter-reset: value var(--value);
	content: counter(value) '%';
	padding: 0 1em;
	text-align: right;
	font-size: 1.5em;
	font-weight: bold;
}

.linear-widget:after {
	font-size: 1.25em;
	text-overflow: ellipsis;
	text-wrap: nowrap;
	overflow: hidden;
}

.meter-widget:before {
	counter-reset: value var(--value);
	margin: 0;
	padding: 0;
	font-size: calc(min(50vh, 50vw) / 12);
	content: counter(value) '% Believability';
}

.main-widget .meter-widget:after {
	counter-reset: article-count var(--article-count);
	margin: 0;
	padding: 0;
	font-size: calc(min(50vh, 50vw) / 20);
	content: 'Out of ' counter(article-count) ' articles analyzed';
}

.recent10 .meter-widget:after {
	counter-reset: article-count var(--article-count);
	margin: 0;
	padding: 0 2em;
	font-size: calc(min(50vh, 50vw) / 20);
	text-align: center;
}

.recent10 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.recent10 .meter-widget {
	margin: calc(min(5vh, 5vw));
}

.recent10:has(.linear-widget) {
	min-height: 100vh;
	box-sizing: border-box;
	padding: 5vh 5vw;
	grid-auto-rows: min-content;
	display: grid;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	row-gap: 0.25em;
	grid-template-columns: 1fr 5fr;
}

.recent10:has(.linear-widget):before {
	font-size: 2em;
	content: 'Recent Onion Articles';
	font-weight: bold;
	margin-bottom: 1em;
	grid-column: 1/-1;
	text-align: center;
}

.recent10 .linear-widget {
	width: 90vw;
	display: grid;
	grid-template-columns: subgrid;
	grid-column: 1/-1;
}


.widget.linear-widget:has(.description) {
  grid-row: span 2;
  height: auto;
}

.widget.linear-widget:has(.description)::before { grid-row:span 2; grid-column:1; }
.widget.linear-widget:has(.description)::after { grid-row:1; grid-column:2; }

.widget.linear-widget .description { grid-column: 2/-1; background-color: #eee; }

.widget.linear-widget .description::before { display: block; font-style: italic; color: #444; }
.widget.linear-widget .description::after { display: none; }