/* cssの初期化 */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* canvas1だけしているcss */
#canvas1{
    border: 5px solid black;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #4d79bc;

    /* canvas1の画像比率の縮尺を固定 */
    max-width: 100%;
    max-height: 100%;

    /* googleフォントのCSSも貼り付ける */
    font-family: 'Bangers', cursive;
}

/* htmlで表示される：各layer1-4を表示させない
＞＞canvas内で表示させるため */
#layer1, #layer2, #layer3, #layer4, #player, #angler1, #angler2, #lucky,
#projectile, #gears, #hivewhale, #drone, #smokeExplosion, #fireExplosion {
    display: none;
}