html, body {
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

html {
	flex-direction: column;
}

body {
	flex-direction: row;
	overflow: hidden;
    touch-action: none;
	/*background: radial-gradient(#efefef, #000000);*/
	background: white;
}

canvas {
	margin: auto;
	display: block;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;

	font-size: 9px;
	font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
	background-repeat: no-repeat;

}

#controls{
	position: absolute;
	bottom: 30px;
	right: 0px;
	width: 40px;
	height: 62px;
  padding: 5px 0px;
	overflow: hidden;
	background: #0000005e;
}

.expanded-controls{
	width: 285px !important;
	right: 0px;
}

#out-constellation{
	cursor: pointer;
	width: 25px;
	height: 60px;
	opacity: 0.5;
	background-image: url('out.png');
	background-repeat: no-repeat;
	background-position: 0px -7px;
	float: left;
}

.control-button{
	cursor: pointer;
	width: 38px;
	height: 52px;
	padding-top: 36px;
	margin-right: 5px;
	float: left;
	color: #ffffff;
	text-align: center;
	background-color: #000000eb;
	background-repeat: no-repeat;
	border: 1px solid #ffffff54;
	 -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 */
}

.control-button:hover{
	background-color: #454545;
}

.control-button:active{
	background-color: #d83792;
}

#new-constellation{
	background-image: url('new.png');
	background-position: -5px -5px;
}
#boom-constellation{
	background-image: url('boom.png');
	background-position: -6px -5px;
}

#slower-constellation{
	background-image: url('down.png');
	background-position: -3px -5px;
}

#faster-constellation{
	background-image: url('up.png');
	background-position: -5px -5px;
}

#direction-constellation{
	background-image: url('anticlockwise.png');
	background-position: -4px -5px;
}

#view-constellation{
	background-image: url('automatic.png');
	background-position: -4px -5px;
}



.greyed-out{
	opacity: 0.3;
}

.manual-constellation{
	background-image: url('manual.png') !important;
	background-position: -5px -5px !important;
}

.clockwise-constellation{
	background-image: url('clockwise.png') !important;
}

.icon-rotate{
	background-position: -9px 15px !important;
	transform: rotate(180deg);
}