html {
	font-size: var(--font-size);
	text-rendering: optimizeLegibility;
	background-color: var(--color-background);
	height: 100%;
}

body {
	font-weight: 500;
	background-color: var(--color-background);
	height: 100%;
	scrollbar-gutter: stable;

	@media (hover: hover) {
		overflow-y: scroll;
	}
}

body.no-scroll {
	overflow: hidden;
	padding-right: var(--scrollbar-width);
}


.pin-spacer {
  pointer-events: none;
}

.pin-spacer > * {
  pointer-events: auto;
}

.page-content {
	width: 100%;
	padding: 0 var(--sg);
	margin: 0 auto;
	margin-top: var(--2xlg);

	@media (min-width: 900px) {
		padding: 0 var(--mg);
	}
}

.page-content section {
	margin-bottom: var(--lg);
}

.page-content ul {
	margin-left: var(--m);
}

.page-content li,
.page-content p,
.page-content h5,
.page-content h6 {
	margin-bottom: var(--xxsg);
}


.control-panel-global {
	background-color: var(--color-background-translucent);
  backdrop-filter: blur(8px) saturate(32);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-tailwind);
}

@media (min-width:1200px) {
	.page-content {
		width: 60%;
		margin: 0 auto;
		margin-top: var(--3xlg);
	}
}

img {
	max-inline-size: 100%;
	max-block-size: 100%;
}

button {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
}

iconify-icon {
	opacity: 0.99;
	image-rendering: crisp-edges;
}

/* UI */
.no-select {
	-webkit-touch-callout: none;
	/* iOS Safari */
	-webkit-user-select: none;
	/* Safari */
	-khtml-user-select: none;
	/* Konqueror HTML */
	-moz-user-select: none;
	/* Old versions of Firefox */
	-ms-user-select: none;
	/* Internet Explorer/Edge */
	user-select: none;
	/* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}