@charset "UTF-8";
/** @author ivanmoreno @ivanmoreno_xyz **/

@font-face {
    font-family: 'archiamedium';
    /* src: url('archia-medium-webfont.eot');
    src: url('archia-medium-webfont.eot?#iefix') format('embedded-opentype'), */
    src: url('./fonts/archia-regular-webfont.woff2') format('woff2'),
         url('./fonts/archia-medium-webfont.woff') format('woff'),
         url('./fonts/archia-medium-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

:root {
	--title-text-color: #707070;
	--color-0: #60a7bd;
	--color-1: #a1602b;
	--color-2: #3b5278;
	--text-color: #ffffff;
	--main-bg-color: #030303;
}

html, body {
	margin: 0;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	touch-action: none;
	-ms-touch-action: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	position: fixed;
    background: #363b40;
	/* background: #3E1E68; */
	/* background-image: linear-gradient( to bottom right, #3A6073, #16222A ); */
	font-family: 'Abel', sans-serif;
}

#wrapper {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	top: 0px;
	left: 0px;
	background-color: #000;
}

#viewport3d {

	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	right: 0px;

}

#progressBG {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 15;
	opacity: 1.0;
	background-color: var(--main-bg-color);
	display: block;
}

#progress {
	position: relative;
	z-index: 16;
}

#progress img {
	position: absolute;
	z-index: 17;
}

.loading {
	position: fixed;
	z-index: 1001;
	top: 50%;
	left: 50%;
	-webkit-transform: translate( -50%, -50% );
	-moz-transform: translate( -50%, -50% );
	-ms-transform: translate( -50%, -50% );
	-o-transform: translate( -50%, -50% );
	transform: translate( -50%, -50% );
	/* opacity: 0.0; */
	display: block;
}


.title {
	position: absolute;
	color: #aaaaaa;
	top: 50%;
	left: 50%;
	-webkit-transform: translate( -50%, -50% );
	-moz-transform: translate( -50%, -50% );
	-ms-transform: translate( -50%, -50% );
	-o-transform: translate( -50%, -50% );
	transform: translate( -50%, -50% );
	text-align: center;
	font-size: 1.1em;
}

/* .chapter {
	position: absolute;
	color: #aaaaaa;
	top: 53.5%;
	left: 50%;
	-webkit-transform: translate( -50%, -50% );
	-moz-transform: translate( -50%, -50% );
	-ms-transform: translate( -50%, -50% );
	-o-transform: translate( -50%, -50% );
	transform: translate( -50%, -50% );
	text-align: center;
	font-size: 2.2em;
} */

.gui-container {
	width: 320px;
	height: 100vh;
	background-color: #fefefe;
	position: fixed;
	left: 0%;
	top: 0%;
}

.logo-container {
	background-image: url('./assets/astrait/gui/220530_ASTRAIT_Logo_SZ_light.jpg');
	width: 280px;
	height: 99px;
	position: relative;
	left: 20px;
	top: 30px;
}


.background {
    width: 100vw;
    height: 100vh;
    background: #363b40;
    /* background-image: linear-gradient( to bottom right, #3A6073, #16222A ); */
}

.svgLoader {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(1);
            transform: translate(-50%, -50%) rotate(45deg) scale(1);
}

.stroke-still {
    stroke: #232323;
}

.stroke-animation {
    -webkit-animation: stroke-spacing 1.2s ease-in, stroke-color 4.8s linear;
            animation: stroke-spacing 1.2s ease-in, stroke-color 4.8s linear;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-delay: 0;
            animation-delay: 0;
    -webkit-animation-direction: normal;
            animation-direction: normal;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-play-state: running;
            animation-play-state: running;
    -webkit-transform-origin: center center;
            transform-origin: center center;
}

@-webkit-keyframes stroke-spacing {
    0% {
        stroke-dasharray: 0 200;
    }
    45% {
        stroke-dashoffset: 0;
        stroke-dasharray: 200 200;
    }
    90% {
        stroke-dashoffset: -200;
        stroke-dasharray: 200 200;
    }
    100% {
        stroke-dashoffset: -200;
        stroke-dasharray: 200 200;
    }
}

@keyframes stroke-spacing {
    0% {
        stroke-dasharray: 0 200;
    }
    45% {
        stroke-dashoffset: 0;
        stroke-dasharray: 200 200;
    }
    90% {
        stroke-dashoffset: -200;
        stroke-dasharray: 200 200;
    }
    100% {
        stroke-dashoffset: -200;
        stroke-dasharray: 200 200;
    }
}

@-webkit-keyframes stroke-color {
    0%  { stroke: #ff0000; }
    24% { stroke: #06ff02; }
    25% { stroke: #0d00ff; }
    49% { stroke: #ffffff; }
    50% { stroke: #ff0000; }
    74% { stroke: #06ff02; }
    75% { stroke: #0d00ff; }
    99% { stroke: #ffffff; }
}

@keyframes stroke-color {
    0%  { stroke: #ff0000; }
    24% { stroke: #06ff02; }
    25% { stroke: #0d00ff; }
    49% { stroke: #ffffff; }
    50% { stroke: #ff0000; }
    74% { stroke: #06ff02; }
    75% { stroke: #0d00ff; }
    99% { stroke: #ffffff; }
}

/* @-webkit-keyframes stroke-color {
    0%  { stroke: #3498DB; }
    24% { stroke: #643232; }
    25% { stroke: #327864; }
    49% { stroke: #327864; }
    50% { stroke: #32326e; }
    74% { stroke: #32326e; }
    75% { stroke: #78325a; }
    99% { stroke: #78325a; }
}

@keyframes stroke-color {
    0%  { stroke: #3498DB; }
    24% { stroke: #643232; }
    25% { stroke: #327864; }
    49% { stroke: #327864; }
    50% { stroke: #32326e; }
    74% { stroke: #32326e; }
    75% { stroke: #78325a; }
    99% { stroke: #78325a; }
} */

/*
	 Astrait loading animation from here till the bottom
*/

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
body {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #030303;
}
.svg-a {
	display: none;
}
.blobs {
	filter: url(#goo);
	width: 300px;
	height: 300px;
	position: relative;
	overflow: hidden;
	border-radius: 70px;
	transform-style: preserve-3d;
}
.blobs .blob-center {
	transform-style: preserve-3d;
	position: absolute;
	background: #d1d1d1;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 30px;
	transform-origin: left top;
	transform: scale(0.9) translate(-50%, -50%);
	animation: blob-grow linear 3.4s infinite;
	border-radius: 50%;
	box-shadow: 0 -10px 40px -5px #d1d1d1;
}
.blob {
	position: absolute;
	background: #d1d1d1;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	animation: blobs ease-out 3.4s infinite;
	transform: scale(0.9) translate(-50%, -50%);
	transform-origin: center top;
	opacity: 0;
}
.blob:nth-child(1) {
	animation-delay: 0.2s;
}
.blob:nth-child(2) {
	animation-delay: 0.4s;
}
.blob:nth-child(3) {
	animation-delay: 0.6s;
}
.blob:nth-child(4) {
	animation-delay: 0.8s;
}
.blob:nth-child(5) {
	animation-delay: 1s;
}
@keyframes blobs {
	0% {
		opacity: 0;
		transform: scale(0) translate(calc(-330px - 50%), -50%);
   }
	1% {
		opacity: 1;
   }
	35%, 65% {
		opacity: 1;
		transform: scale(0.9) translate(-50%, -50%);
   }
	99% {
		opacity: 1;
   }
	100% {
		opacity: 0;
		transform: scale(0) translate(calc(330px - 50%), -50%);
   }
}
@keyframes blob-grow {
	0%, 39% {
		transform: scale(0) translate(-50%, -50%);
   }
	40%, 42% {
		transform: scale(1, 0.9) translate(-50%, -50%);
   }
	43%, 44% {
		transform: scale(1.2, 1.1) translate(-50%, -50%);
   }
	45%, 46% {
		transform: scale(1.3, 1.2) translate(-50%, -50%);
   }
	47%, 48% {
		transform: scale(1.4, 1.3) translate(-50%, -50%);
   }
	52% {
		transform: scale(1.5, 1.4) translate(-50%, -50%);
   }
	54% {
		transform: scale(1.7, 1.6) translate(-50%, -50%);
   }
	58% {
		transform: scale(1.8, 1.7) translate(-50%, -50%);
   }
	68%, 70% {
		transform: scale(1.7, 1.5) translate(-50%, -50%);
   }
	78% {
		transform: scale(1.6, 1.4) translate(-50%, -50%);
   }
	80%, 81% {
		transform: scale(1.5, 1.4) translate(-50%, -50%);
   }
	82%, 83% {
		transform: scale(1.4, 1.3) translate(-50%, -50%);
   }
	84%, 85% {
		transform: scale(1.3, 1.2) translate(-50%, -50%);
   }
	86%, 87% {
		transform: scale(1.2, 1.1) translate(-50%, -50%);
   }
	90%, 91% {
		transform: scale(1, 0.9) translate(-50%, -50%);
   }
	92%, 100% {
		transform: scale(0) translate(-50%, -50%);
   }
}


@import url("https://fonts.googleapis.com/css2?family=VT323&display=swap");


.center-center {
	position: fixed;
	right: 10px;
	bottom: 10px;
}
[class*="btn-glitch-"] {
	display: inline-block;
	font-family: "VT323", monospace;
	border: 1px solid #ababab;
	color: #ababab;
	padding: 5px 7px;
	margin-left: 5px;
	min-width: 105px;
	line-height: 1.5em;
	white-space: no-wrap;
	text-transform: uppercase;
	cursor: pointer;
}
[class*="btn-glitch-"] .text, [class*="btn-glitch-"] .decoration {
	display: inline-block;
}
[class*="btn-glitch-"] .decoration {
	display: inline-block;
	float: right;
}
[class*="btn-glitch-"]:hover, [class*="btn-glitch-"]:focus {
	animation-name: glitch;
	animation-duration: 0.2s;
	background-color: rgba(171, 171, 171, 0.7);
	color: black;
	border: 1px solid rgba(171, 171, 171, 0.7);
}
[class*="btn-glitch-"]:hover .text-decoration, [class*="btn-glitch-"]:focus .text-decoration {
	animation-name: blink;
	animation-duration: 0.1s;
	animation-iteration-count: infinite;
}
[class*="btn-glitch-"]:hover .decoration, [class*="btn-glitch-"]:focus .decoration {
	animation-name: blink;
	animation-duration: 0.1s;
	animation-iteration-count: infinite;
}
[class*="btn-glitch-"]:hover :before, [class*="btn-glitch-"]:focus :before {
	content: " ";
	width: 15px;
	border: 1px solid black;
	position: absolute;
	right: 25%;
	bottom: 3px;
	transform: rotate(35deg);
}
[class*="btn-glitch-"]:hover :after, [class*="btn-glitch-"]:focus :after {
	animation-name: shrink;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	content: " ";
	width: 75%;
	border: 1px solid black;
	position: absolute;
	left: 0;
	bottom: 5px;
}
[class*="btn-glitch-"]:active {
	background: none;
	color: rgb(253, 119, 2);
}
[class*="btn-glitch-"]:active .text-decoration {
	animation-name: none;
}
[class*="btn-glitch-"]:active .decoration {
	animation-name: none;
}
[class*="btn-glitch-"]:active :before, [class*="btn-glitch-"]:active :after {
	display: none;
}
@keyframes glitch {
	25% {
		background-color: red;
		transform: translateX(-10px);
		letter-spacing: 0.01em;
   }
	35% {
		background-color: green;
		transform: translate(10px);
   }
	59% {
		opacity: 0;
   }
	60% {
		background-color: blue;
		transform: translate(-10px);
		filter: blur(5px);
   }
	100% {
		background-color: rgb(50, 50, 20);
		blur: 5px;
   }
}
@keyframes blink {
	50% {
		opacity: 0;
   }
}
@keyframes shrink {
	100% {
		width: 10%;
   }
}