/*全体
（フォント参考元：https://fromkato.com/webdev/css/properties/font-family#font1001）*/
body {
  text-align: center;
  font-family: sans-serif;
  background-color: #e6ffcc;
}

/*説明ボックス
（ボックスデザイン参考元：https://saruwakakun.com/html-css/reference/box）
（中央寄せ引用元：https://proengineer.internous.co.jp/content/columnfeature/6063#2）*/
.explain_box {
    width: 40%;
    height: 30%;
    padding: 0.2em 0.5em;
    margin: 2em 0.5em;
    font-size: 24px;
    color: #ffffff;
    background: #5cb5b8;
    box-shadow: 0px 0px 0px 10px #5cb5b8;
    border: dashed 2px #ffffff;
    border-radius: 8px;
    margin: auto;
}

.explain_box p {
    margin: 35;
    padding: 0;
}

/*スタートボタン*/
.start_button {
  width: 40%;
  padding: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #666c67;
}

/*ゲージ*/
#gages {
  font-weight: bold;
  color: #666c67;
}

/*吹き出し
（参考元：https://saruwakakun.com/html-css/reference/speech-bubble）*/
#CHAT {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #666c67;
  font-size: 20px;
  background: #ffffff;
}

#CHAT:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #ffffff;
}

/*ほげほげっちの大きさ*/
.hogetti {
  width: 30%;
}

/*コマンド*/
#commands {
  color: #666c67;
}