*,
*::after,
*::before {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

/* This code effectively outlines the ICB */
html {
	outline: 10px dashed red;
	outline-offset: -10px;
}

body {
	background-color: aliceblue;
    background-image:
		linear-gradient(to right, rgb(0 0 0 / 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgb(0 0 0 / 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
	height: 300%; /* Add some scroll estate */
	position: relative;
}
/* Element that goes vertically and indicates the start and end of each 100% block */
.heightdebugger {
	position: absolute;
	top: 0;
	left: calc(50% - 1em);
	bottom: 0;
	width: 2em;
	background: cyan;
	background-image:
		linear-gradient(to bottom, darkmagenta 10px, transparent 1px),
		linear-gradient(to top, slateblue 10px, transparent 1px);
	background-size: 100% calc(100% / 3);
	z-index: -1;
}

/* To prevent auto-zoom on iOS */
input {
	font-size: 16px;
}

#debug,
#visualviewport,
#layoutviewport {    
	padding: 1em;
	overflow-y: hidden;
	pointer-events: none;
}

[id$="-values"] {
	margin-bottom: 1em;
	white-space: pre-wrap;
	font-family: monospace;
}

#layoutviewport {
	position: fixed;
	inset: 0;
	border: 5px dotted blue;
	z-index: 999;
}

#debug,
[data-vv-positioning="absolute"] #visualviewport {
	position: absolute;
	top: var(--vvpt, 0px);
	left: var(--vvpl, 0px);
	width: var(--vvw, 100%);
	height: var(--vvh, 100vh);
	font-size: calc(1em / var(--vvz, 1));
}

[data-vv-positioning="fixed"] #visualviewport {
	position: fixed;
	top: var(--vvot, 0px);
	left: var(--vvol, 0px);
	width: var(--vvw, 100%);
	height: var(--vvh, 100v);
	right: var(--vvol, 0px) + var(--vvw, 0px);
	bottom: var(--vvol, 0px) + var(--vvh, 0px);
}

#visualviewport {
	border: 8px solid;
	border-image: repeating-linear-gradient(
		45deg,
		orange,
		orange 10px,
		transparent 10px,
		transparent 20px
		)
		10;
}

#inputwrapper {
	position: absolute;
	right: 10vw;
	top: 20vh;
	z-index: 999;
	opacity: 0.5;
}

/* Tweak Lists */
ul, ol {
	margin-block-start: 1em;
	margin-block-end: 1em;
	padding-inline-start: 2em;
}

li {
	margin-block-end: 0.2em;
}

/* The Options Box */
#options[open] {
	padding: 1em;
	background-color: white;
	border-radius: 1em;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	max-width: 80ch;
}

#options[open]::backdrop {
	backdrop-filter: blur(0.5em);
}

#options header {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
}

#options header > * {
	margin: 0;
}

#options section {
	display: flex;
	flex-direction: column;
	width: 100%;
	justify-content: flex-start;
	overflow-y: scroll;
}

#options :is(h1, h2, h3, h4, h5, h6) {
	margin: 0;
}

#options section > p {
	margin: 1em 0 0.25em 0;
}

.option {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.option :is(input[type="checkbox"], input[type="radio"]) {
	width: 2em;
	height: 2em;
}

:disabled + label {
	text-decoration: line-through;
	cursor: not-allowed;
	user-select: none;
}

#btnOptions {
	position: fixed;
	right: 1em;
	top: 1em;
}

.hidden {
	display: none !important;
}