html, body {
  height: 100%;
  width:100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color:#c5c2b4;
  mix-blend-mode:soft-light;

}

#background {
  position: fixed;
  top: 0;   
  left:-40vw;  
  margin:0;
  padding:0;
  width: 140%;
  height: 100%;
  border: none;
  z-index: 2;
}

#videod {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
	mix-blend-mode:screen;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent; 
    z-index: 2;
}
#video{
	width:100%;
	height:100%;
	margin-left:auto;
	margin-right:auto;
}
#loading {

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2; 
  background-image:url("./bck2.jpg");
  background-position: center center;
  background-size: cover;            
  background-repeat: no-repeat; 
  pointer-events:none;
 
}
#loading>*{
	pointer-events:none;
}
#logo{
	z-index:3;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-image:none;
	filter: drop-shadow(0 3mm 24mm rgb(255 255 255));
	pointer-events: none;
	flex-direction:column;
	
}
#logo>*{
	pointer-events:none;
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
#logo img{
	max-width: 33vw;
	max-height: 33vh;
	opacity:0;
	animation: fadeIn 1s ease forwards;
	pointer-events:none;
}



#loading-bar{
	background:white;
	display:flex;
	flex-direction:row;
	flex-wrap:no-wrap;
	justify-content:flex-start;
	height:.5vh;
	width:20vw;
	transform: translate(0px, 20vh);
	opacity:.6;
	mix-blend-mode:hard-light;
	pointer-events:none;
	z-index:6;
}
#fill{
	height:100%;
	background:black;
	pointer-events:none;

}
#vignette{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10; 
  background-image:url("./vignette.webp");
  background-position: center center;
  background-size: cover;            
  background-repeat: no-repeat; 
  mix-blend-mode:multiply;	
  opacity:1;
  pointer-events:none;
}
@keyframes hide{
	0%{
		opacity:1;
	}
	100%{
		opacity:0;
	}
}
@keyframes hide2{
	0%{
		opacity:1;
	}
	100%{
		opacity:0;
	}
}

#loading.hide{
	animation: hide 1s ease-in forwards;
}
#logo.hide2{
	animation: hide2 1s ease-in forwards;
}
#video.hide{
	animation: hide2 1s ease-in forwards;
}
@font-face {
    font-family: "Arial";
    src: url("./fonts/arial.ttf") format("truetype");
    font-weight: 100;
    font-style:normal;
}
#text-effect{
	width:100%;
	height:100%;
	position:fixed;
	z-index:1;
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	align-items:center;
	padding:0;
	margin:0;  
	background-color:#C5C5C5;
	mask-image: url("./landing_mask2.webp");
	mask-size:100% 100%;
	mask-repeat:no-repeat;
	mask-mode:alpha;

	
}
@font-face {
    font-family: "Arial";
    src: url("./fonts/arial.ttf") format("truetype");
    font-weight: 100;
    font-style:normal;
}
#text-effect h2{
	font-family: "Arial", sans-serif;
	font-weight: 100;
	color:white;
	white-space: nowrap;
	line-height:.75;
	margin:0;
	height:fit-content;
	letter-spacing:-.1em;
	opacity:1;
	mix-blend-mode:hard-light;
	transition:transform 50s ease;
	mask-image: url("./landing_mask2.webp");
	mask-size:100% 100%;
	mask-repeat:no-repeat;-
	mask-mode:alpha;
}