html, body, #app {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	height: 100%;
}

html, body {
	overscroll-behavior: none;
	overflow: hidden;
	position: fixed;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

#app {
	display: flex;
	flex-direction: column;
}

#page {
	display: flex;
	flex-direction: column;
	overflow: auto;

	height: 0;
	min-height: 100%;

	> *
	{
		flex-shrink: 0;
	}
}

.content {
	padding-top: 1.1rem;
}

.container-inline-size {
	container-type: inline-size;
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}

.h-100-fixed {
	height: 0;
	min-height: 100%;
}

.w-100-fixed {
	width: 0;
	min-width: 100%;
}

.w-fit {
	width: fit-content;
}

.h-fit {
	height: fit-content;
}


.rotate-90 {
	transform: rotate(90deg);
}
.rotate-180 {
	transform: rotate(180deg);
}
.rotate-270 {
	transform: rotate(270deg);
}
.flip {
	transform: scaleX(-1);
}

.outline
{
	border: 1px solid red!important;
}

.overlay {
	position: fixed;
	
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

	z-index: 100000;
}

.page-padded
{
	display: flex;
	flex-direction: column;
	padding: 1rem;
	gap: 0.5rem;
}

.page-content-thin
{
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-self: center;

	max-width: 100%;
	width: calc(300px + 20%);
}

.page-content-medium
{
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-self: center;

	max-width: 100%;
	width: calc(400px + 25%);
}

.d-contents
{
	display: contents;
}