@font-face {
    font-family: 'got';
    src: url('../font/got.ttf');
}
html, body {
    background: #7fb741;
    font-size: 27px;
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    width:100%;
    height:100%;
}

canvas {
    background: #fff;
    display: block;
    width: 100%;
    height: 100%;
}

.controls {
    text-align: right;
    color: #aaa;
}
.bottom_info_wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #87be44;
    width: 100%;
    padding: 30px 0 30px 40px;
    box-sizing: border-box;
}
.bottom_info {
    color: #fff;
    font-size: 16px;
    background: url(../img/info_bg.png);
    background-size: 100% 100%;
    padding: 20px 40px;
    width: 783px;
    box-sizing: border-box;
    max-width: calc(100% - 80px);
}
.bottom_info h2 {
    font-size: 28px;
    margin: 0 0 5px 0;
}
.bottom_info p {
    margin: 0;
    line-height: 1.5;
}

.popup{
    position: absolute;
    top: -90px;
    bottom: 0;
    left:0;
    right:0;
    margin: auto;
    width:60%;
    max-width: 567px;
    height: 80%;
    max-height: 600px;
    display: none;
    z-index: 10;
}

.popup-inner{
    background: url(../img/popup.png) no-repeat center;
    position: absolute;
    width:100%;
    height: 100%;
}

.popup .text{
    position: relative;
    padding: 30px;
    padding-top: 90px;
    font-size: 0.85em;
    line-height: 1.66;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-align: center;
}

.popup .text strong{
    font-size: 1.2em;
    line-height: 1.2em;
}

.popup .share{
    margin: 40px auto 0;
    text-align: center;
}

.popup .play{
    position: absolute;
    bottom: 37px;
    text-transform: uppercase;
    text-align: center;
    font-size: 25px;
    font-weight: bold;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
}

.popup .logos{
   position: absolute;
   bottom: -160px;
   text-align: center;
   width: 100%;
}

.langs{
    position: absolute;
    top: 20px;
    right: 20px;
}
.langs img{
    cursor: pointer;
}


/* Smartphones (portrait) ----------- */
@media only screen and (max-height: 800px) {
    .popup .share{
        margin: 10px auto 0;
        text-align: center;
    }
}
@media only screen and (max-height: 500px) {
    body{
        font-size: 15px;
        line-height: 16px;
    }

    .popup{
        top: -100px;
        max-height: 250px;
    }

    .popup .share{
        position: absolute;
        right: 30px;
        top: 80px;
        width: 220px;
    }
    .popup .share img{
        max-width: 80px;
    }
    .popup .logos{
       position: absolute;
       bottom: -120px;
       text-align: center;
    }
}
@media only screen and (max-width: 700px) {
    .popup{
        width: 80%;
    }
}
@media only screen and (max-height: 400px) {
    .popup{
        max-height: 340px;
    }
}

body::after{
    position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
    content:url(../img/enemy/butelka.gif) url(../img/enemy/gora_lodowa.png) url(../img/enemy/kolo_ratunkowe.png)
    url(../img/enemy/kotwica.png) url(../img/enemy/krab.gif) url(../img/enemy/latarnia_morska.png) url(../img/enemy/nurek.gif)
    url(../img/enemy/osmiornica_zla.gif) url(../img/enemy/rekin.png) url(../img/enemy/syrena.png) url(../img/enemy/vader_wodny.png)
    url(../img/award/komoda.png) url(../img/award/krzeslo_1.png) url(../img/award/krzeslo_2.png) url(../img/award/lampa_stojaca.png)
    url(../img/award/lampa_wiszaca.png) url(../img/award/sofa.png) url(../img/award/wanna.png);
}