/******************* ALL DEVICES *******************/

/* Site width */
body {
	max-width: 1000px;
	margin: auto;
}

body > main {
	margin-block: calc(
		var(--pico-block-spacing-vertical) * 1
	); /* Space out header/footer from main content */
}

hgroup {
	margin-bottom: 0px; /* Fix header spacing */
}

body > footer {
	padding-block: calc(var(--pico-block-spacing-vertical) * 2); /* Add more spacing to bottom */
	/* margin-bottom: var(--pico-block-spacing-vertical); */
}

section,
[role="group"] {
	margin-bottom: 0px; /* Remove excessive margin */
}

/* h1 home button styling */
#h1-home {
	--pico-color: var(--pico-h1-color);
	text-decoration: none;
}

/* Logo styling */
#logo {
	max-height: 72px;
}

[data-theme="light"] #logo,
:root:not([data-theme="dark"]) #logo {
	filter: invert(16%) sepia(7%) saturate(1183%) hue-rotate(180deg) brightness(93%) contrast(87%);
}

[data-theme="dark"] #logo,
:root:not([data-theme="light"]) #logo {
	filter: invert(95%) sepia(4%) saturate(82%) hue-rotate(181deg) brightness(102%) contrast(93%);
}

#globe {
	cursor: default;
}

[data-tooltip] {
	border: none !important; /* Don't add dotted line under tooltips */
}

.underline-brush {
	display: inline-block;
	position: relative;
}

.underline-brush svg {
	color: #ff9500;
	position: absolute;
	z-index: -1;
	top: 1.2em;
	left: 0.2em;
	width: calc(100% - 0.7em);
	height: auto;
}

/* New Element - Flex container between */
.flex-between {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* Adjust mark color for range sliders (on light theme only) */
[data-theme="light"] .range-value,
:root:not([data-theme="dark"]) .range-value {
	--pico-mark-background-color: #f2f0ec; /* or #E8E2D2 */
}

/******************* NOT MOBILE DEVICES *******************/

@media (min-width: 768px) {
}

/******************* MOBILE DEVICES *******************/

@media (max-width: 768px) {
	.grid {
		grid-row-gap: 0; /* Fix Pico issue - vertical grid gap incorrect on mobile devices */
	}
}