@charset "utf-8";
/* CSS Document */
#background {
	width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; 
}

.stretch {
    width:100%;
    height:100%;
}
#roundButton {
	background-color:#000;
	margin:2em 2em;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	border: 10px solid #0065A6;
    outline: none;
	animation-name: tombol;
  	animation-duration: 1s;
  	animation-iteration-count:infinite;
  	animation-timing-function:ease-in-out;
    transition: transform .5s cubic-bezier(0, .52, 0, 1);
}
#roundButton:hover {
    background-color: #96D9FF;
    cursor: pointer;
    border-color: #003557;
    transform: scale(1.2, 1.2);
 }
#roundButton:active {
    border-color: #003557;
    background-color: #FFF;
}
@keyframes	tombol	{
	from	{
		background-color:#0FF;
}
	to	{
		background-color:#F00;
}
}
h1	{
	font-family:Verdana, Geneva, sans-serif;
	color:#0CF;
  	
}
#kontainer	{
	text-align:center;
}
#flyoutMenu {
  	width: 30vw;
  	height: 100vh;
	background-color:#fff;
	position: fixed;
  	top: 0;
  	left: -5%;
  	transform: translate3d(-100vw, 0, 0);
  	transition: transform .3s cubic-bezier(0, .52, 0, 1);
  	overflow:hidden;
}
#flyoutMenu h2 a {
	color:#06F;
	font-family:Verdana, Geneva, sans-serif;
	text-decoration:none;
 	background: rgba(255,255,255,.2);
  	width: 100%;
  	padding: 2vh;
  	border: none;
  	cursor: pointer;
  	border-radius: 4px 4px;
  	transition: transform 1s cubic-bezier(2, 1, 2, 1);
}
#flyoutMenu h2 a:hover {
  	text-decoration:none;
  	color:#999;
}  
#flyoutMenu.show {
  	transform: translate3d(0vw, 0, 0);
}
.neonText {
  	color:#0CF;
  	text-shadow:
      0 0 7px #fff,
      0 0 5px #fff,
      0 0 21px #fff,
      0 0 42px #0fa,
      0 0 82px #0fa,
      0 0 92px #0fa,
      0 0 102px #0fa,
      0 0 151px #0fa;
}
.button_index	{
  background:rgba(255,255,255,.2);
  width: 100%;
  padding: 2vh;
  border: none;
  cursor: pointer;
  border-radius: 4px 4px;
}