body {
    margin: 0;
    padding: 0;
    background-color: #181818; /* 黒背景 */
    color: #EAEAEA; /* 明るいグレーで文字色 */
    justify-content: center;
    align-items: center;
}


#canvas {
    width: 92%;
    max-width: 1000px;
    
    display: block;
    margin: 0 auto;
}


.button {
    margin: 1rem;
    display: flex;
    justify-content: center; /* 水平方向に中央揃え */
    align-items: center; /* 垂直方向に中央揃え */
}
#shuffleBtn {
    margin-right: 1%; /* 右寄せ */
}

#newImagesBtn {
    margin-left: 1%; /* 左寄せ */
}

#saveBtn {
    margin-left: 1%; /* 左寄せ */
}

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

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

#imageContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.saveText {
    color: #FF9F1C;
}

.saveImage {
    max-width: 50%; /* 画像が大きすぎないように調整 */
    height: auto;
    margin-bottom: 1rem;
}

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

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