html, body {
    height: 100%;
    padding: 0; margin: 0
}
body { padding: 0; margin: 0 }

body {
    background-color: #0B386A;
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: center;
    background-image: url(img/smartgames_webgl_background.jpg);
    color: #ffffff  ;
}

#unity-canvas {
    border:
            3px solid rgb(255, 255, 255);
    border-radius:
            5px;
    background: #0D264D;
}

#unity-fullscreen-button {
    position: relative;
    top: 11px;
    left: -11px;
}

#copyright {
    text-align: center;
    position: absolute;
    bottom: 20px;
    width: 960px;
}

#unity-canvas:fullscreen {
    border: none;
}

@font-face {
    font-family: 'VAGRounded';
    src: url('fonts/VAGRoundedStd-Light.woff2');
}
body {
    font-family: VAGRounded,Helvetica,"sans-serif";
}

#unity-footer {
    display: none;
}

html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#top-banner {
    width: 970px;
    height: 90px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#bottom-banner {
    margin: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#bottom-banner img {
    width: 45%;
    text-align: center;
    margin: 0 auto;
}

#copyright {
    font-size: 10px;
}

.main-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.side-banner {
    width: 300px;
    height: 600px;
    overflow: hidden;
}

#container {
    width: 960px;
    height: 600px;
    position: relative;
}

.ad-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#app-banner {
    display: none;
}

#unity-container.unity-mobile, body.unity-mobile #desktop-wrapper, body.unity-mobile #unity-fullscreen-button, body.unity-mobile #top-banner.top_bottom_wrapper {
    display: none;
}

body.unity-mobile .top_bottom_wrapper, body.unity-mobile #copyright, body.unity-mobile #bottom-banner img, body.unity-mobile #app-banner, body.unity-mobile #app-banner img {
    width: 100%;
    display: block;
}

@media screen and (max-width: 1600px) {
    #right-banner {
        display: none;
    }
    .top_bottom_wrapper, #copyright {
        width: 1300px;
    }
    .main-wrapper {
        align-items: flex-start;
    }

    #top-banner.top_bottom_wrapper {
        width: 1280px;
    }
}

@media screen and (max-width: 1280px) {
    #left-banner {
        display: none;
    }

    .top_bottom_wrapper {
        width: 980px;
    }

    #top-banner.top_bottom_wrapper, #copyright  {
        width: 970px;
    }


}

@media screen and (max-height: 870px) {
    #copyright {

        position: relative;
        top: 10px;
    }
}