@font-face {
  font-family: "Roboto";
  src: local("Roboto"), url("fonts/Roboto/Roboto-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto";
  src: local("Roboto"), url("fonts/Roboto/Roboto-Bold.woff2") format("woff2");
  font-weight: bold;
}

@font-face {
  font-family: "Roboto";
  src: local("Roboto"), url("fonts/Roboto/Roboto-Italic.woff2") format("woff2");
  font-style: italic;
}

@font-face {
  font-family: "Noto Color Emoji";
  src: local("Noto Color Emoji"), url("fonts/Noto_Color_Emoji/NotoColorEmoji-Regular.woff2") format("woff2");
}

html, body {
	position: relative;
	width: 100%;
	height: 100%;
  background-color: #333;
  overflow: hidden;
}

body {
  color: #eee;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Color Emoji", Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

a {
	color: #39f;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:visited {
	color: #4ac;
}

label {
	display: block;
}

input, button, select, textarea {
	font-family: inherit;
	font-size: inherit;
	-webkit-padding: 0.4em 0;
	padding: 0.4em;
	margin: 0;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 2px;
}

input:disabled {
	color: #ccc;
}

button {
	color: #333;
	background-color: #f4f4f4;
	outline: none;
}

button:disabled {
	color: #999;
}

button:active {
	background-color: #ddd;
}

button:disabled:active {
	background-color: #f4f4f4;
}

button:focus {
	border-color: #666;
}

.text_button {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	line-height: 1.15;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	cursor: pointer;
}

.text_button:active {
	background: none;
}

.navigation_button {
	display: none;
	padding: 2em;
	color: #fff;
	opacity: 0.5;
	transition: opacity 100ms;

	/* reset default properties (see .text_button) */
	font-family: inherit;
	font-size: inherit;
	line-height: 1.15;
	margin: 0;
	background: none;
	border: none;
	border-radius: 0;
	cursor: pointer;
}

.navigation_button:hover {
	opacity: 1;
	background: linear-gradient(to var(--direction, top), transparent, #3f3f3f);
}

.navigation_button.top {
	--direction: top;
}

.navigation_button.top::before {
	content: '▲';
}

.navigation_button.left {
	--direction: left;
}

.navigation_button.left::before {
	content: '‹';
	font-size: 3em;
}

.navigation_button.right {
	--direction: right;
}

.navigation_button.right::before {
	content: '›';
	font-size: 3em;
}

@media (any-hover: hover) and (pointer: fine) {
	.navigation_button {
		display: initial;
	}
}

.no_scrollbars::-webkit-scrollbar {
	background: transparent;
	width: 0;
	height: 0;
}

.no_scrollbars {
	scrollbar-width: none;
	-ms-overflow-style: none;
}