* {
  
}



title {
/* 
font-family: "ddt";
font-weight: 400;
font-style: bold;
color: 8559a4; */

}


h1{

}


@keyframes fadeinlogo{
	
	0% {
		
	opacity: 0;
		
		
	}
	
	100%{
		
		
	opacity: 1;

		
	}
	
	
	
}


#name{
	
font-family: "brush-script-std", sans-serif;
	justify-content: center;
display: relative;
position: relative;
top: 0;
opacity: 0;
animation: fadeinlogo 1s 2s forwards;




white-space: nowrap;

font-weight: 400;
font-style: normal;
text-align: center;
font-size: 500%; 
filter: drop-shadow(2px 2px 2px black);		


/* position: flex; */
/* text-align: center;
 *//* justify-content: center;
 *//* margin-top: 200;
margin-left: 50; */	
}

body {

/* display: flex;
position: flex;
align-items: center;
justify-content: center;
	
	 */
	
}


body p{
	
font-family: "brush-script-std", sans-serif;
/* display: relative;
position: relative;
align-items: center; */
justify-content: center;
	/* 
font-weight: 400;
font-style: normal;
text-align: center;
font-size: 500%;
 */
 
 
 text-align: center;
}


#container{
	
	
	display: relative;
	position: relative;
	margin-left: 30%;

	font-family: "brush-script-std", sans-serif;

	justify-content: center;
	align-items: center;
	
}



form{



justify-content: center;
	align-items: center;
	
	display: block;	
	
	
	
}



#launch{
	
	
	font-weight: 400;
	font-size: 500%;
	opacity: 0;
	top: 0;
	font-family: "jaf-mashine", sans-serif;
	font-size: 150%;
	justify-content: center;
	text-align: center;
	display: relative;
	position: relative;

	/* font-weight: 200;
	font-style: normal; */

	animation: fadeinlogo 1s 2.5s forwards;

	
}

.blink {
	
	animation: blink 1s infinite;
	
}

@keyframes blink{
	

0% { opacity: 0;}

50% { opacity: 1;}

100% { opacity: 0;}	
	
	
}


#logodiv{
	
	
display: relative;
position: relative;	
top: 10%;
left: 30%;
height: 50%;
width: 50%;

align-items: center;
justify-content: center;
min-width: 60%;
/* width: 100%; */	
/* width: 100%;
height: 100%;
 */
background-color: transparent;
/* overflow: hidden;
 */	
}




/* @media (max-width: 800px){
#logodiv{
	
	flex-direction: column;
	
}
	
} */

.logo{
	
	
	
	max-height: 100%;
	max-width: 100%;
	
	display: flex;
    position: flex;	
	/* display: flex;
	position: flex;
	top: 0; */
	/* width: 50%;
	height: 50%; */
/* 	align-items: center;
justify-content: center; */
	
	
	filter: drop-shadow(5px 5px 5px black);		


	
   
}




@keyframes clip{
	
	0% {
		
	clip-path: inset(90% 70% 0% 0%);
		
		
	}
	
	100%{
		
		
				clip-path: inset(0% 40% 0% 0%);

		
	}
	
	
	
}

#stroke01 {
	position: absolute;
	top: 0;
	
	clip-path: inset(90% 70% 0% 0%);
	
	background-color:transparent;

	animation: clip 1s forwards;
	


}


@keyframes clip2{
	
	0% {
		
				clip-path: inset(3% 45% 95% 25%);
		
		
	}
	
	100%{
		
		
				clip-path: inset(0% 0% 0% 0%);

		
	}
	
	
	
}


#stroke02 { 
	position: absolute;
	top: 0;
	clip-path: inset(3% 45% 95% 25%);
	
	background-color: transparent;

	animation: clip2 1s .7s ease forwards;
	
}


@keyframes clip3{
	
	0% {
		
	clip-path: inset(165px 320px 280px 140px);
		
		
	}
	
	

	
	25% {
		
	
		clip-path: inset(165px 320px 280px 30px);

		
		
	}
	
	30% {
		
		clip-path: inset(30% 50% 60% 10%);
		
		
	}
	
	
	40% {
		
		clip-path: inset(5% 20% 65% 10%);
		
		
	}
	
	
	100% {
		
	clip-path: inset(0% 0% 0% 0%);
		
		
	}
	
	
	
	
	
}


#stroke03 {
	
	
position: absolute;
	top: 0;
	clip-path: inset(165px 320px 280px 140px);
	background-color: transparent;

	animation: clip3 1s 1.5s forwards;
	
}