html, body
{
	position: fixed;

	height: 100%;
	width: 100%;

	font-family: "Figtree", sans-serif;
}

canvas
{
	position: absolute;

	height: 100%;
	width: 100%;

	image-rendering: pixelated;

	touch-action: none;
}

#footer
{
	position: absolute;

	width: 100%;
	height: max(10%, 130px);

	bottom: 0;

	pointer-events: none;
}

#place
{
	min-width: 180px;
	min-height: 60px;

	margin: 0 max(2.5%, 40px);
	padding: 7px 10px;
	line-height: 1.5;

	flex-direction: column;
}

#explain,
#more
{
	width: 50px;
	height: 50px;
}

#picker
{
	position: absolute;

	width: 100%;

	bottom: 0;

	transition: transform 0.2s ease;
}

#picker.lowered
{
	transform: translateY(100%);
}

/* This is needed to catch clicks on the backdrop */
.modal
{
	width: min(80vw, 400px);

	padding: 20px 30px;
}

.modal .close, .modal .back, .modal .about
{
	position: absolute;

	height: 40px;
	width: 40px;

	top: -3px;
}

.modal .close
{
	right: -3px;
}

.modal .back, .modal .about
{
	left: -3px;
}

.modal .close:focus
{
	outline: none;
}

.modal > .title
{
	margin: 20px 0;
	
	font-weight: 500;
}

.modal > .low.title
{
	margin: 30px 0 20px 0;
}

.modal > .option
{
	height: 60px;

	margin-bottom: 10px;

	justify-content: start;
}

.modal .option > *
{
	margin-left: 15px;
}

.modal .option > .toggle
{
	margin-left: auto;
	margin-right: 15px;
}

.modal .option > .block
{
	min-width: 55px;
	min-height: 55px;

	margin-left: 0;

	user-select: none;
}

.modal .text
{
	padding: 0 16px;

	background-color: #f4f4f4;
}

.modal .input
{
	width: 100%;

	border: none;
	border-bottom: 3px solid #8d8d8d;
}

.modal .input:hover
{
	background: #ececec;
}

.modal .input:focus
{
	outline: none;
}

#help .option:not(:last-child), #information .option:not(:last-child), #loginpopup .option:not(:last-child)
{
	margin-bottom: 20px;
}

#letsgo, #command, #closethis, #loginnow
{
	justify-content: center;
}

#placer
{
	transition: opacity 0.2s ease;
}

.tooltip
{
	position: absolute;

	padding: 4px 10px;

	/* Centers the tooltip on the bottom arrow */
	transform: translate(-50%, -130%);

	pointer-events: none;
}

.tooltip::after
{
	position: inherit;

	height: 15px;
	width: 15px;

	top: 100%;
	left: 50%;

	transform: translate(-50%, -36%) rotate(45deg);

	background: inherit;
	border-bottom: inherit;
	border-right: inherit;

	content: "";
}