.dash {
  background-color: black;
  border: 1px dashed white;
}

body {
  background-color: black;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Source Sans Pro", sans-serif;
}

button {
  background-color: black;
  color: white;
}
button:hover {
  background-color: gray;
}

#field_show {
  display: flex;
  flex-direction: row;
}

#field_item {
  text-align: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 1024px;
  height: 30px;
  padding-top: 10px;
}

#field_rabbit {
  width: 100px;
  text-align: right;
}
#field_material {
  width: 824px;
}

#field_display {
  text-align: center;
  width: 1024px;
  height: 400px;
}

#field_compound {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 283px;
  height: 200px;
}
#field_compound > div {
  display: flex;
  flex-direction: row;
}

#field_input {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 206px;
  height: 200px;
}

.text_important {
  background-color: #aa9102;
}

#field_rocket {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 244px;
  height: 200px;
}
#field_rocket > div {
  margin-top: 0px;
  margin-bottom: 5px;
  height: 30px;
  font-size: 30px;
}
#field_rocket > button {
  margin: 10px;
  height: 70px;
}

#field_display_center {
  width: 510px;
}
.color_moon {
  color: yellow;
}
.effect_fire {
  color: red;
}

#ending_center {
  text-align: center;
  width: 1024px;
  height: 643px;
}

#field_story {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  text-align: left;
  width: 285px;
  height: 200px;
}

.text_log {
  border: 1px dashed white;
  margin: 5px;
  height: 30px;
}

.button_comp {
  margin-left: 5px;
  margin-right: 5px;
  width: 200px;
  height: 30px;
  font-size: 11px;
}

.field_input_item {
  display: flex;
  flex-direction: row;
  font-size: 11px;
}

.field_input_item > button,
span {
  width: 70px;
  height: 30px;
}
.field_input_item > button {
  background-color: #1a2656;
}

#field_input > button {
  height: 50px;
}

#field_display {
  display: flex;
  flex-direction: row;
}

#field_display_left {
  display: flex;
  flex-direction: column;
  width: 300px;
}
#field_display_left > button {
  display: flex;
  flex-direction: row;
  width: 280px;
  margin: 0 auto;
  margin-top: 10px;
  height: 100px;
}
#field_display_left > h2 {
  margin-top: 5px;
  margin-bottom: 5px;
}
.field_display_button_left {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 95px;
}
.field_display_button_right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  width: 200px;
  height: 95px;
}
.field_display_button_right_up {
  display: flex;
  flex-direction: row;
}
.field_display_button_right_up_left {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 30px;
}
.field_display_button_right_up_right {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 30px;
  margin-left: 10px;
}

.field_display_button_right_down {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 160px;
  height: 30px;
  margin-top: 10px;
}

#field_display_right {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 256px;
}

.button_quest {
  margin: 0px auto;
  margin-top: 10px;
  width: 240px;
  height: 65px;
}

#field_down_mid {
  display: flex;
  flex-direction: row;
}