/* ==========================
   LETINO OUTLET
   style.css
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
    font-family:Arial, Helvetica, sans-serif;
    overflow:hidden;
}

body{
    position:relative;
    color:#ffffff;
    background:#000;
}

/* TŁO */

.background{
    position:fixed;
    inset:0;
    background:url("images/background.webp.PNG") center center/cover no-repeat;
    z-index:-2;
}


/* GŁÓWNA ZAWARTOŚĆ */

.content{
    width:100%;
    height:100vh;

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

    padding:30px;
}

/* LOGO */

.logo{
    width:620px;
    max-width:85vw;
    margin-bottom:55px;

    filter:
        drop-shadow(0 0 20px rgba(255,190,40,.25))
        drop-shadow(0 12px 35px rgba(0,0,0,.55));
}



/* PRZYCISKI */

/* ==========================
   PRZYCISKI LETINO
========================== */

.buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;

    width:100%;
    margin-top:10px;
    margin-bottom:20px;
}

.button{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    min-width:220px;
    height:60px;

    padding:0 28px;

    text-decoration:none;

    color:#E8C56A;
    font-size:17px;
    font-weight:600;

    background:linear-gradient(180deg,#181818,#070707);

    border:2px solid #C9A54D;

    border-radius:50px;

    box-shadow:
        0 10px 25px rgba(0,0,0,.45),
        inset 0 0 1px rgba(255,255,255,.15);

    transition:all .35s ease;
}

.button img{

    width:24px;
    height:24px;

    filter:
        brightness(0)
        saturate(100%)
        invert(77%)
        sepia(27%)
        saturate(1273%)
        hue-rotate(4deg)
        brightness(103%)
        contrast(93%);
}

.button:hover{

    transform:translateY(-5px);

    color:#FFF5D5;

    background:linear-gradient(180deg,#222,#0a0a0a);

    border-color:#FFD76A;

    box-shadow:
        0 0 18px rgba(212,175,55,.45),
        0 15px 35px rgba(0,0,0,.6);
}


/* STOPKA */

footer{
    position:fixed;

    left:0;
    right:0;
    bottom:25px;

    text-align:center;

    font-size:14px;

    color:rgba(255,255,255,.75);

    letter-spacing:2px;
}

/* TABLETY */

@media (max-width:768px){

    .logo{
        width:320px;
        margin-bottom:45px;
    }

    .buttons{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:15px;
    }

    .button{
        min-width:170px;
        height:55px;
        font-size:15px;
        padding:0 18px;
    }

}


/* TELEFONY */

@media (max-width:480px){

    .logo{
        width:260px;
    }

    .button{
        width:100%;
        max-width:280px;
    }

    .button span{
        font-size:16px;
    }

    footer{
        font-size:12px;
        bottom:18px;
    }

}


/* ZLOTO-CZARNE TLO LETINO */
.background {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url("background.webp.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

.overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.20);
    z-index: 1;
}

.content {
    position: relative;
    z-index: 2;
}