@charset "uft-8";
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
  background-color: #02071d;
}
#descript {
  padding: 10px;
  background-color: #50e3c2;
  color: #ffffff;
}
#descript h3 {
  width: 50%;
  display: inline-block;
}
#descript a {
  display: inline-block;
  text-decoration: none;
  color: #ddd;
  text-shadow: 1px 1px 2px #000;
}
#descript a:hover {
  color: #ffffff;
}
#left {
  width: 500px;
  float: left;
  border: 2px solid #ffffff;
}
#planet {
  position: relative;
  overflow: hidden;
  margin-left: 500px;
  height: 600px;
}
.form-control {
  display: inline-block;
  width: 11%;
  padding: 4px 0;
  font-size: 12px;
  margin-bottom: 10px;
  color: #555;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  transition: border ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.form-control:hover {
  border-color: #ffffff;
  outline: 0;
  box-shadow: inset 0 1px 1px #fff, 0 0 8px ##50e3c2;
}
span {
  margin-left: 15px;
}
.btn {
  display: inline-block;
  padding: 10px 20px;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: #50e3c2;
  color: #ffffff;
}
.btn:hover {
  color: #333;
  background-color: #30e3c2;
}
button:disabled,
input:disabled {
  background-color: #ddd;
  color: #ffffff;
}
/* 蓝色星球 */
#commander {
  position: absolute;
  /*  background: ~"url('../star.jpg')";  */
  background: url("star.jpg");
  left: calc(50% - 50px);
  top: calc(50% - 50px);
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
/** 轨道通用样式 */
.orbit {
  position: absolute;
  border-radius: 50%;
  border: 2px #555555 solid;
}
#orbit0 {
  left: calc(50% - 100px);
  top: calc(50% - 100px);
  width: 200px;
  height: 200px;
}
#orbit1 {
  left: calc(50% - 150px);
  top: calc(50% - 150px);
  width: 300px;
  height: 300px;
}
#orbit2 {
  left: calc(50% - 200px);
  top: calc(50% - 200px);
  width: 400px;
  height: 400px;
}
#orbit3 {
  left: calc(50% - 250px);
  top: calc(50% - 250px);
  width: 500px;
  height: 500px;
}
.other {
  position: absolute;
  width: 60px;
  height: 40px;
  border-radius: 50%;
}
#other1 {
  width: 60px;
  height: 60px;
  left: 90%;
  top: 68%;
  background-color: rgba(255, 165, 1, 0.95);
  box-shadow: 10px 10px 2px #6b3c0c;
}
#other2 {
  width: 30px;
  height: 30px;
  left: 5%;
  top: 85%;
  background-color: rgba(255, 107, 1, 0.95);
  box-shadow: 10px 10px 2px rgba(189, 110, 52, 0.95);
}
#other3 {
  width: 40px;
  height: 40px;
  left: 7%;
  top: 5%;
  background-color: rgba(1, 138, 255, 0.95);
  box-shadow: 10px 10px 2px #236dca;
}
.orbit-ship0 {
  top: calc(50% - 105px);
  transform-origin: center 110px;
}
.orbit-ship1 {
  top: calc(50% - 155px);
  transform-origin: center 160px;
}
.orbit-ship2 {
  top: calc(50% - 205px);
  transform-origin: center 210px;
}
.orbit-ship3 {
  top: calc(50% - 255px);
  transform-origin: center 260px;
}
/*飞船整体*/
.space-ship {
  background-color: greenyellow;
  width: 80px;
  height: 25px;
  border: 1px solid #000;
  border-radius: 10px;
  overflow: hidden;
  line-height: 25px;
  text-align: center;
  position: absolute;
  left: calc(50% - 40px);
  transform: rotate(0deg);
}
/** 飞船能量条 */
.energy {
  width: 100%;
  height: 100%;
  background-color: green;
}
.emptyEnergy {
  background-color: red;
}
/* 控制台整体*/
#console {
  background-color: rgba(150, 150, 150, 0.3);
  width: 100%;
  border: 2px solid #ddd;
  margin-top: 10px;
}
/** 控制台标题和操作面板标题 */
#console-title,
#control-title {
  color: #ffffff;
  background-color: #00dcff;
  text-align: center;
  padding: 5px;
}
/** 控制台文本区 */
#console-text {
  color: #ffffff;
  overflow: auto;
  height: 300px;
}
/** 操作面板整体 */
#control {
  background-color: rgba(150, 150, 150, 0.3);
  width: 100%;
  height: 300px;
}
/** 操作面板操作区 */
#control-main {
  overflow: auto;
  color: #ffffff;
  width: 100%;
}
#control-main div {
  margin-bottom: 10px;
}
#changeModel {
  width: 100%;
  padding: 10px 30px;
  font-size: 16px;
  margin-bottom: 25px;
  background-color: rgba(1, 255, 244, 0.95);
}
#changeModel input[type="radio"] {
  width: 20px;
  height: 20px;
  margin-left: 10px;
  margin-right: 5px;
  vertical-align: middle;
}
@media screen and (max-width: 800px) {
  #left {
    width: 100%;
    border: 2px solid #ffffff;
  }
  #planet {
    width: 100%;
    margin-left: 0;
    position: relative;
    height: 600px;
  }
}