/* 下記の調整は無駄なスクロールバー発生を阻止するための設定です。  */
  html, body {
    min-height: 100vh;
    height: 100vh; 
    overflow-x: hidden;
  }

body {
  margin: 0;
  box-sizing: border-box;
  font-family: sans-serif;
  background-color: #F7F1CC;
  color: #333;
  text-align: center;
  background-image: url(../img/carrot.png), url(../img/carrot.png); 
  background-position: top center, bottom center;
  background-repeat: repeat-x, repeat-x;
  background-size: 70px;
}
 /* 上下にニンジン画像と被らないよう調整 */
  main {
    padding: 20px 0 40px;
  }
/* 各セクション（タイトル・説明文・ボタンなど）のスタイル */
/* タイトル */
h1 {
  font-size: 3.5rem;
  margin-top: 30px;
  color: #744208;
}

/* 説明文 */
.description {
  text-align: center;         /* テキスト中央揃え */
  max-width: 90%;           /* スマホでも画面に収まるようにする */
  width: 520px;             /* 幅を画面サイズに合わせて制限 */
  margin: 10px auto;          /* 上下に余白を入れて中央寄せ */
  font-size: 1em;            /* 文字サイズ */
  line-height: 1.2;           /* 行間を少し広げて読みやすく */
  color: #333;                /* テキストカラー（ダークグレー） */
  background-color: #fff5e1;  /* 背景 */
  padding: 10px;              /* 内側の余白 */
  border-radius: 10px;        /* 角を丸くして柔らかく */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);  /* ふんわり影 */
  }
  .description p {
  margin: 0;
}

.main-image {
  width: 200px;
  height: auto;
  display: block;
  margin: 10px auto;
}

/* 全体のボタンの並びを調整 */
.flex-button {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap:10px;
  max-width: 250px;
  margin:0 auto;
}

/* ボタンをデザイン */
/* 初級・中級・上級ボタンのスタイル #はid属性*/
#beginnerBtn,
#intermediateBtn,
#advancedBtn {
  background-color: #fac365;
  color: white;
  padding: 10px 30px;
  border-radius: 8px;
  border: none;
  font-size: 1.0rem;
  cursor: pointer;
}

#beginnerBtn:hover,
#intermediateBtn:hover,
#advancedBtn:hover{
  background-color: #fdb230;
}

/* ボタンの各種設定 */
#startStopBtn,
#tweetBtn,
#mainStopBtn {
  background-color: #fac365;
  color: white;
  padding: 10px 30px;
  border-radius: 5px;
  border: none;
  font-size: 1.0rem;
  cursor: pointer;
}

#startStopBtn:hover,
#tweetBtn:hover{
  background-color: #fdb230;
}

/* 戻るボタンだけ別色にしてみます */
#mainStopBtn {
  background-color: #aac0c6;
}

#mainStopBtn:hover {
  background-color: #91b2bb;
}

/* スマホ用CSS */
/* スマホサイズ以下の場合だけ適用されるCSS */
/* ▼ スマホ用スタイル（768px以下） */
@media (max-width: 768px) {

  main {
    padding: 5px 0 15px;  /* mainの上下余白をスマホ向けに圧縮 */
  }

  h1 {
    font-size: 2rem;
    margin-top: 40px;
  }
  .description {
    font-size: 0.9rem;   /* ←追加で入れると読みやすくなる */
    padding: 8px;       /* ←少し狭めてスマホ用に調整 */
    line-height: 1.4;    /* ←行間少し広げると見やすい */
  }
  .main-image {
    margin: 8px auto;     /* スマホ時の画像余白も少なく */
    max-width: 100%;
    height: auto;
  }
  #message {
    max-width: 95%;
    font-size: 1rem;
    line-height: 1.4;
    margin: 10px auto;
    padding: 10px;
  }

  #messageContainer {
    width: 150px;
    height: 150px;
  }

  #timer {
    font-size: 3rem;
  }

  #beginnerBtn,
  #startStopBtn,
  #tweetBtn {
    font-size: 0.85rem;
    padding: 6px 16px;
  }
}