@font-face
{
font-family: 'Sigmar One';
src: url('../fonts/SigmarOne-Regular.ttf');
}

body
{
    position: absolute;
    margin: 0px;
    padding: 0px;
    /*padding-top:100px !important;*/
    border: 0px;
    /*visibility: hidden;*/
    overflow: hidden;
    background-color: white;
    /*opacity: 0;*/
    transition: opacity 1s;
    width: 1920px;
    height: 1080px;
}

body::after
{
    content: "wide";
    display: none;
}

.background
{
    position: absolute;
    background-repeat: no-repeat;
    left: 0;
    top: 0;
    width: 1920px;
    height: 1080px;
    background-size: cover;
    background-position: left center;
}

 .background canvas
{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -270px;
    margin-top: -480px;
}

.game-score
{
    width: 500px;
    font-size: 30px;
    font-family: "Sigmar One";
    position:absolute;
    top : 10px;
    left: 50%;
    margin-left: -250px;
    z-index:9999;
}



@media all and (min-aspect-ratio: 1/1) and (max-aspect-ratio: 15/10) {
    /*1024*/
    body
    {
        width: 1440px;
        height: 1080px;
    }

    body::after
    {
        content: "std";
        display: none;
    }

    .background
    {
        left: 0;
        top: 0;
        width: 1440px;
        height: 1080px;
    }

    .background canvas
    {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -270px;
        margin-top: -480px;
    }
}

@media all and (max-aspect-ratio: 1/1)
{
    
    /*768*/
    body
    {
        width: 1080px;
        height: 1920px;
    }

    body::after
    {
        content: "tall";
        display: none;
    }

    .background
    {
        left: 0px;
        top: 0px;
        width: 1080px;
        height: 1920px;
        /*background-size: 100%;*/
        background-position: center center;
    }

    .background canvas
    {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -270px;
        margin-top: -480px;
    }
}

@media all and (min-aspect-ratio: 25/10)
{
    /*2720*/
    body
    {
        width: 3840px;
        height: 1080px;
    }

    body::after
    {
        content: "dwide";
        display: none;
    }

    .background
    {
        left: 0;
        top: 0;
        width: 3840px;
        height: 1080px;
    }

    .background canvas
    {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -270px;
        margin-top: -480px;
    }
}

@media all and (min-aspect-ratio: 9/10) and (max-aspect-ratio: 11/10)
{
    /* 1080 x 1112 */
    body
    {
        width: 1080px;
        height: 1112px;
    }

    body::after
    {
        content: "1080x1920";
        display: none;
    }

    .background
    {
        left: 0;
        top: 0;
        width: 1080px;
        height: 1112px;
    }

    .background canvas
    {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -270px;
        margin-top: -480px;
    }
}