/* =========================================================
   KROJE NAGLOWKOW - Cinzel i Cinzel Decorative
   SIL Open Font License 1.1, tresc w fonts/CINZEL-OFL.txt

   Pliki lezą u nas, a nie w cudzym serwisie: strona nie zalezy przez to
   od dostepnosci obcego serwera i nic nie mowi mu o odwiedzajacych.

   Kazdy krój ma dwa pliki. W podstawowym nie ma polskich znakow - siedza
   w osobnym podzbiorze "latin-ext", a unicode-range mowi przegladarce,
   po ktory plik siegnac dla ktorego znaku. Poprzedni krój (OptimusPrinceps)
   nie mial ich wcale i "Ł" wypadalo z zupelnie innego fontu.
   ========================================================= */

@font-face {
    font-family: "Cinzel";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fonts/cinzel-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


@font-face {
    font-family: "Cinzel";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fonts/cinzel-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


@font-face {
    font-family: "Cinzel Decorative";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/cinzel-dec-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


@font-face {
    font-family: "Cinzel Decorative";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/cinzel-dec-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


html,
body {

    margin: 0;
    padding: 0;

    width: 100%;
    min-height: 100%;

    background: #000;
}


body {

    overflow-x: hidden;
}


/* =========================================================
   G��WNE T�O STRONY
   ========================================================= */

.wrapper {

    position: relative;

    width: 100%;

    /* Bez sztywnej wysokosci - inaczej "overflow: hidden" przycinalby
       aktualnosci i rozwiniety panel konta. */
    min-height: 2160px;

    background-image:
        url("imgs/bg.png");

    background-repeat:
        no-repeat;

    background-position:
        top center;

    background-size:
        100% auto;

    background-color:
        #000;

    overflow:
        hidden;
}


/* =========================================================
   WYCIEMNIENIE G�RY I DO�U
   ========================================================= */

.wrapper::after {

    content: "";

    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    pointer-events:
        none;

    z-index: 2;

    background:

        linear-gradient(
            to bottom,

            rgba(0, 0, 0, 1) 0%,

            rgba(0, 0, 0, 0.82) 2%,

            rgba(0, 0, 0, 0.45) 6%,

            rgba(0, 0, 0, 0.12) 12%,

            rgba(0, 0, 0, 0) 20%,

            rgba(0, 0, 0, 0) 78%,

            rgba(0, 0, 0, 0.12) 86%,

            rgba(0, 0, 0, 0.48) 93%,

            rgba(0, 0, 0, 0.85) 97%,

            rgba(0, 0, 0, 1) 100%
        );
}


/* =========================================================
   HEADER
   ========================================================= */

.hero-header {

    position: relative;

    width: 100%;
    height: 700px;

    z-index: 10;
}


/* =========================================================
   LOGO
   ========================================================= */

.logo-link {

    position: absolute;

    top: 30px;
    left: 50%;

    transform:
        translateX(-50%);

    display: block;

    /* Szerokosc bierze sie z obrazka, wiec ograniczenie musi stac tutaj -
       inaczej odnosnik rozlalby sie na caly naglowek. */
    max-width: 25%;

    z-index: 12;

    transition:
        filter 0.25s ease;
}


.logo-link:hover {

    /* Delikatne rozjasnienie - zeby bylo widac, ze logo jest klikalne. */
    filter:
        brightness(1.07);
}


.main-logo {

    display: block;

    width: auto;

    max-width: 100%;

    height: auto;

    filter:

        drop-shadow(
            0 3px 2px
            rgba(0, 0, 0, 0.95)
        )

        drop-shadow(
            0 8px 8px
            rgba(0, 0, 0, 0.85)
        )

        drop-shadow(
            0 16px 15px
            rgba(0, 0, 0, 0.70)
        )

        drop-shadow(
            0 28px 28px
            rgba(0, 0, 0, 0.50)
        );

    z-index: 12;
}


/* =========================================================
   NAVBAR
   ========================================================= */

.main-navbar {

    position: absolute;

    top: 375px;
    left: 50%;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;
    justify-content: center;

    width: 1120px;
    max-width: 82vw;

    height: 58px;

    padding:
        0 75px;

    box-sizing:
        border-box;


    background:

        linear-gradient(
            to bottom,

            rgba(31, 13, 9, 0.88)
            0%,

            rgba(13, 7, 6, 0.94)
            50%,

            rgba(4, 3, 3, 0.96)
            100%
        );


    border-top:

        1px solid
        rgba(189, 107, 60, 0.55);


    border-bottom:

        1px solid
        rgba(120, 48, 31, 0.70);


    box-shadow:

        0 4px 8px
        rgba(0, 0, 0, 0.65),

        0 12px 28px
        rgba(0, 0, 0, 0.55),

        inset 0 1px 0
        rgba(255, 192, 126, 0.08),

        inset 0 -1px 0
        rgba(0, 0, 0, 0.85);


    z-index: 11;
}


/* =========================================================
   PO�WIATA POD NAVBAREM
   ========================================================= */

.main-navbar::after {

    content: "";

    position: absolute;

    left: 5%;
    right: 5%;

    bottom: -18px;

    height: 24px;

    background:

        radial-gradient(
            ellipse at center,

            rgba(126, 35, 18, 0.30)
            0%,

            rgba(0, 0, 0, 0)
            72%
        );

    pointer-events:
        none;
}


/* =========================================================
   MENU
   ========================================================= */

.navbar-menu {

    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    gap: 0;

    margin: 0;
    padding: 0;

    list-style:
        none;

    z-index: 2;
}


.navbar-menu li {

    position: relative;

    flex: 1;

    margin: 0;
    padding: 0;

    text-align: center;
}


/* =========================================================
   SEPARATORY NAVBARU
   ========================================================= */

.navbar-menu
li:not(:last-child)::after {

    content: "";

    position: absolute;

    top: 50%;
    right: 0;

    transform:
        translateY(-50%);

    width: 1px;
    height: 21px;

    background:

        linear-gradient(
            to bottom,

            transparent,

            rgba(186, 94, 55, 0.68),

            transparent
        );
}


/* =========================================================
   LINKI NAVBARU
   ========================================================= */

.navbar-menu a {

    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 58px;

    padding:
        0 30px;

    box-sizing:
        border-box;

    color:
        #d9c5ad;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        15px;

    font-weight:
        600;

    letter-spacing:
        1px;

    text-decoration:
        none;

    text-shadow:

        0 1px 2px
        #000,

        0 2px 5px
        rgba(0, 0, 0, 0.95);

    transition:

        color 0.25s ease,

        text-shadow 0.25s ease,

        background-color 0.25s ease;
}


/* =========================================================
   LINIA POD LINKIEM
   ========================================================= */

.navbar-menu a::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: 7px;

    transform:
        translateX(-50%);

    width: 0;

    height: 1px;

    background:

        linear-gradient(
            to right,

            transparent,

            #c4663e,

            #e7b073,

            #c4663e,

            transparent
        );

    box-shadow:

        0 0 5px
        rgba(204, 91, 47, 0.60);

    transition:
        width 0.25s ease;
}


/* =========================================================
   HOVER NAVBARU
   ========================================================= */

.navbar-menu a:hover {

    color:
        #f0d6af;

    background:

        linear-gradient(
            to bottom,

            rgba(141, 52, 26, 0.08),

            rgba(141, 52, 26, 0.16),

            rgba(141, 52, 26, 0.05)
        );

    text-shadow:

        0 1px 2px
        #000,

        0 2px 6px
        #000,

        0 0 10px
        rgba(177, 74, 38, 0.50);
}


.navbar-menu a:hover::after {

    width:
        52%;
}


/* =========================================================
   OZDOBY PO BOKACH NAVBARU
   ========================================================= */

.navbar-decoration {

    position: absolute;

    top: 50%;

    width: 110px;
    height: 1px;

    pointer-events:
        none;
}


.navbar-decoration-left {

    left: -95px;

    background:

        linear-gradient(
            to right,

            transparent,

            rgba(169, 79, 45, 0.85)
        );
}


.navbar-decoration-right {

    right: -95px;

    background:

        linear-gradient(
            to left,

            transparent,

            rgba(169, 79, 45, 0.85)
        );
}


.navbar-decoration-left::after,
.navbar-decoration-right::after {

    content: "";

    position: absolute;

    top: 50%;

    width: 6px;
    height: 6px;

    transform:

        translateY(-50%)
        rotate(45deg);

    background:
        #8f422b;

    border:

        1px solid
        rgba(218, 136, 86, 0.60);

    box-shadow:

        0 0 8px
        rgba(145, 55, 28, 0.55);
}


.navbar-decoration-left::after {

    right: -2px;
}


.navbar-decoration-right::after {

    left: -2px;
}


/* =========================================================
   LOGIN + REJESTRACJA
   ========================================================= */

.access-actions {

    position: absolute;

    top: 462px;
    left: 0;

    width: 100%;
    height: 55px;

    z-index: 12;

    pointer-events: none;
}


/* =========================================================
   WSP�LNY STYL LOGIN / REJESTRACJA
   ========================================================= */

.access-link {

    position: absolute;

    top: 0;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 11px;

    min-width: 170px;

    padding:
        10px 17px 12px;

    margin: 0;

    border: 0;

    outline: none;

    background:
        transparent;

    color:
        #c9ad89;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        14px;

    font-weight:
        600;

    letter-spacing:
        2px;

    text-decoration:
        none;

    text-align:
        center;

    cursor:
        pointer;

    text-shadow:

        0 2px 2px
        rgba(0, 0, 0, 1),

        0 3px 6px
        rgba(0, 0, 0, 0.95);

    pointer-events:
        auto;

    transition:

        color 0.25s ease,

        text-shadow 0.25s ease,

        transform 0.25s ease;
}


/* LOGIN */

.access-login {

    left: 40%;
}


/* REJESTRACJA */

.access-register {

    left: 60%;
}


/* =========================================================
   LINIA POD LOGIN / REJESTRACJA
   ========================================================= */

.access-link::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: 3px;

    transform:
        translateX(-50%);

    width: 50%;

    height: 1px;

    background:

        linear-gradient(
            to right,

            transparent,

            rgba(121, 48, 29, 0.5),

            rgba(201, 118, 68, 0.8),

            rgba(121, 48, 29, 0.5),

            transparent
        );

    transition:
        width 0.25s ease;
}


/* =========================================================
   MA�E OZDOBY LOGIN / REJESTRACJA
   ========================================================= */

.access-small-decoration {

    display: inline-block;

    color:
        #874329;

    font-size:
        6px;

    transform:
        rotate(45deg);

    text-shadow:

        0 0 5px
        rgba(167, 69, 34, 0.5);

    transition:

        color 0.25s ease,

        transform 0.25s ease;
}


.access-text {

    position: relative;
}


/* =========================================================
   HOVER LOGIN / REJESTRACJA
   ========================================================= */

.access-link:hover {

    color:
        #f1d0a0;

    text-shadow:

        0 2px 2px
        #000,

        0 3px 7px
        #000,

        0 0 10px
        rgba(180, 75, 36, 0.55);

    transform:

        translateX(-50%)
        translateY(-2px);
}


.access-link:hover::after {

    width:
        78%;
}


.access-link:hover
.access-small-decoration {

    color:
        #cf7947;

    transform:

        rotate(45deg)
        scale(1.2);
}


/* =========================================================
   DOWNLOAD COIN
   ========================================================= */

.download-coin-link {

    position: absolute;

    /*
     * Lekko podniesione do g�ry.
     */
    top: 440px;
    left: 50%;

    transform:
        translateX(-50%);

    display: block;

    width: auto;
    height: auto;

    text-decoration: none;

    z-index: 13;
}


.download-coin {

    display: block;

    width: auto;
    height: auto;

    max-width: 200px;

    transform:
        scale(1);

    transform-origin:
        center center;

    filter:

        drop-shadow(
            0 5px 5px
            rgba(0, 0, 0, 0.8)
        )

        drop-shadow(
            0 13px 15px
            rgba(0, 0, 0, 0.6)
        );

    transition:

        transform 0.25s ease,

        filter 0.25s ease;
}


/* =========================================================
   DOWNLOAD COIN - HOVER
   ========================================================= */

.download-coin-link:hover
.download-coin {

    transform:
        scale(1.055);

    filter:

        drop-shadow(
            0 5px 5px
            rgba(0, 0, 0, 0.85)
        )

        drop-shadow(
            0 15px 18px
            rgba(0, 0, 0, 0.70)
        )

        drop-shadow(
            0 0 10px
            rgba(174, 76, 36, 0.22)
        );
}


/* =========================================================
   MODAL LOGOWANIA
   ========================================================= */

.login-modal {

    display: none;

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    z-index: 9999;

    background:

        radial-gradient(
            circle at center,

            rgba(62, 20, 12, 0.18),

            rgba(0, 0, 0, 0.82)
            48%,

            rgba(0, 0, 0, 0.94)
            100%
        );

    backdrop-filter:
        blur(3px);

    -webkit-backdrop-filter:
        blur(3px);
}


/* =========================================================
   PANEL LOGOWANIA
   ========================================================= */

.login-modal-panel {

    position: absolute;

    top: 50%;
    left: 50%;

    transform:

        translate(-50%, -50%);

    width: 390px;

    max-width:
        calc(100% - 40px);

    padding:

        37px
        44px
        35px;

    box-sizing:
        border-box;

    background:

        radial-gradient(
            ellipse at top,

            rgba(102, 40, 20, 0.16),

            transparent
            55%
        ),

        linear-gradient(
            to bottom,

            rgba(28, 13, 10, 0.98),

            rgba(11, 6, 5, 0.99)
        );

    border:

        1px solid
        rgba(154, 73, 42, 0.62);

    box-shadow:

        0 20px 55px
        rgba(0, 0, 0, 0.9),

        inset 0 1px 0
        rgba(239, 159, 96, 0.08);

    text-align:
        center;
}


/* =========================================================
   NAG��WEK LOGOWANIA
   ========================================================= */

.login-modal-panel h2 {

    margin:
        5px 0 14px;

    padding: 0;

    color:
        #d3b28a;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        19px;

    font-weight:
        500;

    letter-spacing:
        4px;

    text-shadow:

        0 2px 3px
        #000,

        0 0 8px
        rgba(133, 54, 28, 0.45);
}


.login-modal-decoration {

    color:
        #8f462b;

    font-size:
        8px;

    transform:
        rotate(45deg);

    display:
        inline-block;
}


.login-modal-line {

    width: 75%;
    height: 1px;

    margin:
        0 auto 27px;

    background:

        linear-gradient(
            to right,

            transparent,

            rgba(159, 69, 37, 0.75),

            rgba(213, 129, 72, 0.85),

            rgba(159, 69, 37, 0.75),

            transparent
        );
}


/* =========================================================
   FORMULARZ LOGOWANIA
   ========================================================= */

.login-form {

    display: flex;

    flex-direction:
        column;

    gap:
        15px;
}


.login-form input {

    width:
        100%;

    height:
        43px;

    padding:
        0 16px;

    box-sizing:
        border-box;

    outline:
        none;

    border:

        1px solid
        rgba(115, 54, 34, 0.55);

    background:

        rgba(3, 2, 2, 0.72);

    color:
        #d8c1a4;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        12px;

    letter-spacing:
        1px;

    text-align:
        center;

    box-shadow:

        inset 0 3px 8px
        rgba(0, 0, 0, 0.65);

    transition:

        border-color 0.25s ease,

        box-shadow 0.25s ease;
}


.login-form input::placeholder {

    color:
        rgba(187, 157, 126, 0.55);
}


.login-form input:focus {

    border-color:
        rgba(179, 91, 50, 0.85);

    box-shadow:

        inset 0 3px 8px
        rgba(0, 0, 0, 0.65),

        0 0 9px
        rgba(132, 49, 25, 0.25);
}


/* =========================================================
   PRZYCISK ZALOGUJ
   ========================================================= */

.login-submit {

    width:
        100%;

    height:
        43px;

    margin-top:
        6px;

    border:

        1px solid
        rgba(143, 65, 38, 0.67);

    background:

        linear-gradient(
            to bottom,

            rgba(65, 26, 17, 0.95),

            rgba(27, 11, 8, 0.98)
        );

    color:
        #d4b48e;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        12px;

    font-weight:
        600;

    letter-spacing:
        2px;

    cursor:
        pointer;

    text-shadow:

        0 2px 3px
        #000;

    transition:

        color 0.25s ease,

        border-color 0.25s ease,

        background 0.25s ease;
}


.login-submit:hover {

    color:
        #f0cf9f;

    border-color:
        rgba(198, 105, 57, 0.82);

    background:

        linear-gradient(
            to bottom,

            rgba(91, 34, 19, 0.98),

            rgba(32, 12, 8, 1)
        );
}


/* =========================================================
   LINK REJESTRACJI W MODALU
   ========================================================= */

.login-register-link {

    display:
        inline-block;

    margin-top:
        20px;

    color:
        #8f765f;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        11px;

    text-decoration:
        none;

    transition:
        color 0.25s ease;
}


.login-register-link:hover {

    color:
        #c8a27d;
}


/* =========================================================
   ZAMKNI�CIE MODALA
   ========================================================= */

.login-modal-close {

    position: absolute;

    top: 8px;
    right: 13px;

    width:
        28px;

    height:
        28px;

    padding: 0;

    border: 0;

    outline: none;

    background:
        transparent;

    color:
        #75503e;

    font-family:
        Georgia,
        serif;

    font-size:
        25px;

    line-height:
        28px;

    cursor:
        pointer;

    transition:

        color 0.2s ease,

        transform 0.2s ease;
}


.login-modal-close:hover {

    color:
        #c77b54;

    transform:
        scale(1.08);
}


/* =========================================================
   RESPONSYWNO��
   ========================================================= */

@media
(max-width: 1300px) {

    .main-navbar {

        width:
            900px;

        max-width:
            84vw;

        padding:
            0 45px;
    }


    .navbar-menu a {

        padding:
            0 20px;

        font-size:
            14px;
    }


    .download-coin {

        max-width:
            200px;
    }
}


@media
(max-width: 900px) {

    .main-logo {

        max-width:
            42%;
    }


    .main-navbar {

        width:
            92%;

        max-width:
            none;

        padding:
            0 15px;
    }


    .navbar-decoration {

        display:
            none;
    }


    .navbar-menu a {

        padding:
            0 8px;

        font-size:
            12px;

        letter-spacing:
            0.3px;
    }


    .access-login {

        left:
            35%;
    }


    .access-register {

        left:
            65%;
    }


    .download-coin {

        max-width:
            180px;
    }
}


@media
(max-width: 560px) {

    .hero-header {

        height:
            700px;
    }


    .main-logo {

        max-width:
            60%;
    }


    .main-navbar {

        top:
            320px;

        height:
            54px;

        width:
            96%;

        padding:
            0 5px;
    }


    .navbar-menu a {

        height:
            54px;

        padding:
            0 4px;

        font-size:
            9px;
    }


    .access-actions {

        top:
            392px;
    }


    .access-login {

        left:
            28%;
    }


    .access-register {

        left:
            72%;
    }


    .access-link {

        min-width:
            120px;

        padding:
            8px 6px;

        font-size:
            10px;

        letter-spacing:
            1px;

        gap:
            6px;
    }


    .download-coin-link {

        top:
            443px;
    }


    .download-coin {

        max-width:
            155px;
    }


    .login-modal-panel {

        padding:

            35px
            25px
            30px;
    }
}