header {
	background-color: transparent;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
    text-align: center;
}



body {
	margin-top: 80px;
	padding: 0;
	font-family: Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #ffffff;
	background-color: transparent;
}


footer {
	font-family: Arial, sans-serif;
	position: fixed;
	margin: 0 auto;
	bottom: 2%;
  width: 100%;
	text-align: center;
  font-size: 10px;
	color: #ffffff;
}


nav ul {
	list-style: none;
	padding: 0;
	display: flex;
  text-align: center;
}

nav li {
	font-size: 150%;
	position: relative;
	top: 100px;
	font-size: 25p;
	left: 0;
	width: 100%;
	z-index: 9999;
  text-align: center;
	color: #ffffff;
}


nav a {
	color: #ffffff;
	text-decoration: none;
	font-weight: bold;
}

nav a:hover {
	fill-opacity: 0.7;
}


main {
	margin-top: 80px;
	padding: 20px;
}

h1, h2, h3 {
	margin: 0;
	font-weight: normal;
}

h1 {
	margin-top: 10%;
	font-size: 150px;
  text-align: center;
	color:#ffffff
}

h2 {
	font-size: 150%;
	position: relative
}



@media only screen and (max-width: 600px) {
  h1 {
    
		scale: 150%;
  }

	li {
    
		scale: 400%;
  }


}




#scroll-container {
	overflow: hidden;
	font-size: 150%;
	position: relative;
	font-family: Arial, sans-serif;
	bottom: 50%;
	color: #ffffff;
	z-index: 10000;
	width: 100%;
  }
  
  #scroll-text {
	/* animation properties */
	-moz-transform: translateX(100%);
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
	margin: 0;
	
	-moz-animation: my-animation 15s linear infinite;
	-webkit-animation: my-animation 15s linear infinite;
	animation: my-animation 15s linear infinite;
  }
  
  /* for Firefox */
  @-moz-keyframes my-animation {
	from { -moz-transform: translateX(100%); }
	to { -moz-transform: translateX(-100%); }
  }
  
  /* for Chrome */
  @-webkit-keyframes my-animation {
	from { -webkit-transform: translateX(100%); }
	to { -webkit-transform: translateX(-100%); }
  }
  
  @keyframes my-animation {
	from {
	  -moz-transform: translateX(100%);
	  -webkit-transform: translateX(100%);
	  transform: translateX(100%);
	}
	to {
	  -moz-transform: translateX(-100%);
	  -webkit-transform: translateX(-100%);
	  transform: translateX(-100%);
	}}
  


	/*debut lava lamp css animation*/

	html {
		height: 100%;
		background-color:#ffffff;
		background: radial-gradient(ellipse at bottom, rgb(255, 190, 11), rgb(255, 68, 34));
		overflow: hidden;
	  };

	  body {
	  background:transparent;
	  }
	  .lamp{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		
		height: 100vh;
		height: 100vh;
		width: 100vw;
		min-width: 100vw;
		z-index:-1;
	  }
	  
	  .lava{
		filter: url("#goo");
		position:absolute;
		height:100%;
		width:100%;
		top:0;
		left:0;
	  }
	  
	  .blob{
		border-radius: 50%;
		background: #fff56c;
		position:absolute;
	  }
	  
	  
	  
	  .blob.top{
		border-radius: 50%;
		width: 100%;
		height: 4%;
		top: -3%;
		left:0;
		
	  }
	  .blob.bottom{
		border-radius: 50%;
		width: 100%;
		height:4%;
		bottom: -3%;
		left:0;
	  }
	  .blob:nth-child(1){
		width: 200px;
		height: 200px;
		left: 35%;
		bottom:-15%;
	   
		animation: wobble 6s ease-in-out alternate infinite, blob-one ease-in-out 18s infinite;
	  }
	  .blob:nth-child(2){
		width: 330px;
		height: 330px;
		right: 24%;
		bottom:-65%;
		
		animation: wobble 7s ease-in-out alternate infinite, blob-two ease-in-out 22s infinite;
	   
		
	  
	  }
	  .blob:nth-child(3){
		width: 150px;
		height: 150px;
		bottom:-15%;
		left: 34%;
		
		animation: wobble 6s ease-in-out alternate infinite, blob-three ease-in-out 16s infinite;
	  }
	  .blob:nth-child(4){
		width: 235px;
		height: 235px;
		bottom:-19%;
		left: 30%;
		
		animation: wobble 7s ease-in-out alternate infinite, blob-four ease-in-out 12s infinite;
	  }
	  .blob:nth-child(4){
		width: 235px;
		height: 235px;
		bottom:-19%;
		left: 30%;
		animation: wobble 8s ease-in-out alternate infinite, blob-four ease-in-out 12s infinite;
	  }
	  .blob:nth-child(5){
		 width: 55px;
		height: 55px;
		bottom:-25%;
		left: 34%;
		
		animation: wobble 9s ease-in-out alternate infinite, blob-five ease-in-out 32s infinite;
	  }
	  .blob:nth-child(6){
		width: 35px;
		height: 35px;
		bottom:-25%;
		right: 34%;
		
		animation:wobble 10s ease-in-out alternate infinite,  blob-six ease-in-out 12s infinite;
	  }
	  .blob:nth-child(7){
		width: 435px;
		height: 435px;
		bottom:-85%;
		right: 40%;
		
		animation: wobble 11s ease-in-out alternate infinite, blob-seven ease-in-out 32s infinite;
	  }
	  @keyframes blob-one{
		0%, 100%{
		  transform: translatey(0);
		}
		50%{
		  transform: translatey(-700%);
		}
	  }
	  
	  @keyframes blob-two{
		0%, 100%{
		  transform: translatey(0);
		}
		50%{
		  transform: translatey(-420%);
		}
	  }
	  
	  @keyframes blob-three{
		0%, 100%{
		  transform: translatey(0);
		}
		50%{
		  transform: translatey(-305%);
		}
	  }
	  @keyframes blob-four{
		0%, 100%{
		  transform: translatey(0);
		}
		50%{
		  transform: translatey(-605%);
		}
	  }
	  @keyframes blob-five{
		0%, 100%{
		  transform: translatey(0);
		}
		50%{
		   transform: translatey(-700%);
		}
	  }
	  @keyframes blob-six{
		0%, 100%{
		  transform: translatey(0);
		}
		50%{
		   transform: translatey(-700%);
		}
	  }
	  @keyframes blob-seven{
		0%, 100%{
		  transform: translatey(0);
		}
		50%{
		   transform: translatey(-300%);
		}
	  }
	  
	  
	  @keyframes wobble {
		50% {
		 border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
		}
		100% {
		 border-radius: 38% 52% 75% 36% / 50% 40% 50% 60%;
		}
	  }
	  

	  
	/*end lava lamp css animation*/