nav ul {
  list-style: none; /* リストのデフォルトの点を消す */
  padding: 0; /* パディングを0にする */
  margin: 0; /* マージンを0にする */
  display: flex; /* フレックスボックスを使って横並びにする */
}

nav li {
  margin-right: 20px; /* 項目間のスペースを調整 */
}

body {
    display: flex;
    flex-direction: column;
    align-items: center; 
    min-height: 100vh;
    margin: 0;
    background-color: #CCFFCC;
}

.center-text {
  text-align: center;
}

main {
    flex: 1; /* メインコンテンツが残りのスペースを占めるようにする */
}


h1 {
    margin-bottom: 20px; /* h1とフォームの間に余白を追加 */
    font-family: 'GlimChe', sans-serif; /* GlimCheフォントを指定 */
    color: #009933; /* フォントカラーを指定 */
    font-size: 20px
    
}

h2 {
    margin-bottom: 20px; /* h1とフォームの間に余白を追加 */
    font-family: 'GlimChe', sans-serif; /* GlimCheフォントを指定 */
    color: #009933; /* フォントカラーを指定 */
    justify-content: center;
}


ul {
    list-style-type: none; /* リストのスタイルをリセット */
    padding: 0; /* パディングをリセット */
}

li {
    margin: 10px 0; /* リストアイテムの間に余白を追加 */
}

footer {
    background-color: #009933; /* フッターの背景色を#009933に変更 */
    position: relative; /* 固定しない */
    left: 0;
    bottom: 0; /* 下に固定 */
    width: 100%; /* 幅を100%に変更 */
    color: #fff;
    text-align: left; /* 左寄せに変更 */
    padding: 10px 0;
}

footer h3 {
    font-size: 1em; /* h3の文字の大きさを通常のサイズに設定 */
}

footer a {
    font-size: 0.9em; /* h3より少し小さいサイズに設定 */
}

.image-container {
    display: flex; /* 横並びにする */
    justify-content: center; /* 中央に配置 */
    flex-wrap: wrap; /* 行がいっぱいになったら折り返す */
}

.image-container img {
   width: 30%; /* 各画像の幅を設定 */
   margin: 10px; /* 画像の間にスペースを作る */
}

header {
  width: 100%; /* ヘッダー全体を幅100%に */
}

/* nav ul を横幅いっぱいにしてフレックス */
nav ul {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
  width: 100%;
}

nav li {
  margin-right: 20px;
}

.logout-button {
  margin-left: auto;
}