body{
	margin: 0;
	padding: 0;
	background-color: #000;
	font-family: 'Roboto', sans-serif;
	color: rgba(180,180,180,1);
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;    
}	
/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #ffffff63 transparent;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: #ffffff63;
  border-radius: 20px;
  border: 3px solid transparent;
}

	
canvas {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	}

.nav {
	position: absolute; 
	bottom: 5%;
	height: 10%;
	left: 20%;
	width: 60%;
	overflow: hidden;
	z-index: 2;
	text-align: center;
	}

.nav a{
	font-size: 1.5rem;
	text-decoration: none;
	color: rgba( 180,180,180,1);
	padding: 2.5rem;
	font-weight: 100;
    text-shadow: 1px 1px 3px #ffffff	
	}

#header{
	position: absolute;
	top: 3%;
	font-weight: 100;
	text-align: left;
	left: 3%;
	z-index: 100;
	}
	
	
.ct1{
	font-weight: 100;
	font-size: 3rem;
	color: rgba (180,180,180,0.9);
	text-shadow: 1px 1px 3px #ffffff;
	background: 50% 100% / 50% 50% no-repeat radial-gradient(ellipse at bottom, #fff, transparent, transparent);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: reveal 3000ms ease-in-out forwards 200ms,
			 glow 2500ms linear infinite 2000ms;
}


.ct1a{
	font-weight: 100;
	font-size: 3rem;
	color: rgba (180,180,180,0.9);
	text-shadow: 1px 1px 3px #ffffff;
	background: 50% 100% / 50% 50% no-repeat radial-gradient(ellipse at bottom, #fff, transparent, transparent);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: reveal 3000ms ease-in-out forwards 200ms,
			 glow 2500ms linear infinite 2000ms;
}

.button, #content .button{
	display: block;
	position: relative;
	left: 3%;
	font-weight: 100;
	font-size: 1.5rem;
	text-shadow: 1px 1px 3px #ffffff;
    text-align: right;
	max-width: 20%;
	top: 0;
	cursor: pointer;
}


@keyframes reveal {
	80%{
	  background-size: 200% 200%;
	}
	100% {
	  background-size: 300% 300%;
	}
}
@keyframes glow {
	40% {
	  text-shadow: 0 0 8px #fff;
	}
}

.ct2{
	font-weight: 100;
	font-size: 1.5rem;
	text-shadow: 1px 1px 3px #ffffff
}

.ct2a{
	font-weight: 100;
	font-size: 1.5rem;
	text-shadow: 1px 1px 3px #ffffff
}


#footer{
	position: absolute;
	bottom: .8%;
	font-size: .6rem;
	width: 100%;
	text-align: center;
	}

#footer a{
	color: rgba(180, 180, 180, 1);
	text-shadow: 1px 1px 3px #ffffff
	}

#footer a, #footer .copyright{
	text-decoration: none;
	user-select: none;
	}
	

#content div.active{
	display: block;
	animation: fly-in 5s linear;
}

#content div.fade-out, .fade-out{
	display: block;
	animation: fly-out 8s linear;
}

@keyframes fly-in{
    0% { opacity: 0;filter: blur(30px); transform:scale(12)}
    10% { opacity: 0.3;filter: blur(12px); transform:scale(8)}
	40% { opacity: 1;filter: blur(0); transform:scale(1)}
}

@keyframes fly-out{
    2% { opacity: 1;filter: blur(0); transform:scale(.9)}
    13% { opacity: 0;filter: blur(10px); transform:scale(.1)}
    80% { opacity: 0;filter: brightness (0.5);                         }
    100% { opacity: 0; display: none;}
}