:root{
	margin-block-start: 0%;
	margin-block-end: 0%;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	--safe-top: env(safe-area-inset-top, 0px);
	--safe-right: env(safe-area-inset-right, 0px);
	--safe-bottom: env(safe-area-inset-bottom, 0px);
	--safe-left: env(safe-area-inset-left, 0px);
	--safe-inline: max(var(--safe-left), var(--safe-right));
}

/* Hide scrollbars but keep scrolling. */
:root { scrollbar-width: none; }

html::-webkit-scrollbar { display: none; }

/* SAFE AREA HACK to hide main content behind device  */
/* decorations and rounded corners */
body::before {
	content: "";
	position: fixed;
	left: 0;
	top: 0;
	width: var(--safe-left);
	height: 100svh;
	background-color: var(--bg-color-site);
	pointer-events: none;
	z-index: 1200;
}

html, body {
	/* height: 100svh; */
	scroll-behavior: smooth;
	scroll-padding: 0;
	overflow-x: hidden;
	overflow-y: hidden;
	touch-action: pan-y pinch-zoom;
	/* background-color: rgba(255, 0, 0, 0.107); */
	margin: 0px;}

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

ul, ol {margin: 0px;}

ul, ol [role="list"] {list-style: none;}

li {list-style-type: none;}


body,h1,h2,h3,h4,h5,p,figure,picture {margin: 0;}
h1,h2,h3,h4,h5 {text-wrap: balance}

img {
	vertical-align: middle;
	background-repeat: no-repeat;
	object-fit: cover;	  /* Prevents images from being distorted when their aspect ratio doesn't match the container. */
	shape-margin: 2em;    /* Prevents text from touching the edges of an image. */
	font-style: italic; }  /* dsisplays alt text in italics if image is missing  */

input, button, textarea, select {font: inherit;}

section {display: block; 
	/* height: fit-content; */
}

hr {box-sizing: content-box; height: 0; overflow: visible;}

pre {font-family: monospace; font-size: 1rem;}

abbr[title] {border-bottom: none; text-decoration: underline dotted;}

b,strong {font-weight: bolder;}

code, kbd, samp {
	font-family: "fira code", courier , monospace;
	font-size: 1rem;}

small {font-size: .5rem;}

sub, sup {
	font-size: .9ch;
	line-height: 0;
	position: relative;
	vertical-align: baseline;}

sub {bottom: -0.25ch;}

sup {bottom: 1.3ch; padding-left: 0.3ch;}

/* ====== FORMS ====== */

button, input, optgroup, select, textarea {
	font-family: inherit;
	font-size: inherit;}

/* Remove text transform inheritance */
button, select {text-transform: none;}

/* Correct the inability to style clickable types in iOS and Safari.  */
button,
	[type="button"],
	[type="reset"],
	[type="submit"] {-webkit-appearance: button; appearance: button;}

video, picture, svg {display: block;}
	
/* Correct padding in Firefox.  */
fieldset {padding: 0.35em 0.75em 0.625em;}

/*	Correct vertical alignment in Chrome, Firefox, and Opera browsers.  */
progress {vertical-align: baseline;}

/* Remove default vertical scrollbar in 10+. */
textarea {overflow: auto;}

/* Correct cursor style of increment and decrement buttons in Chrome.  */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {height: auto;}

/* Correct odd appearance in Chrome, Safari.
   Correct outline style in Safari.  */
[type="search"] {-webkit-appearance: textfield; appearance: textfield;}

/* Remove the inner padding in Chrome and Safari on macOS.  */
[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}

/* Correct inability to style clickable types in iOS and Safari. 
	Change font properties to `inherit` in Safari.  */
::-webkit-file-upload-button {-webkit-appearance: button; font: inherit;}

/* Add the correct display in Edge, IE 10+, and Firefox.  */
details {display: block;}

/* Add correct display in all browsers.  */
summary {display: list-item;}

/* ===== ARIA ===== */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;}

/* ===== @MEDIA =====  */

@media (any-pointer: fine) {
  input[type="button"] {
    width: 15px;
    height: 15px;
    border-width: 2px;
    border-color: rgb(88, 88, 227);}}

@media (any-pointer: coarse) {
  input[type="button"] {
    width: 30px;
    height: 30px;
    border-width: 2px;
    border-color: red;}}

/* Hide visually and from screen readers, but maintain layout.*/
.invisible {visibility: hidden;}