html {
	--banner-height: 6px;
	--masthead-height: 2.0rem;
	--frame-height: calc(100vh - var(--banner-height) - var(--masthead-height) );
	--min-frame-width: 600px;
	--max-wide-gutters-width: 1300px;
	--vertical-title-width: 30px;
	--dashboard-width: calc(100% - var(--vertical-title-width));
	--feedback-section-height: 100px;
	--top-line-height: 6px;
	--user-section-height: calc(100% - var(--feedback-section-height) - var(--top-line-height));
	--sans-serif-font: Source Sans Pro, sans-serif;
	--button-area-height: 46px;
	--table-area-width: 300px;
	--table-area-height: calc(100% - var(--button-area-height));
}
html {
	background-color: var(--background-color);
}
thematic-earth {
    --menu-background-color1: var(--black);
    --menu-background-color2: var(--light-black);
    --menu-background-color3: var(--black);
    --menu-background-color4: var(--medium-black);
}

html {
	font-size: 12pt;
	color: var(--white);
	font-family: var(--sans-serif-font);
}
div {
	box-sizing: border-box;
}

/* shrink the table size */
@media only screen and (max-width: 900px) {
	html {
		--table-area-width: 220px;
	}
	#metrics-table,
	#countries-table {
		font-size: 10pt;
	}
	button.blue-button {
		font-size: 0.7rem;
	}
}

/* hide the two vertical title strips */
@media only screen and (max-width: 800px) {
	html {
		--dashboard-width: 100%;
		--vertical-title-width: 0;
	}
	#user-section {
		left: 0;
	}
	#left-title-area,
	#right-title-area {
		display: none;
	}
}

/* shrink the table size more */
@media only screen and (max-width: 700px) {
	html {
		--table-area-width: 160px;
		--button-area-height: 66px;
	}
	#metrics-table,
	#countries-table {
		font-size: 8pt;
	}
	button.blue-button {
		font-size: 0.6rem;
	}
}