body {
     background-image: url(../sprites/bgg.png);
    background-size: 50%;
    background-color: #2c4fa8;
}

.canvas-container {
    display: flex;
    justify-content: center; /* 水平方向左对齐 */
    align-items: center; /* 垂直方向居中 */
    width: 100vw; /* 宽度占满父容器 */
    height: 100vh; /* 高度占满父容器 */
    position: relative; /* 添加相对定位 */
}

#canvas, #canvasbg, #canvas_interface {
    position: absolute;
    width: 690px; /* 固定宽度 */
    height: 960px; /* 固定高度 */
}

canvas {
    width: 100%; /* 将canvas宽度设置为占满父容器 */
    height: 100%; /* 将canvas高度设置为占满父容器 */
    image-rendering: optimizeSpeed;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
    -ms-touch-action: none;
}

.ani_hack {
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
    -ms-touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: none;
    -webkit-tap-highlight-color: transparent; /* mobile webkit */
}

/***************FONTS*******************/

@font-face {
    font-family: 'ComicSansMS-Bold';
    src: url('ComicSansMS-Bold.eot?#iefix') format('embedded-opentype'),
    url('ComicSansMS-Bold.woff') format('woff'),
    url('ComicSansMS-Bold.ttf') format('truetype'),
    url('ComicSansMS-Bold.svg#ComicSansMS-Bold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'walibi0615bold';
    src: url('walibi-holland-webfont.eot');
    src: url('walibi-holland-webfont.eot?#iefix') format('embedded-opentype'),
    url('walibi-holland-webfont.woff2') format('woff2'),
    url('walibi-holland-webfont.woff') format('woff'),
    url('walibi-holland-webfont.ttf') format('truetype'),
    url('walibi-holland-webfont.svg#walibi0615bold') format('svg');
    font-weight: normal;
    font-style: normal;
}