html, body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  background-color: #000015;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.hidden {
	opacity: 0;
}

#the-canvas {
  background-color: #0b1538;
  display: block;
  /*filter: blur(50px) hue-rotate(25deg) contrast(1.5);*/
  filter: blur(0px) hue-rotate(0deg) contrast(1);
  transition: 5s all ease-in-out;
}

/* Overlays */
.discovering {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 64px;
	text-align: center;
	color: rgba(255, 255, 255, 0.7);
	text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.32);
	transition: 0.2s all ease-in-out;
}

/* Top Bar */
#top-bar {
	position: fixed;
	top: 0px;
	left: 0px;
	height: 86px;
	width: 100%;
	display: flex;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.3);
	border-bottom: 4px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.2);
}

#msi-logo {
	margin: 0px 32px;
	color: rgba(255, 255, 255, 0.7);
}

#galactic-time {
	margin: 0px 16px;
	justify-content: left;
	font-size: 18px;
	color: rgba(255, 255, 255, 0.7);
}

#menu-icons {
	margin: 0px 32px;
	text-align: right;
	flex-grow: 1;
	justify-content: right;
}

#menu-icons i {
	margin: 0px 16px;
	color: rgba(255, 255, 255, 0.7);
	cursor: pointer;
}

#menu-icons i:hover {
	color: rgba(255, 255, 255, 1);
	cursor: pointer;
}

/* Galaxy Navigation */
#sys-map {
	position: fixed;
	bottom: 0px;
	left: 0px;
	height: 86px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(255, 255, 255, 0.3);
	border-top: 4px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0px -4px 0px 0px rgba(0, 0, 0, 0.2);
}

#sys-map a {
	text-decoration: none;
}

#moon-map {
	position: fixed;
	bottom: 90px;
	left: 0px;
	height: 86px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(255, 255, 255, 0.1);
	border-top: 4px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0px -4px 0px 0px rgba(0, 0, 0, 0.2);
}

#sys-map .closer-objects .planet,
#sys-map .closer-objects .star,
#sys-map .farther-objects .planet,
#moon-map .moon {
	margin-left: 16px;
	margin-right: 16px;
	display: inline-block;
	box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.7);
}

#sys-map .closer-objects .planet:hover,
#sys-map .closer-objects .star:hover,
#sys-map .farther-objects .planet:hover,
#moon-map .moon:hover {
	box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, 1);
	transition: 0.2s all ease-in-out;
}

#sys-map .current-object.planet {
	margin-left: 16px;
	margin-right: 16px;
	box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, 1);
}

#sys-map .current-object.moon {
	margin-left: 16px;
	margin-right: 16px;
	box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, 1);
}

#sys-map .current-object.has-moon::after {
	content: "\f0d8";
	position: relative;
	top: -54px;
	left: 2px;
	font-family: "Font Awesome 5 Free";
	font-size: 3em;
	font-weight: 900;
	color: rgba(255, 255, 255, 1);
	text-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.7);
}

#sys-map .current-object.asteroid-belt {
	margin-left: 16px;
	margin-right: 16px;
	box-shadow: none;
}

.star {
	height: 64px;
	width: 64px;
	border-radius: 64px;
}

.planet {
	height: 32px;
	width: 32px;
	margin-top: 16px;
	margin-bottom: 16px;
	border-radius: 32px;
}

.moon {
	height: 32px;
	width: 32px;
	margin-bottom: 16px;
	border-radius: 32px;
}

#sun {
	background-color: #ffe162;
}

#mercury {
	background-color: #999999;
}

#venus {
	background-color: #ad651a;
}

#earth {
	background-color: #1876b5;
}

#moon {
	background-color: #aaaaaa;
}

#mars {
	background-color: #cd855f;
}

.asteroid-belt {
	display: inline-block;
	height: 62px;
	width: 38px;
	margin: 1px 13px;
	background-image: url('images/asteroid-belt-up.png');
	box-shadow: none;
	transition: 0.2s all ease-in-out;
}

.asteroid-belt:hover {
	background-image: url('images/asteroid-belt-active.png');
}

#jupiter {
	background-color: #e8b26c;
}

#saturn {
	background-color: #d2bf61;
}

#uranus {
	background-color: #d2bf61;
}

#neptune {
	background-color: #d2bf61;
}

#pluto {
	background-color: #e0bc9a;
}

#kuiper-belt {

}