body { 
    font-family: sans-serif; 
    line-height: 1.6; 
    padding: 20px; 
    /* 括弧を閉じ、背景画像の設定を追加 */
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('背景地獄.png');
    background-size: cover; /* 画像を画面全体に広げる設定 */
    background-position: center; /* 画像を中央に配置 */
} 

.card { 
    background: white; 
    padding: 15px; 
    margin: 10px 0; 
    border-radius: 8px; 
    cursor: pointer; 
    border-left: 5px solid #333; 
}

.hidden { display: none; }

h1 { color: #2c3e50; }

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    25% { transform: translate(-1px, -2px) rotate(-1deg); }
    50% { transform: translate(-3px, 0px) rotate(1deg); }
    75% { transform: translate(3px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -1px) rotate(-1deg); }
}

#warning-img {
    width: 300px; 
    animation: shake 0.3s infinite;
}
button {
    padding: 15px 30px;         /* ボタンの内側の余白（上下15px、左右30px） */
    font-size: 2.2rem;          /* 文字サイズ */
    font-weight: bold;          /* 太字 */
    background-color: blue;  /* 背景色（赤系） */
    color: white;               /* 文字色（白） */
    border: none;               /* 枠線を消す */
    border-radius: 8px;         /* 角を丸くする */
    cursor: pointer;            /* マウスを乗せたときに指マークにする */
    transition: background 0.3s; /* ホバー時の変化を滑らかにする */
    text-align: center; /* 中の要素（ボタンなど）を中央揃えにする */
    margin-top: 40px;
}

button:hover {
    background-color: #c0392b;  /* マウスを乗せたときに少し暗い赤にする */
}
footer {
    text-align: center; /* これでボタンが中央に来ます */
    margin-top: 40px;
    padding: 20px;
}
#warning-img {
    width: 90%;          /* 画面幅の90%を使用 */
    max-width: 800px;    /* ただし最大でも800pxまで */
    height: auto;
    animation: shake 0.3s infinite;
    display: block;
    margin: 20px auto;
}