body {
	position: relative;
}
.block {
	width: 20px;
	height: 20px;
	position: absolute;
	z-index: 1;
	border: 1px dashed #ffffff9e;
}
.cosmos_area {
	background-color: #04023d;
	width: 1200px;
	height: 1200px;
	border-radius: 50%;
	position: relative;
}
.star {
	border-radius: 50%;
	position: absolute;
}
.star_type_1 {
	width: 100px;
	height: 100px;
	left: calc(50% - 50px);
	top: calc(50% - 50px);
	background-color: #ffb637;
}
.planet {
	border-radius: 50%;
	position: absolute;
	top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}
.planet_type_1 {
	width: 10px;
    height: 10px;
    background-color: #94c3e3;
    top: 0;
    /*left: calc(50% - 5px);*/
}
.planet_type_2 {
	width: 20px;
	height: 20px;
	top: 0;
    /*left: calc(50% - 10px);*/
	background-color: #c1b9ab;
}
.planet_type_3 {
	width: 30px;
	height: 30px;
	top: 0;
    /*left: calc(50% - 15px);*/
	background-color: #04829d;
}
.planet_type_4 {
	width: 40px;
	height: 40px;
	top: 0;
    left: calc(50% - 20px);
	/*background-color: #935d00;*/
}
.planet_type_5 {
	width: 35px;
	height: 35px;
	top: 0;
    left: calc(50% - 20px);
	background-color: #40949b;
}
.planet_type_6 {
	width: 8px;
	height: 8px;
	top: 0;
    left: calc(50% - 20px);
	background-color: #fff1d8;
}
.moon {
	position: absolute;
	width: 5px;
    height: 5px;
    background-color: #fff;
    top: -10px;
    left: calc(50% - 5px);
	border-radius: 50%;
	animation: spin 88s linear infinite;
}
.asteroid {
	border-radius: 50%;
	position: absolute;
	top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}
.asteroid_1 {
	
}
.orbita {
	position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.orbita_sputnik {
	position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
	width: 100%;
    height: 100%;
}
.spin_on .orbita_sputnik {
	animation: spin 8s linear infinite;
}
.orbita_1 {
	width: 200px;
    height: 200px;	
}
.spin_on .orbita_1 { /*Меркурий*/
	animation: spin 8800ms linear infinite;
}
.orbita_2 {
	width: 300px;
    height: 300px;
}
.spin_on .orbita_2 { /*Венера*/
	animation: spin 22500ms linear infinite;
}
.orbita_3 {
	width: 400px;
    height: 400px;
}
.spin_on .orbita_3 {/*Земля*/
	animation: spin 36500ms linear infinite;
}
.orbita_4 {
	width: 500px;
    height: 500px;
}
.spin_on .orbita_4 {/*Марс*/
	animation: spin 68700ms linear infinite;
}
.orbita_5 {
	width: 600px;
    height: 600px;
}
.spin_on .orbita_5 {/*Астероиды*/
	animation: spin 233300ms linear infinite;
}
.orbita_6 {
	width: 700px;
    height: 700px;
}
.spin_on .orbita_6 {/*Юпитер*/
	animation: spin 433300ms linear infinite;
}
.orbita_7 {
	width: 800px;
    height: 800px;
}
.spin_on .orbita_7 {/*Сатурн*/
	animation: spin 1075900ms linear infinite;
}
.orbita_8 {
	width: 900px;
    height: 900px;
}
.spin_on .orbita_8 {/*Уран*/
	animation: spin 3068500ms linear infinite;
}
.orbita_9 {
	width: 1000px;
    height: 1000px;
}
.spin_on .orbita_9 {/*Нептун*/
	animation: spin 5980000ms linear infinite;
}
.orbita_10 {
	width: 1100px;
    height: 1100px;
}
.spin_on .orbita_10 {/*Плутон*/
	animation: spin 9053000ms linear infinite;
}

@keyframes spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
.galaxy_star {
	border-radius: 50%;
	background-color: #ffb637;
	width: 20px;
	height: 20px;
	position: absolute;
}
.galaxy_area {
	background-color: #04023d;
	width: 1200px;
	height: 600px;
	position: relative;
}
[data-star-id="1"] {
	left: 20px;
	top: 20px;
}
[data-star-id="2"] {
	left: 80px;
	top: 40px;
}
[data-star-id="3"] {
	left: 120px;
	top: 200px;
}
[data-star-id="4"] {
	left: 620px;
	top: 440px;
}
[data-star-id="5"] {
	left: 980px;
	top: 500px;
}
[data-star-id="6"] {
	left: 1120px;
	top: 480px;
}
[data-star-id="7"] {
	left: 600px;
	top: 300px;
}
[data-star-id="8"] {
	left: 320px;
	top: 220px;
}
[data-star-id="9"] {
	left: 740px;
	top: 20px;
}
[data-star-id="10"] {
	left: 60px;
	top: 380px;
}

/*Цвета планет*/
.color_grey {
	background-color:#9b9b9b;
}
.color_yellow {
	background-color:#dfc258;
}
.color_blue {
	background-color:#84cde3;
}
.color_red {
	background-color:#b15326;
}

.spin_btn {
	border: 1px solid #827ef1;
    border-radius: 10px;
    line-height: 28px;
    display: inline-block;
    padding: 0 10px;
    background-color: #4f4ca3;
    color: #ffffff;
	cursor: pointer;
	position: absolute;
	left: 30px;
	top: 30px;
}
.mercury {
	background-image: url(/images/planets/mercury.png);
	background-size: cover;
}
.venus {
	background-image: url(/images/planets/venus.png);
	background-size: cover;
}
.zemlya {
	background-image: url(/images/planets/zemlya.png);
	background-size: cover;
}
.mars {
	background-image: url(/images/planets/mars.jpeg);
	background-size: cover;
}
.jupiter {
	background-image: url(/images/planets/jupiter.png);
	background-size: cover;
}
.saturn {
	background-image: url(/images/planets/saturn2.png);
	background-size: cover;
}
.uranus {
	background-image: url(/images/planets/uranus.png);
	background-size: cover;
}
.neptune {
	background-image: url(/images/planets/neptune.png);
	background-size: cover;
}
.pluto {
	background-image: url(/images/planets/pluto.jpg);
	background-size: cover;
}
.sun {
	background-image: url(/images/planets/sun.gif);
	background-size: cover;
	animation-iteration-count: infinite;
	animation-name: sunAnmation;  
    animation-duration: 40s;
	animation-timing-function: linear; 
}
@keyframes sunAnmation {  
    0% { transform: rotate(0deg); }  
    /*50% { transform: scale(1.2); }  */
    100% { transform: rotate(360deg); }  
}