/* 全体設定 */
body {
    margin: 0;
    padding: 0;
    background-color: #181818; /* 黒背景 */
    color: #EAEAEA; /* 明るいグレーで文字色 */
    font-family: 'Arial', sans-serif; /* シンプルなフォント */
}

/* ギャラリーのコンテナ */
#gallery-container {
    width: 93%; /* 横幅を最大93%に設定 */
    margin: 0 auto; /* 水平中央寄せ */
    padding: 5rem 0;
    border-radius: 10px; /* 丸みをつける */
}

/* ギャラリー内の画像部分 */
#photo-gallery {
    display: flex;
    flex-direction: column;
    gap: 2%; /* 画像間の縦余白 */
}


/* リロードボタン */
#reload-button {
    display: block;
    margin: 20px auto;
    padding: 12px 30px;
    background-color: #FF9F1C; /* 猫の毛をイメージしたオレンジ色 */
    color: #121212; /* ボタンの文字色 */
    border: none;
    border-radius: 5px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* ボタンのホバー効果 */
#reload-button:hover {
    background-color: #FF7F00; /* 少し暗めのオレンジ */
}

/* 各写真を囲むラッパー */
.photo-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    aspect-ratio: 4 / 3; /* 比率は固定 */
    margin: 0.5% 0;
    overflow: hidden; /* 角丸を超えた部分を隠す */
}

/* 画像自体の装飾 */
.photo-wrapper img {
    max-width: 100%;
    max-height: 96vh;
    width: auto;
    height: auto;
    border-radius: 20px; /* 猫らしい角丸を適用 */
    box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.4);
}

footer {
    text-align: center;
    position: relative; /* 絶対位置ではなく通常のフロー内で配置 */
    margin-top: 4rem /* canvas との間隔を設定 */
}

footer a {
    text-decoration: none; /* 下線を削除 */
    color: #fff; /* 文字色を白に */
    font-size: 1.2rem; /* 少し大きめの文字に */
    font-weight: bold; /* 太字に */ 
}