@font-face {
    font-family: 'main';
    src: url('https://staticfr.skillcap.net/htmlGames/durak/shared/fonts/main.woff') format('woff'),
        url('https://staticfr.skillcap.net/htmlGames/durak/shared/fonts/main.ttf'),
        url('https://staticfr.skillcap.net/htmlGames/durak/shared/fonts/main.svg#main') format('svg');
}

@font-face {
    font-family: 'Bankir';
    src: url('https://staticfr.skillcap.net/htmlGames/durak/shared/fonts/DecreeNarrow.eot?#iefix') format('embedded-opentype'),
        url('https://staticfr.skillcap.net/htmlGames/durak/shared/fonts/DecreeNarrow.woff') format('woff'),
        url('https://staticfr.skillcap.net/htmlGames/durak/shared/fonts/DecreeNarrow.ttf') format('truetype'),
        url('https://staticfr.skillcap.net/htmlGames/durak/shared/fonts/DecreeNarrow.svg#DecreeNarrow') format('svg');
}

html,
body {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: #0d0d16;
    background-image: url("https://staticfr.skillcap.net/htmlGames/durak/shared/img/lobby/bkg_texture.png");
}

#content {
    position: absolute;
    background-repeat: repeat;
    background-color: #2482C8;
    background-size: 30%;
    width: 100%;
    height: 100%;
    display: none;
    left: 50%;
    transform: translate(-50%, 0%);
    bottom: 0;
}

#loader {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    background-image: url("https://staticfr.skillcap.net/htmlGames/durak/shared/img/loading.png"), url("https://staticfr.skillcap.net/htmlGames/durak/shared/img/lobby/bkg_texture.png");
    background-position: 50% 40%;
    background-repeat: no-repeat, repeat;
    background-color: #0D0A05;
}

#loader_spinner {
    position: relative;
    top: 58%;
    left: 50%;
    animation: spin 0.8s steps(8, end) infinite;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
}

#wrongOrientation {
    background-image: url("https://staticfr.skillcap.net/htmlGames/dominoes/shared/img/rotate.png");
    background-position: 50% 45%;
    background-repeat: no-repeat;
    background-color: #333232;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: none;
}


@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

canvas {
    z-index: 0;
}