i, i:hover, #stars img {
	-webkit-transition: all 0.25s;
	-moz-transition: all 0.25s;
	-ms-transition: all 0.25s;
	transition: all 0.25s;
}

body {
	overflow: hidden;
	font-family: Arial, sans-serif;
}

main {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	background-color: #050520;
}

.small {
	font-size: 9px;
}

.very.small {
	font-size: 6px;
}

#stars {
	background-color: #050520;
	min-width: 1000px !important;
	min-height: 600px !important;
}

canvas {
	opacity: 0.5;
}

i:hover {
	color : #3b83c0;
}

#showNav, #reset, #save, #clear {
	position: absolute;
	background-color: #101010;
	color: white;
	right: 0px;
	width: 50px;
	height: 50px;
	padding: 9px;
}

#showNav {
	top: 0px;
}

#reset {
	top: 100px;
}

#clear {
	top: 50px;
}

#save {
	top: 150px;
}

.check > div {
	display: inline;
	font-size: 15px;
}

#nav {
	/*display: none;*/
	padding: 20px;
	background-color: #101010;
	top: 0px;
	right: 0px;
}
#nav .item {
	width: 100%;
	color: #FFFFFF !important;
	font-size: 19px;
	line-height: 20px;
}

#stars {
	position: relative;
}

#stars * {
	position: absolute;
}

.selected {
	border-radius: 100px;
	border: 3px dotted #ffffff; 
}

@-webkit-keyframes twinkle {
	0% {
		ms-transform: scale(1);
	    -moz-transform: scale(1);
	    -webkit-transform: scale(1);
	    -o-transform: scale(1);
	    transform: scale(1);
	}
	50% {
		ms-transform: scale(0.5);
	    -moz-transform: scale(0.5);
	    -webkit-transform: scale(0.5);
	    -o-transform: scale(0.5);
	    transform: scale(0.5);
	}
	100% {
		ms-transform: scale(1);
	    -moz-transform: scale(1);
	    -webkit-transform: scale(1);
	    -o-transform: scale(1);
	    transform: scale(1);
	}
}

@keyframes twinkle {
	0% {
		ms-transform: scale(1);
	    -moz-transform: scale(1);
	    -webkit-transform: scale(1);
	    -o-transform: scale(1);
	    transform: scale(1);
	}
	50% {
		ms-transform: scale(0.5);
	    -moz-transform: scale(0.5);
	    -webkit-transform: scale(0.5);
	    -o-transform: scale(0.5);
	    transform: scale(0.5);
	}
	100% {
		ms-transform: scale(1);
	    -moz-transform: scale(1);
	    -webkit-transform: scale(1);
	    -o-transform: scale(1);
	    transform: scale(1);
	}
}

.twinkle5 {
	-webkit-animation: twinkle 5s linear 0s infinite;
	-moz-animation: twinkle 5s linear 0s infinite;
	-ms-animation: twinkle 5s linear 0s infinite;
	-o-animtion: twinkle 5s linear 0s infinite;
	animation: twinkle 5s linear 0s infinite;
}
.twinkle4 {
	-webkit-animation: twinkle 4s linear 0s infinite;
	-moz-animation: twinkle 4s linear 0s infinite;
	-ms-animation: twinkle 4s linear 0s infinite;
	-o-animtion: twinkle 4s linear 0s infinite;
	animation: twinkle 4s linear 0s infinite;
}
.twinkle3 {
	-webkit-animation: twinkle 3s linear 0s infinite;
	-moz-animation: twinkle 3s linear 0s infinite;
	-ms-animation: twinkle 3s linear 0s infinite;
	-o-animtion: twinkle 3s linear 0s infinite;
	animation: twinkle 3s linear 0s infinite;
}
.twinkle2 {
	-webkit-animation: twinkle 2s linear 0s infinite;
	-moz-animation: twinkle 2s linear 0s infinite;
	-ms-animation: twinkle 2s linear 0s infinite;
	-o-animtion: twinkle 2s linear 0s infinite;
	animation: twinkle 2s linear 0s infinite;
}
.twinkle1 {
	-webkit-animation: twinkle 1s linear 0s infinite;
	-moz-animation: twinkle 1s linear 0s infinite;
	-ms-animation: twinkle 1s linear 0s infinite;
	-o-animtion: twinkle 1s linear 0s infinite;
	animation: twinkle 1s linear 0s infinite;
}

@-webkit-keyframes rotation {
	from {
	    -ms-transform: rotate(0deg);
	    -moz-transform: rotate(0deg);
	    -webkit-transform: rotate(0deg);
	    -o-transform: rotate(0deg);
	    transform: rotate(0deg);
	}
	to {
	    -ms-transform: rotate(360deg);
	    -moz-transform: rotate(360deg);
	    -webkit-transform: rotate(360deg);
	    -o-transform: rotate(360deg);
	    transform: rotate(360deg);
	}
}

@keyframes rotation {
	from {
	    -ms-transform: rotate(0deg);
	    -moz-transform: rotate(0deg);
	    -webkit-transform: rotate(0deg);
	    -o-transform: rotate(0deg);
	    transform: rotate(0deg);
	}
	to {
	    -ms-transform: rotate(360deg);
	    -moz-transform: rotate(360deg);
	    -webkit-transform: rotate(360deg);
	    -o-transform: rotate(360deg);
	    transform: rotate(360deg);
	}
}

.rotation {
	-webkit-animation: rotation 5s linear 0s infinite;
	-moz-animation: rotation 5s linear 0s infinite;
	-ms-animation: rotation 5s linear 0s infinite;
	-o-animtion: rotation 5s linear 0s infinite;
	animation: rotation 5s linear 0s infinite;
}

canvas {
    image-rendering: optimizeSpeed;             // Older versions of FF
    image-rendering: -moz-crisp-edges;          // FF 6.0+
    image-rendering: -webkit-optimize-contrast; // Webkit (non standard naming)
    image-rendering: -o-crisp-edges;            // OS X & Windows Opera (12.02+)
    image-rendering: crisp-edges;               // Possible future browsers.
    -ms-interpolation-mode: nearest-neighbor;   // IE (non standard naming)
}