body {
    margin: 0; 
    padding: 0; 
    background-color: black; 
}

.content {
    margin-left: auto; 
    margin-right: auto; 
     width:100%; 
    height: 100%;
   /*width:1280px; 
    height: 800px;*/
}

#unityPlayer {
    margin-left: auto; 
    margin-right: auto; 
    height: 800px;
}

.pre-progress{
    position: absolute;
    margin-left: -177px;
    left: 50%;
    top: 40%;
    z-index: 10000;
    margin-top: -80px;
}

.exit-button 
{
    background-image: url('../../images/layout/ExitButton.jpg');
    display: block;
    height: 71px;
    position: absolute;
    width: 70px;
    border: 0;
    right: 0;
    cursor: pointer;
}

iframe > html{
    border:1px solid gray !important;
}

.template-wrap canvas {
    margin: 0 !important;
}

/*#canvas {
    height: 41.6563vw;
    margin-left: auto;
    margin-right: auto;
    max-height: 84.65vh;
    max-width: 135.5vh;
    width: 66.65vw;
}*/

@media screen and (max-width: 1920px){
    .bigger-games {
        height: 800px;
        width: 1280px;
    }

    .smaller-games {
        height: 768px;
        width: 1024px;
    }
}

@media screen and (max-height: 1280){
    .bigger-games {
        height: 800px;
        width: 1280px;
    }

    .smaller-games {
        height: 768px;
        width: 1024px;
    }
}

@media screen and (max-width: 1280px){
    .bigger-games {
        /*height: 66.7vw; /* ratio = 9/16 * 100 = 50.625 */
        height: 62.5vw;
        margin-left: auto;
        margin-right: auto;
        max-height: 100vh;
        /*max-width: 177.778vh; /* 16/9 * 100 = 160 */
        max-width: 160vh; /* 16/9 * 100 = 160 */
        width: 100vw; /* 100% of viewport vidth */
    }
}

@media screen and (max-width: 1024px) {
    .smaller-games {
        height: 75vw;
        margin-left: auto;
        margin-right: auto;
        max-height: 100vh;
        max-width: 133.3333vh; /* 4/3 * 100 = 133.3333 */
        width: 100vw; /* 100% of viewport vidth */
    }
}

@media screen and (max-height: 800px){
    .bigger-games {
        height: 62.5vw;
        margin-left: auto;
        margin-right: auto;
        max-height: 100vh;
        max-width: 160vh;
        width: 100vw;
    }
}

@media screen and (max-height: 768px) {
    .smaller-games {
        height: 75vw;
        margin-left: auto;
        margin-right: auto;
        max-height: 100vh;
        max-width: 133vh; /* 4/3 * 100 = 133.3333 */
        width: 100vw; /* 100% of viewport vidth */
        
    }
}