:root{
	--color-main: #042a3d;
	--color-second: #dab679;
}

html, body{
	padding: 0; margin: 0;
}

body{
	background-color: var(--color-main);
}
.block{
	width: 100%; height: auto;
	background-color: black;
	display: block;
	position: relative;
}
.fillBlock{
	height: 100vh;
}


	.title-container{

		background-color: white;
		width: auto;
		display: block;
		position: relative;
		top: 50vh; left: 50%;
		transform: translate(-50%, -50%);

		height: 100vh;
	}

	.svg-center{
		width: 100%;
		height: 7vw; /* height define text size*/
		top: 40%;
		position: absolute;
		transform: translateY(-50%);
	}

		svg{
			font: bold 150px 'Arial';
			width: 100%;
			height: 100%;
			overflow: visible;
			display: block;
			top: 0; left: 0;
			position: absolute;

		}
			text, line{
				stroke: white;

				stroke-width:3px;
				stroke-linejoin: round;
				filter: drop-shadow(0px, 0px, 5px, black);

				letter-spacing: 50px;
				transition-duration: 0.2s;
				transition: letter-spacing 5s ease;
			}
			line{
				stroke-width:100px;
			}
			.init-animate-state text{
				letter-spacing: 0px;
			}
			.inf text{
				fill: white;

			}
			.sup text{
				fill: none;
			}
			.white-block{
				width: 100%; height: 50px;
				left: 0; bottom: 40px;
				position: absolute;
				
				
			}
			.white-block.sup{
				z-index: 5;
				background-color: rgba(255,255,255,0.6);
			}
			.white-block.inf{
				z-index: 2;
				background-color: white;
			}

.background{
	width: 100%; height: 100%;
	top: 0; left: 0;
	position: absolute;
	background-size: cover;
	background-position: 50% 0;
}

.inf.background{
	background-image: url('dev/bg_inf.png');
	
	z-index: 1;
	transition: filter 5s ease-in-out;
}
.inf.svg-center{
	z-index: 2;
}
.sup.background{
	background-image: url('dev/bg_sup.png');
	z-index: 3;
}
.sup.svg-center{
	z-index: 4;
}


.subtitle{
	text-align: center;
	width: 100%;
	z-index: 5;
	position: absolute;
	bottom:50px; left: 50%;
	transform: translateX(-50%);
	overflow: hidden;
}
.appear>span{
	display: block;
	transform: translateY(0%);
	transition: transform 3s ease-in-out;
	font-size: 25px;
	color: black;
}
.init-animate-state .appear>span{
	transform: translateY(100%);
}

@keyframes rotate{
	0%{ transform: translate(-50%, -50%) rotate(0deg); }
	100%{ transform: translate(-50%, -50%) rotate(380deg); }
}
.star-circle{
	width: 100px; height: 100px;
	top: 20vh; left: 50vw;
	z-index: 4;
	position: relative;
	transform: translate(-50%, -50%) rotate(0deg);
	opacity: 0.8;
	transition: 
		opacity 3s ease-in-out;
	animation: rotate infinite 500s linear;
}


.init-animate-state .star-circle{
	opacity: 0;
}
	.star-circle svg{
		width: 100px; height: 100px;
		fill: var(--color-second);
	}

		.star-circle .star{
			transform-origin: 100% 50%;
		}

.cache-fade{
	width: 100%; height: 0;
	position: absolute;
	top:0; left: 0;
	background-color: transparent;
	transition:
		background 3s ease-in-out,
		height 0s linear 3s;
		
	z-index: 999;
}
.init-animate-state .cache-fade{
	background-color: var(--color-main);
	height: 100vh;
}