/* FONT */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* KOLORY */
:root{
    --jasny:#f3f3f3;
    --ciemny:#000000;
    --rozowy:#e6bfd4;
    
}

/* GLOBAL */
html{
    scroll-behavior:smooth;
    font-size:10px;
    overflow-x:hidden;
}

body{
    font-family:'Poppins',sans-serif;
    background-color:var(--jasny);
    overflow-x:hidden;
}

.zawartosc{
    max-width:1400px;
    width:100%;
    margin:0 auto;
}

/* LOGO */
#start{
    padding:1rem 0;
}

#start .zawartosc{
    display:flex;
    justify-content:center;
    align-items:center;
}

.logo{
    width:110px;
    height:auto;
}

/* MENU DESKTOP NAWIGACJA NAWIGACJA MENU */
nav{
    background-color:var(--ciemny);
}

nav .zawartosc{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8rem;
    padding:1.2rem 0;
}

nav a{
    color:#fff;
    font-size:1.3rem;
    font-weight:600;
}

/* MENU MOBILE (burger) — MENU NA MOBILKE */
.burger{
    display:none;
    position:fixed;
    top:1.5rem;
    right:2rem;
    font-size:3rem;
    color:var(--ciemny);
    cursor:pointer;
    z-index:50;
}

.nakladka{
    position:fixed;
    top:0;
    right:0;
    height:100%;
    width:0;                 /* domyslnie zamkniete, JS zmienia na 100% */
    background-color:var(--ciemny);
    overflow:hidden;
    z-index:100;
    display:flex;
    justify-content:center;
    align-items:center;
    transition:width 0.3s ease;
}

.nakladka ol{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3rem;
}

.nakladka a{
    color:#ffcaf3;
    font-size:2.4rem;
    font-weight:700;
}

.zamknijX{
    position:absolute;
    top:2rem;
    right:2.5rem;
    color:#fff;
    font-size:4rem;
    cursor:pointer;
}

/* HERO — napis BLUSH PULSE rusza sie */
#hero{
    background-color:var(--jasny);
    position:relative; 
    /* pretty thing bedzie na srodku przyklejone */
    overflow:hidden;         
     /* litery wychodzace poza ekran sa obcinane */
    padding:2rem 0;
}

#hero .zawartosc{
    position:relative;
    max-width:none;          
     /* pelna szerokosc */
}

.hero-linie{
    display:flex;
    flex-direction:column;
}

/*  BLUSH PULSE BLUSH PULSE PUUUUULLLSEEEEEEEE */
.linia{
    display:flex;
    white-space:nowrap;
    font-size:20rem;         
    font-weight:900;
    line-height:0.85;
    letter-spacing:-0.5rem;
    color:var(--ciemny);
}

.linia .tekst{
    display:inline-block;
    /* pierwsza kopia wyjeżdża, druga ją płynnie zastępuje mamy kopie linii */
}

/* trzy rozne predkosci zeby cos sie dzialo */
.linia1{ animation:jazda 18s linear infinite; }
.linia2{ animation:jazda 28s linear infinite; }
.linia3{ animation:jazda 22s linear infinite; }

@keyframes jazda{
    from{ transform:translateX(-50%); }
    to{ transform:translateX(0); }
}

/* PRETTY THINGS //////////////////////////*/


.hero-tekst{
    position:absolute;
    top:55%;
    left:50%;
    transform:translate(-50%,-50%);
    background:var(--jasny);
    padding:4rem 7rem;
    width:680px;
    text-align:center;
    z-index:2;
    /*  musi byc taki zeby byl nad napisami ruchomymi */
}

/* napis pretty things */
.hero-tekst h1{
    font-size:3.6rem;
    font-weight:800;
    margin-bottom:1rem;
}

/* podpis pod pretty things-tekst */
.hero-tekst p{
    font-size:1.4rem;
    color:#666;
}

/* AUTOR i DATAAA*/

#autor{
    background-color:var(--jasny);
    padding:1rem 0 3rem;
}

#autor .zawartosc{
    display:flex;
    justify-content:space-between;
    padding:0 2rem;
}

.autor-lewo,
.autor-prawo{
    font-size:1.4rem;
    font-weight:700;
    line-height:1.1;
}

/* prawy napis zeby zawsze byl przyklejony do prawej i nie rozjedzal mi sie non stop!!!! */
.autor-prawo{
    text-align:right;
}

/* MODELKI */
#kolekcja img{
    width:100%;
    display:block;
}

/* ABOUT US */
#about{
    margin-top:14rem; 
    background-image:url('../img/zdjblush.png');
    background-size:cover;         
     /* tutaj zeby bylo cale zdj a nie dziwnie uciete */
    background-repeat:no-repeat;
    background-position:center;
    aspect-ratio:16 / 9;              
    /* to ma trzymac to zdj w tym formacie*/
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:2rem;
}

/* BOX BIALY GDZIE SA NAPISY */
.about-box{
    position:relative;
    background:#fff;
    max-width:520px;
    width:100%;
    padding:4rem 3.5rem;
    text-align:center;
}

/* rozowy BLUSH  KTORY MA PULSOWAC*/
.blush-pulse{
    position:absolute;
    /*  dzieki temu jest na wierzchu i nie jest przypiety do boxa  */
    top:-3.5rem;
    left:-3rem;
    width:180px;
    transform:rotate(-8deg);
    /* przekrzywienie w bok */
    animation:puls 1.4s ease-in-out infinite;
    /* pulsowanie  z plynnym zwalnianiem*/
}

/* animacja na poprawne pulsowanie */
@keyframes puls{
    0%,100%{ transform:rotate(-8deg) scale(1); }
    50%{    transform:rotate(-8deg) scale(1.12); }
}

/* ABOUT US */
.about-box h2{
    font-size:3.6rem;
    font-weight:800;
    margin-bottom:2.5rem;
}
/* blush was created - tekst */
.about-box h3{
    font-size:1.8rem;
    font-weight:700;
    margin-bottom:2.5rem;
}
/* opis dalszy  */
.about-box p{
    font-size:1.3rem;
    color:#555;
    line-height:1.9;
}

/* SHOP */
#shop{
    margin-top:6rem; 
    text-align:center;
    padding:4rem 0 2rem;
}

/* napis SHOP */
#shop h2{
    
    font-size:3.2rem;
    font-weight:800;
    margin-bottom:1rem;
    /* color: #ffcaf3; */
}

/* opis do shop  */
#shop p{
    margin-top:3rem; 
    font-size:1.4rem;
    color:#555;
}

/* KATEGORIE */
#kategorie .zawartosc{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:3rem;
    padding:2rem;
}

#kategorie a{
    font-size:1.4rem;
    font-weight:500;           
    text-transform:uppercase;
    color:#9a9a9a;              
    /* domyslnie szare zeby bylo troche spojne*/
    cursor:pointer;
    transition:color 0.2s ease;
}

#kategorie a:hover{
     color:var(--ciemny);
}

/* PRODUKTY */
#produkty{
    padding:3rem 0 6rem;
}

#produkty .zawartosc{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:3rem;
    padding:0 2rem;
}

.produkt img{
    width:100%;
    aspect-ratio:3 / 4;        
    /* wszystkie zdjecia rowne, ten sam ksztalt zeby sie nie rozjechalo*/
    object-fit:cover;
    margin-bottom:1.5rem;
}

/* NAZWY PRODUKTOW */
.produkt h3{
    font-size:1.6rem;
    font-weight:700;
    text-align:center;         
    /* nazwa na srodku */
    margin-bottom:0.5rem;

}

/* CENA NA SRODKU */
.produkt p{
    font-size:1.4rem;
    color:#555;
    text-align:center;        
}

/* SUMMER SALE */
#sale{
    margin-top:6rem; 
    background-image:url('../img/sale.png');
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    min-height:55vh;
    width:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:2.5rem;
    text-align:center;
}

#sale h2{
    font-size:5rem;
    font-weight:900;
    color:#fff;
    letter-spacing:0.2rem;
}

/* PRZYCISK SHOP NOWW ------------------- */
.shop-now{
    background:#fff;
    color:var(--ciemny);
    font-size:1.3rem;
    font-weight:700;
    letter-spacing:0.1rem;
    padding:1.2rem 2.8rem;
    cursor:pointer;
    transition:background 0.2s ease, color 0.2s ease;
}

.shop-now:hover{
    background:var(--ciemny);   
    /* podswietla sie na czarno */
    color:#ffd4ec;
}

/* FOLLOW US */
#socials{
    
    background-color:var(--ciemny);
    text-align:center;
    padding:14rem 0 3rem;
}

#socials h2{
    font-size:17rem;
    font-weight:900;
    color:var(--rozowy);
    letter-spacing:0.2rem;
}

/* INSTAGRAM */
#instagram{
    background-color:var(--ciemny);
    padding-bottom:6rem;
}

#instagram .zawartosc{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    /* instagramowy feed 3 posty kolo siebie*/
    gap:1.5rem;
    padding:0 2rem;
}

#instagram img{
    width:100%;
    aspect-ratio:1/1;
    /* kazde zdj w kwadracie a nie rozjechane */
    object-fit:cover;
}


/* STOPKA */
#stopka{
    background-color:var(--ciemny);
    padding:5rem 0;
}

#stopka .zawartosc{
    display:flex;
    justify-content:space-between;
    /* rowno ulozone elementy */
    align-items:flex-start;
    padding:0 4rem;
    gap:4rem;
}

.stopka-logo-box{
    display:flex;
    flex-direction:column;
    gap:5rem;
}

.stopka-logo{
    width:180px;
    filter:invert(1);   
    /* kod z neta na zmiane logo na białe */
    
}

.stopka-copy{
    color:#979797;
    font-size:1.2rem;
}

.stopka-kolumna{
    display:flex;
    flex-direction:column;
    gap:1.2rem;
}

.stopka-kolumna h4{
    color:#fff;
    font-size:1.6rem;
    font-weight:700;
    margin-bottom:1rem;
}

.stopka-kolumna span,
.stopka-kolumna a{
    color:#888;
    font-size:1.3rem;
    font-weight:500;
    cursor:pointer;
    transition:color 0.2s ease;
}

.stopka-kolumna span:hover,
.stopka-kolumna a:hover{
    color:#fff;
}

.stopka-kolumna span:hover{
    color:#fff;                
    /* podswietla sie na bialo */
}


/*  WERSJA MOBILNA
MOOOOOOOOOOOOOOOOOOOBIIIIIIIIIIIILNAAAAAAAAAAAAAAAAAAAAAAAAAAA
MOBILNAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA */

@media (max-width:600px){

    /* chowamy nav desktopowy, pokazujemy burger */
    nav{
        display:none;
    }

    .burger{
        display:block;
    }

    /* HERO  */
    .linia{
        font-size:6rem;
        letter-spacing:-0.2rem;
    }

    .hero-tekst{
        width:90%;
        padding:2rem 1.5rem;
    }

    .hero-tekst h1{
        font-size:2.2rem;
    }

    /* AUTOR */
    #autor .zawartosc{
        padding:0 1.5rem;
    }

  /* ABOUT */
    #about{
        aspect-ratio:auto;            
        padding:5rem 1.5rem;
    }

    .about-box{
        padding:3rem 2rem;
    }

    .blush-pulse{
        width:120px;
        top:-2.5rem;
        left:-1rem;
    }

    /* KATEGORIE — mniejszy odstep */
    #kategorie .zawartosc{
        gap:1.5rem;
    }

  /* PRODUKTY —  karuzela */
    #produkty .zawartosc{
        display:flex;
        grid-template-columns:none;     
        /* wylaczaM siatke 3-kolumnowa ZEBY BYLA KARUZELA */
        gap:2rem;
        overflow-x:auto;               
         /* przewijanie w bok jak karuzela */
        scroll-snap-type:x mandatory;  
         /* musi byc zeby lapalo na kazdym bo sie rozjedzalo  */
        -webkit-overflow-scrolling:touch;
        padding:0 1.5rem 2rem;
    }

    .produkt{
        flex:0 0 80%;                   
        /* produkt na dobrej wielkosci ekranu zeby bylo widac i byly rowne */
        scroll-snap-align:center;
    }

    /* FOLLOW US */
    #socials h2{
        font-size:5rem;
        letter-spacing:0;
        padding:0 1rem;
    }

    /* INSTAGRAM — 2 kolumny zeby sie zmiescilo  */
    #instagram .zawartosc{
        grid-template-columns:repeat(2,1fr);
    }


    /* STOPKA — kolumny pod soba */
    #stopka .zawartosc{
        flex-direction:column;
        align-items:flex-start;
        gap:3rem;
        padding:0 2rem;
    }

    .stopka-logo-box{
        gap:2rem;
    }
}