body {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    margin: 0;
    height: 100vh;
    background-color: #000;
}

canvas {
    border: 0px solid #fff;
    max-width: 100%;
    height: auto;
    transform: scale(1.0);
    opacity: 1;
}

/* スマホ対応のスタイル */
@media (max-width: 768px) {
    canvas {
        width: 98vw;  /* ビューポートの90%の幅 */
        height: auto;  /* 高さを自動調整 */
    }
}

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

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