@charset "UTF-8";
/* CSS Document */

/*
   ====================================
                                                                                                                      MOTYW DRAGON BALL SUPER: BEERUS   */

/* Trzy warstwy jak w pozostałych seriach (bg-6): góra przewija się ze stroną, dół jest przyklejony,
   pod spodem stały kosmos. Kompozycja wycentrowana (1920 px) — postacie trzymają się kolumny treści,
   na 4K boki wypełnia sam kosmos. Beerus i Goku są RAZEM w warstwie górnej (poświata Kamehame musi
   łączyć obie postacie niezależnie od wysokości okna); na dole tylko logo serii nad rozbłyskiem.
   Beerus stoi 140 px od lewej krawędzi kadru, żeby jego oczy były w marginesie także przy oknie
   ~1480 px (MacBook). Grafiki z oficjalnego key visualu, krawędzie PNG wygaszone do przezroczystości. */
.tlo-gora {
    position: absolute;
    background: url(../../images/backgrounds/dbsuper-beerus-top.png) center top no-repeat;
    height: 1080px;
    top: 0;
    z-index: -2;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.tlo-dol {
    position: fixed;
    background: url(../../images/backgrounds/dbsuper-beerus-bottom.png) center bottom no-repeat;
    height: 540px;
    bottom: 0;
    z-index: -3;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.tlo-gradient {
    position: fixed;
    top: 0;
    z-index: -4;
    width: 100%;
    height: 100%;
    background: #120a1f url(../../images/backgrounds/dbsuper-beerus-space.jpg) center center no-repeat;
    background-size: cover;
}

/* Okna do 1700 px (laptopy, MacBook ~1480 px): wycentrowany kadr 1920 px byłby obcięty po ~220 px
   z każdej strony i Goku znikałby poza ekranem — te same fragmenty jako osobne PNG kotwiczone
   do krawędzi okna (Beerus lewa, Frieza i Goku prawa). Przeglądarka ładuje tylko grafiki
   z pasującej reguły. */
@media (max-width: 1700px) {
    .tlo-gora {
        background: url(../../images/backgrounds/dbsuper-beerus-top-left.png) left top no-repeat,
                    url(../../images/backgrounds/dbsuper-beerus-top-right.png) right top no-repeat;
    }
}

/* Telefon: treść zasłania cały ekran — zostaje kosmos i Beerus w lewym górnym rogu,
   Frieza z Goku i dolna warstwa z logo są zbędne. */
@media (max-width: 768px) {
    .tlo-gora {
        background: url(../../images/backgrounds/dbsuper-beerus-top-left.png) left top no-repeat;
    }

    .tlo-dol {
        display: none;
    }
}