@font-face {
	font-family: "IBM Plex Mono Thin";
	src: url("../fonts/IBMPlexMono-Thin.woff2") format("woff2"),
		url("../fonts/IBMPlexMono-Thin.woff") format("woff");
	font-weight: 200;
	font-style: normal;
}

@font-face {
	font-family: "IBM Plex Mono Light";
	src: url("../fonts/IBMPlexMono-Light.woff2") format("woff2"),
		url("../fonts/IBMPlexMono-Light.woff") format("woff");
	font-weight: 200;
	font-style: normal;
}

@font-face {
	font-family: "IBM Plex Mono SemiBold";
	src: url("../fonts/IBMPlexMono-SemiBold.woff2") format("woff2"),
		url("../fonts/IBMPlexMono-SemiBold.woff") format("woff");
	font-weight: 400;
	font-style: normal;
}

::selection {
	color: #000;
	background: transparent;
}

::-moz-selection {
	color: #000;
	background: transparent;
}

body {
	font-family: 'IBM Plex Mono Light', ui-monospace, monospace;
	font-size: 16px;
	line-height: 1.6;
	color: #262626;
	background-color: #000000;
	margin: 0px;
	overflow: hidden;
	hyphens: auto;
}

a,
a:focus,
a:visited {
	color: #fff;
	text-decoration: none;
}

a:active {
	opacity: 0.8;
}

a:hover {
	text-decoration: none;
}

h1 {
	font-family: 'IBM Plex Mono Thin', ui-monospace, monospace;
	font-size: 96px;
	line-height: 67px;
	color: #fff;
	-webkit-transition: color 1.25s ease-in-out;
	transition: color 1.25s ease-in-out;
	margin-left: -6px;
}

strong {
	color: #000000;
}

.colored {
	/*color: #8CA4C3;*/
	color: #000 !important;
}

.hyphens-EN {
-webkit-hyphens: auto;
-webkit-hyphenate-limit-before: 3;
-webkit-hyphenate-limit-after: 3;
-webkit-hyphenate-limit-chars: 6 3 3;
-webkit-hyphenate-limit-lines: 2;
-webkit-hyphenate-limit-last: always;
-webkit-hyphenate-limit-zone: 8%;
-moz-hyphens: auto;
-moz-hyphenate-limit-chars: 6 3 3;
-moz-hyphenate-limit-lines: 2;
-moz-hyphenate-limit-last: always;
-moz-hyphenate-limit-zone: 8%;
-ms-hyphens: auto;
-ms-hyphenate-limit-chars: 6 3 3;
-ms-hyphenate-limit-lines: 2;
-ms-hyphenate-limit-last: always;
-ms-hyphenate-limit-zone: 8%;
hyphens: auto;
hyphenate-limit-chars: 6 3 3;
hyphenate-limit-lines: 2;
hyphenate-limit-last: always;
hyphenate-limit-zone: 8%;
}

#loading_overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 99;
	background-color: #000000;
	opacity: 1;
}

#loading_overlay span {
	position: absolute;
	width: 180px;
	height: 180px;
	top: 50%;
	right: 50%;
	margin-top: -90px;
	margin-right: -90px;
}

#info_container {
	position: fixed;
	left: 0;
	top: 0;
	margin: 0;
	padding: 3vw;
	z-index: 3;
	color: #fff;
	font-family: 'IBM Plex Mono Light', ui-monospace, monospace;
	text-align: left;
	font-size: 16px;
	width: 100%;
	box-sizing: border-box;
	height: 100%;
}

#info_container span {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 3vw;
	color: #fff;
	-webkit-transition: color 1.25s ease-in-out;
	transition: color 1.25s ease-in-out;
}

.menu_container {
	border-radius: 2px;
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 3vw;
	z-index: 3;
}

.menu_container a {
	float: left;
	padding: 0 12px;
	font-size: 16px;
	margin-left: 0px;
	-webkit-transition: color 1.25s ease-in-out, transform 0.5s ease-in-out;
	transition: color 1.25s ease-in-out, transform 0.5s ease-in-out;
}

.menu_container a:first-child {
	padding-left: 0px;
}

.menu_container a:last-child {
	padding-right: 0px;
}

.menu_container a i {
	position: relative;
	display: inline-block;
	transform: translateY(-2px);
}

.menu_container a:last-child i {
	transform: translateY(0px);
}

.menu_container i:before {
	-webkit-transition: transform 0.5s ease-out;
	transition: transform 0.5s ease-out;
}

.menu_container a:hover>i:before {
	transform: translateY(-3px) translateX(-3px) rotate(-7deg) scale(1.15);
}

.menu_container a:hover>i.flip:before {
	transform: translateY(-3px) translateX(-3px) rotate(7deg) scale(1.15, -1.15);
}

.menu_container a>i.flip:before {
	transform: scaleY(-1.0);
}


/*
.menu_container a:hover {
	padding: 6px 16px;
}
*/

/* slider */
.slides_container {
	opacity: 1;
	-webkit-transition: all 1.5s ease-out;
	transition: all 1.5s ease-out;
}

.inactive {
	opacity: 0.15;
	transform: scale(0.85);
}

.slick-list {
	height: 100vh;
}

.slick-slide {
	height: 100vh;
	background-position: center;
	background-size: cover;
}

.slider_progress {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 6px;
	background: #eee;
	margin: 0 auto;
	z-index: 2;
}

.slider_progress .progress {
	width: 0%;
	height: 3px;
	background: #8CA4C3;
}

.slider_progress .indicator {
	position: absolute;
	left: 0;
	bottom: 12px;
	width: 8px;
	height: 8px;
	background-color: #fff;
	border-radius: 50%;
}

#magic_container {
	position: fixed;
	width: 100vw;
	height: 100vh;
	z-index: 2;
	left: 0;
	top: 0;
	background: url(../img/mariro_portrait.png) no-repeat;
	background-size: cover;
	background-position: top right;
	background-color: #8CA4C3;
	/*background-color: #4f64dc;*/
	background-blend-mode: screen;
}

#magic_container p {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	padding: 0 25vw;
	color: #ffffff;
	font-family: 'IBM Plex Mono SemiBold';
	font-size: clamp(1.188rem, 0.45vw + 1rem, 2.25rem);
	line-height: 1.33;
	text-align: justify;
	hyphens: auto;
	word-break: auto-phrase;
	white-space-collapse: break-spaces;
	transition: all 1s ease-in-out;
}

.scene {
	position: absolute;
	width: 100vw;
	height: 100vh;
	left: 0;
	top: 0;
	mix-blend-mode: hard-light;
}

#cursor {
  user-select: none;
  pointer-events: none;
  z-index: 10000;
  position: fixed;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #fff;
  transition: transform .3s, mix-blend-mode .3s;
}

#cursor.active {
  mix-blend-mode: difference;
  transform: scale(4);
}

@media screen and (max-width:720px) {
	#magic_container {
		background-position: top center;
	}

	#magic_container p {
		padding: 12vw;
		word-break: break-word;
	}

	h1 {
		font-size: 52px;
		line-height: 36px;
	}

	#info_container {
		padding: 8vw;
	}

	#info_container span {
		padding: 8vw;
	}

	.menu_container{
		padding: 8vw;
	}
}

@media screen and (max-width:450px) {
	h1.colored {
		color: transparent !important;
	}

	#info_container span {
		left: unset;
		bottom: unset;
		right: 0;
		top: 0;
		padding: 8vw;
	}

	#magic_container p {
		font-size: 16px;
		padding: 8vw;
	}
}

.spinner {
	height: 180px;
	width: 180px;
	position: relative;
	animation: rotation 2s infinite linear;
	border-top: 6px solid #ffffff;
	border-radius: 100%;
}

@-webkit-keyframes rotation {
	from {
		-webkit-transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(359deg);
	}
}

@-moz-keyframes rotation {
	from {
		-moz-transform: rotate(0deg);
	}

	to {
		-moz-transform: rotate(359deg);
	}
}

@-o-keyframes rotation {
	from {
		-o-transform: rotate(0deg);
	}

	to {
		-o-transform: rotate(359deg);
	}
}

@keyframes rotation {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(359deg);
	}
}