@font-face {
    font-family: 'Pacifico';
    src: url('../font/pacifico-regular-webfont.eot');
    src: url('../font/pacifico-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../font/pacifico-regular-webfont.woff2') format('woff2'), url('../font/pacifico-regular-webfont.woff') format('woff'), url('../font/pacifico-regular-webfont.ttf') format('truetype'), url('../font/pacifico-regular-webfont.svg#pacifico-regular-webfont') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    text-align: center;
    //background:#fff url(../images/bg-03.jpg) repeat;
    background:#fff;
}

canvas {
    margin: 0 auto;
    opacity: 0;
    animation-name: opacityEl;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

.btn-sound.on {
    background: url(../images/sound-off.jpg) no-repeat;
}

.btn-sound.off {
    background: url(../images/sound-on.jpg) no-repeat;
}

.false-start {
    background: rgba(0, 0, 0, 0.7) url(../images/play.svg) no-repeat scroll center top 46% / 100px auto;
    color: #fff;
    cursor: pointer;
    font-family: 'lobster';
    font-size: 30px;
    height: 921px;
    position: absolute;
    text-align: center;
    width: 631px;
    z-index: 1000;
    margin: 0 auto;
    left: 0;
    right: 0;
}

.false-start div {
    padding-top: 50%;
}

.btn-sound {
    width: 57px;
    height: 57px;
    text-align: center;
    cursor: pointer;
    position: absolute;
    right: 30px;
    top: 0;
}

@keyframes opacityEl {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media only all and (max-width:1024px) {
    body {
        text-align: left;
    }
}

@media only all and (max-width:850px) {
    .btn-sound {
        position: absolute;
        top: -70px;
        right: 5px;
    }
}