@charset "UTF-8";
/* seperate player styles */
@import url('./animate.min.css');
/* https://animate.style/ */

/* https://pictogrammers.github.io/@mdi/font/5.4.55/ */
@font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: url(./fonts/materialdesignicons-webfont.eot); /* For IE6-8 */
	src: local('Material Icons'),
		local('MaterialIcons-Regular'),
		url(./fonts/materialdesignicons-webfont.woff2) format('woff2'),
		url(./fonts/materialdesignicons-webfont.woff) format('woff'),
		url(./fonts/materialdesignicons-webfont.ttf) format('truetype');
}

*, *:after, *:before {
	margin: 0px;
	padding: 0px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/*
	bg color
	https://www.color-hex.com/color-palette/3729

	image
	https://www.vecteezy.com/vector-art/13258789-black-and-white-page-for-the-design-of-the-web-application-error-404-large-numbers-on-the-background-of-a-planet-and-a-ufo-drawing-in-the-style-of-a-doodle
	https://www.vecteezy.com/free-vector/404-space
*/
.page-not-found{
	width: 100%;
	height: 100%;
	font: 1em Tahoma, sans-serif;
	/*background: #ff00ff;*/
	/*background: rgba(250, 250, 250, 1);*/
	background: rgba(13, 15, 16, 1);
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 9999;
}
.page-not-found:before{
	content: '';
	width: 90%;
	height: 100%;
	margin: auto;
	/*background-image: url(./img/404-page-not-found-white.svg);*/
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center bottom;
	background-position: center;

	width: 100%;
	background-image: url(./img/Colefyrez-ataru-404_edit.jpg);
	background-size: cover;

	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	pointer-events: none;
}
/*.page-not-found:after{
	content: '404 Page Not Found!!!';
	font-size: 4em;
	position: absolute;
	left: 2em;
	bottom: 3em;
}*/

.page-not-found nav{
	padding: 20px;
	position: absolute;
	top: 0px;
	left: 0px;
}
.page-not-found nav a{
	color: rgba(255, 255, 255, 1);
	padding: 20px;
	text-decoration-line: none;
	display: inline-block;
}

.isHidden{
	visibility: hidden;
	display: none;
}

[data-loading-text] {
	position: relative;
	color: rgba(0, 0, 0, .3);
}
[data-loading-text]:after {
	content: attr(data-loading-text);
	position: relative
}
[data-loading-text]:before {
	content: attr(data-loading-text);
	position: absolute;
	z-index: 2;
	overflow: hidden;
	max-width: 7em;
	white-space: nowrap;
	color: #fff;
	animation: loading 8s linear infinite;
}
@keyframes loading {
	0% {
		max-width: 0;
	}
}