@import url('https://fonts.googleapis.com/css?family=Audiowide|Orbitron&display=swap');
html,body
{
font-size:1em;
height: 100%; width: 100%; margin: 0; 
padding:0px;
font-family:"Orbitron",cursive;
background:#FF9;	
	background: #000000;
background: -webkit-radial-gradient(center, #000000, #01035D);
background: -moz-radial-gradient(center, #000000, #01035D);
background: radial-gradient(ellipse at center, #000000, #01035D);
}

.gameoverDiv
{
background-image:url('vortex.gif') !important;
background-size:100% 100% !important;	
}

h1
{
font-family: 'Audiowide', cursive;
text-shadow: 1px 1px #FFF;	
font-size:3em;
margin:0;padding:0;text-align:center;	
}
h2
{
font-family: 'Orbitron', cursive;	
text-shadow: 1px 1px #FFF;	
margin:0;padding:0;
}

.qDiv {
	cursor:grab;
    position: absolute;
	/*padding:1em;*/
	opacity: 0.95;
	text-align:center;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	z-index:9999;
    top: 37%;
    left: 37%;
	height:25%;
	width:25%;
	overflow-y: scroll;
	text-shadow: 1px 1px #FFF;
	color:black;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.05);
	background: #0F0;
	border:3px #0F0 solid;	
	 -webkit-box-shadow: 0px 0px 11px 5px #3DFF0B; 
	box-shadow: 0px 0px 11px 5px #3DFF0B;
}

.centered
{
position:absolute;	
height:50%;
width:50%;
left: 25%;
top: 25%;
color:black;
-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
padding:0.2em;
	text-shadow: 1px 1px #FFF;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.05);
	background: #0F0;
	border:3px #0F0 solid;	
	 -webkit-box-shadow: 0px 0px 11px 5px #3DFF0B; 
	box-shadow: 0px 0px 11px 5px #3DFF0B;
}

.bin
{
position:absolute;
height:40%;width:20%;
text-align:center;
background:yellow;	
background-size:100% 100%;background-repeat: no-repeat;
}


.binDistant
{
height:20%;width:10%;	
}

.bin .content, .quit, .titleDiv
{
 position:absolute;
    width:100%;
    bottom:0;
    text-align:center;
}
.quit span
{cursor:pointer;bottom:-20px;}

.logo
{
position:absolute;
bottom:1em;
left:15%;
width:70%;
}

.no1{top:3%;left:8%;background-image:url('vortex.gif');}
.no2{top:3%;right:8%;background-image:url('vortex.gif');}
.no3{bottom:7%;left:3%;background-image:url('vortex.gif');}
.no4{bottom:7%;right:3%;background-image:url('vortex.gif');}

.timer, .hscore, .quit
{position:absolute;bottom:1%;font-size:1em;color:red}
.titleDiv
{top:1%;color:red}
.timer
{left:3%;}
.hscore
{right:3%;}



.but
{
padding:10px;
margin-top:10px;margin-right:10px;
background:#FF9;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color:black !important;
cursor:pointer;
}
.but a
{color:black !important;}

textarea,input[type=text]
{
width:100%;	
border:1px black solid;
font-size:1.5em;
/*background-image: url("graphic.jpg");*/
}
input[type=text]
{
text-align:center;
position:relative;
display:table;
margin:auto;	
width:80%;
}



a
{text-decoration:none}


.wrapper
{
position:relative;
height:80%;
width:80%;
top:5%;
z-index:2;
margin:auto;
background:black;
border:3px #0F0 solid;	
	
	 -webkit-box-shadow: 0px 0px 11px 5px #3DFF0B; 
box-shadow: 0px 0px 11px 5px #3DFF0B;
	
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
padding:20px;

	color:white !important;
	
}







@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}

@keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-webkit-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-moz-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-ms-keyframes move-clouds-back {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}

.stars, .twinkling, .clouds {
  position:absolute;
  top:2%;
  left:2%;
  width:95%;
  height:95%;
  display:block;
}

.stars {
  background:#000 url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;
  z-index:0;
}

.twinkling{
  background:transparent url(http://www.script-tutorials.com/demos/360/images/twinkling.png) repeat top center;
  

  -moz-animation:move-twink-back 200s linear infinite;
  -ms-animation:move-twink-back 200s linear infinite;
  -o-animation:move-twink-back 200s linear infinite;
  -webkit-animation:move-twink-back 200s linear infinite;
  animation:move-twink-back 200s linear infinite;
}