* { box-sizing:border-box; }

figure {
  		animation:wobble 5s ease-in-out infinite;
  		transform-origin:center center;
  		transform-style:preserve-3d;
 		z-index: 9999;
  		position: fixed;
  		width:100%;
  		top:30%;
  		left:calc(50% - 700px);
		}

@keyframes wobble {
 					0%,100%{ transform:rotate3d(1,1,0,40); }
  					25%{ transform:rotate3d(-1,1,0,40deg); }
  					50%{ transform:rotate3d(-1,-1,0,40deg); }
  					75%{ transform:rotate3d(1,-1,0,40deg); }
					}

h1 {
  	display:block;
  	width:100%;
  	padding:40px;
  	line-height:1.5;
  	font:900 4.8em 'song Myung',serif;
  	text-transform:uppercase;
  	position:absolute;
  	color:#0a0a0a;
  	animation:glow 10s ease-in-out infinite;
	}

@keyframes glow {

  					0%,100%{ text-shadow:0 0 0px white; }

  					25%{ text-shadow:0 0 20px white; }
  
 					50%{ text-shadow:0 0 0px white; }
  
  					75%{ text-shadow:0 0 20px white; }
				}

h1:nth-child(2){ transform:translateZ(5px);}
h1:nth-child(3){ transform:translateZ(10px);}
h1:nth-child(4){ transform:translateZ(15px);}
h1:nth-child(5){ transform:translateZ(20px);}
h1:nth-child(6){ transform:translateZ(25px);}
h1:nth-child(7){ transform:translateZ(30px);}
h1:nth-child(8){ transform:translateZ(35px);}
h1:nth-child(9){ transform:translateZ(40px);}
h1:nth-child(10){ transform:translateZ(45px);}



html{
	min-height: 100%;
	font-family: 'song Myung',serif; 
	color: black;
	}

body{background:black;}

#monitor{
		width:100px; 
		height:40px; 
		position: fixed; 
		text-align: center; 
		line-height: 40px;
		right:0;
		z-index: 9999;
		}

#container, #container2, #container3 , #container4 , #container7 ,#container8
,#container10 ,#container11 ,#container12 ,#container13 ,#container14
{position: relative;
 width: 100%;
 height: 700px;
 top:500px;
 overflow: hidden;
}


#container5, #container6{
							position: relative;
							width: 100%;
							height: 1000px;
							top:500px;
							overflow: hidden;
						}

#date{
		z-index: 3; 
		font-size: 3.5em; 
		height: 50px;
		top:3%;
		right:calc(50% - 200px);
		-webkit-text-fill-color: black;
  		-webkit-text-stroke-width: 0.5px;
  		-webkit-text-stroke-color: white;
	}

#date2{
		z-index:3; 
		font-size: 3.5em; 
		height: 50px;
		top:3%;
		right:calc(50% - 200px);
		-webkit-text-fill-color: white;
  		-webkit-text-stroke-width: 1px;
  		-webkit-text-stroke-color: black;
	}


	
#intro{
		position:relative; 
		width:100%; 
		height:100vh;
		position: fixed;
		z-index: -3;
		animation: float2 6s ease-in-out infinite;
	 }
	 

@keyframes float {

		0%	{
			box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
			transform: translate3d(0px,0px,0px) rotateZ(5deg);

			}

		50%	{
			box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
			transform: translate3d(20px,-20px,-10px)rotateZ(2deg);
			}

		100%{
			box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
			transform: translate3d(0px,0px,0px)rotateZ(5deg);
			}

		}

@keyframes float2 {
		0% {
			box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
			transform: translate3d(0px,0px,0px);
		}
		50% {
		box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
		transform: translate3d(-20px,20px,10px);
		}
		100% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translate3d(0px,0px,0px);
		}
	}


@keyframes float3 {
		0% {
			box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
			transform: translate3d(0px,0px,0px)rotateZ(-2deg);
		}
		50% {
		box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
		transform: translate3d(10px,40px,10px) rotateZ(-5deg);
		}
		100% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translate3d(0px,0px,0px) rotateZ(-2deg);
		}
	}

#mySVG3 {
		 position: fixed;
  		 z-index:1;
  		 top:8%;
  		 left: calc(50% - 700px);
  	 	 width: 1400px;
  		 height: 1200px;
  		 margin-right:-50px;
  		 opacity: 0.5;
		}

#mySVG4 {
		 position: fixed;
  		 z-index:-9;
  		 top:0%;
  	 	 width: 1400px;
  		 height: 1200px;
  		 margin-right:-50px; 
		}

#circlebox{
			width:100%; 
			height: 100vh; 
			perspective: 300px; 
			position: fixed;
			}

#circle{
		display: block;
		z-index: -9999;
		opacity: 0.4;
		position: fixed;
		margin-top: 5%;
		left:calc(47% - 300px);
		width:600px;
		text-align: center;
		animation:r 1.5s infinite;
		
		}

@keyframes r {
				from{transform: translate3d(0,0,-3000px);}
				to{transform: translate3d(0,0,500px);}
			}

@keyframes rota {
					0% {transform:rotateY(0deg) rotateZ(0deg)}
					50%{transform:rotateY(180deg) rotateZ(180deg);}
					100%{transform:rotateY(0deg) rotateZ(0deg)}
				}


.header {
  			position: fixed;
  			top: 0;
  			left:0;
 			z-index: 1;
  			width: 100%;
		}

#progressContainer {
  						width: 100%;
  						height: 8px;
					}

.progress-bar {
  				width: 0%;
  				height: 8px;
				}


#announcebox{ 
			  width: 500; 
			  height: 50px;  
			  position: fixed;
			  top:10px;
			  left: 0px;
			  text-align: center;
			  overflow: hidden;
			  z-index: 3;
 			}

#announce{color: white;
		  animation:move 8s infinite;
		  opacity: 1;
		 }

@keyframes move {

			0% {transform:translateX(0px);}
			100%{transform:translateX(-650px);}
				
				}

#timedate {
  			text-align:right;
  			width: 50%;
  			overflow: hidden;
  			margin: 40px auto;
  			padding: 20px;
  			-webkit-text-fill-color: black;
  			-webkit-text-stroke-width: 0.5px;
  			-webkit-text-stroke-color: white;	
  			position: fixed;
  			top:-4%;
  			right:1%;
  			z-index: 3;
		   }


footer{	
		width:100%; 
		overflow: hidden;
		position:fixed; 
		height: 200px; 
		bottom:0px;
		opacity: 0.7;
		z-index: 9999;
		line-height: 20px;
		}

#pa1{position:absolute;text-align:left; width:200px; height: 100px; bottom:0px; left: 0px; animation:pa 10s infinite;}

#pa2{position:absolute;text-align:right; width:1100px; height: 50px; bottom:0px; right:10px; overflow: hidden;}

#pa2pa{animation:pa2 10s infinite;}


@keyframes pa{
				0% {transform:translateY(60px);}
				100%{transform:translateY(-100px);}
}

@keyframes pa2{
				0% {transform:translateY(60px);}
				100%{transform:translateY(-10px);}
}
#container9{
			width:100%;
			height: 1000px;
			position: relative;
			animation: container 1s forwards;
			background:white;
			z-index: -9999;
		   }
@keyframes container {
			from{transform: translateY(0px);}
			to{transform: translateY(-500px);}	
		  }

.wave{
		position: absolute;
		width:100%;
		height: 143px;
		top: -14%;
		left:0px;
		background:url(wave.png);
		background-size: cover;
		animation: wavyy 10s linear infinite;
	 }

.wave:before{
				content: '';
				width:100%;
				height: 143px;
				background:url(wave.png);
				position: absolute;
				top:0;
				left:0;
				animation: wavyy2 10s linear infinite;
				opacity: 0.4;
			}


@keyframes wavyy{
			0%{background-position:0;}
			100%{background-position: 1400px;}
		  }


@keyframes wavyy2 {
			0%{background-position:1400px;}
			100%{background-position:0;}
		  }

#white{width: 100% }



#textpng{width:100%; height: 800px; top:0px; left: 0px; position: fixed; z-index:2; visibility: hidden;}



.boxx {
  width: 100%;
  height: 100vh;
  position: fixed;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  top:0px;
  z-index: -20;
}

.rot {
  opacity:1;
  position: absolute;
  top: 3%;
  left: calc(50% - 340px);
  background: black;
  width: 1000px;
  height: 800px;
  margin-left: -250px;
  margin-top: -250px;
  transform-origin: 50% 48%;
  border-radius: 43%;
  animation: drift 3000ms infinite linear;
}

.rot.-three {
  animation: drift 5000ms infinite linear;
}

.rot.-two {
  animation: drift 7000ms infinite linear;
  background: black;
}


.boxx2 {
  width: 100%;
  height: 100vh;
  position: fixed;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  top:0px;
  left: -500px;
  z-index: 9999;

}

.rot2 {
  opacity:.1;
  position: absolute;
  top: 3%;
  left: calc(50% - 340px);
  width: 800px;
  height: 800px;
  margin-left: -250px;
  margin-top: -250px;
  transform-origin: 50% 48%;
  border-radius: 43%;
  animation: drift 3000ms infinite linear;
  border:2px; 
  border-style: solid;
  border-color:black;
  z-index: 3;
}

.rot2.-three2 {
  animation: drift 5000ms infinite linear;
}


.boxx3 {
  width: 100%;
  height: 100vh;
  position: fixed;
  transform: translate3d(0, 0, 0);
  bottom:-400px;
  right: -800px;
  z-index: 9999;
}

.rot3 {
  opacity:.1;
  position: absolute;
  top: 3%;
  left: calc(50% - 340px);
  width: 800px;
  height: 800px;
  margin-left: -250px;
  margin-top: -250px;
  transform-origin: 50% 48%;
  border-radius: 43%;
  animation: drift 3000ms infinite linear;
  border:1px; 
  border-style: solid;
  border-color:black;
  z-index:5;
}

.rot3.-three3 {
  animation: drift 5000ms infinite linear;
   z-index:5;
}



@keyframes drift {
  from { transform: rotate(0deg); }
  from { transform: rotate(360deg); }
}

#dropbtn {
  color: gray;
  padding:10;
  font-size: 16px;
  border:none;
  background: rgba(0,0,0,0);
  z-index:9999;
}

.dropdown {
  position: fixed;
  display: inline-block;
  top:50px;
  right:32%;
  z-index: 9999;

}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 9999;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: black; color:white;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: white; color:black; cursor:pointer;}

#graybox{background:rgba(255,255,255,0.7); 
		width:100%; 
		height:100vh; 
		z-index: 9999; 
		position: fixed; 
		z-index: 9999;
		top:0px;
		left:0px;
		margin:auto;}

#graybox:hover {cursor: pointer;}