/*Nasze style CSS */
/* --------------------FONT--------------------- */

@import url('https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* -----------------KOLORY ----------------*/
:root{
    --kolor-glowny: #F1EEE7;
    --kolor-niebieski: #89ABE0;
    --kolor-bordo: #B1020A;
    --kolor-szary: #E3E3E3;
    --kolor-ciemnyszary: #949494;

    --czarny: black;

}

/* ------------------GLOBALNE-----------------*/
*{
    transition: 1s ease-out;
    box-sizing: border-box; /*padding nie zwiększa szerokości boxu, lepsza kontrola nad responsywnością */
}

html{
    scroll-behavior: smooth;
    font-size: 10px;
    /*
    16 px to domyślny rozmiar bazowy 
    wielokrotnosc rozmiaru bazowego fontu - zmieniliśmy sb rozmiar bazowy na 10 px
    1 rem = 16 px | 10 px
    2 rem = 32 px | 20 px 
    1.7 rem = ? px | 17 px
    */
}
body{
    font-family: "Inter";
}

h1, h2, h3, h4, h5, h6 {}
h1{
    font-family: Poppins;
    font-weight: 500;
}

h2{
    font-family: Bagel Fat One;
}

h3{
    font-family: Inter;
}
h4{
    font-family: Inter;
}
h5{}
h6{}

p{
    line-height: 150%;
}

img{
    max-width: 100%;
}

a{
    text-decoration: none;
    color: inherit;
}


/* --------------NAWIGACJA DESKTOP -----------------*/

/* NAWIGACJA */

nav{
    position: fixed;
    width: 100%;
    z-index: 3;
}

#pasek{
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: var(--kolor-glowny);
    padding: 40px 40px;
    gap: 7vh;
}

#pasek input[type=search]:focus{
    outline: 0;

}  
#pasek .logo{
    text-align: center;
}

#pasek .logo h1{
    font-size: clamp(2.8rem, 5vw, 6.4rem);
}

.logo h1 span{
    font-weight: 900;
}

.ikony{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 2vw;

    cursor: pointer;
}

.ikony:hover{
    opacity: 50%;
}

#menu{
    display: flex;
    justify-content: center;
    gap: 7vw;
    background-color: var(--kolor-szary);
    padding: 12px 20px;
}

#menu a{
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    color: var(--kolor-ciemnyszary);
    white-space: nowrap;
}

#menu a:hover{
    color: var(--czarny);
    font-weight: 700;
}


/* -------------------NAWIGACJA MOBILE -------------*/



/*---------------------- WSZYSTKIE SEKCJE --------------------*/


section{
    min-height: 60vh;/*vh = viewport height = % wys. okna przegl.*/
    padding: 120px 0px 40px;
    /*FLEX CONTAINER*/
    display: flex;
    justify-content: center;
    align-items: center;
    /* flex-direction: column; */
    /*domyślnie jest row - w wierszu*/
    scroll-margin-top: 0; 
    /* odstęp od góry przy przewijaniu do sekcji - wysokość nav */
}
.zawartosc{
    /* background-color: red; */
    max-width: 1200px;
    width: 100%;
    padding: 60px;
}

/*------------------- POSZCZEGÓLNE SEKCJE -------------------*/

/*-- Pierwsza sekcja ----*/

#pierwsza{
    background-color: var(--kolor-glowny);
}

#pierwsza h2{
    font-size: clamp(9.6rem, 10vw, 20rem);
    color: var(--kolor-niebieski);
}

#pierwsza .zawartosc{
    margin-top: 60px;
    position: relative;
    width: fit-content;
    display: flex;
    flex-direction: column;
    align-items:center;
}

#pierwsza .newin{
    position: absolute;
    z-index: 2;
    top: 40px;
    left: 40px;
}

#pierwsza .przycisk{
    position: absolute;
    right: 110px;
    bottom: 40px;
}

#pierwsza .zawartosc a{
    background-color: #89ABE0;
    color: var(--czarny);
    font-weight:700;
    font-size: clamp(1rem, 10vw,2rem);
    width: fit-content;
    border-radius: 10px;
    padding: 20px 40px 20px 40px;
    text-align: center;
}
#pierwsza .zawartosc a:hover{}



/*-- Druga sekcja ----*/

#druga{
    background-color: var(--kolor-niebieski); 
    display: flex;
    flex-direction: column;
    align-items:center;
}

#druga img{
    width: 90%;
    height: auto;
    max-width: 1300px;
    
}

/*-- Trzecia sekcja ----*/

#trzecia{
    background-color: var(--kolor-glowny);
    display: flex;
    flex-direction: column;
}
#trzecia .zawartosc{
    display: flex; 
    gap: 2rem;
    flex-wrap: nowrap;
    overflow-x: scroll;
    margin-left: 5vw;
    margin-right: 5vw;
}

#trzecia figure{
    width:30vw;
}

#trzecia figure img{
    border-radius: 10px;
}

#trzecia h3{
    font-size: clamp(1.5rem, 4vw, 3.6rem);
    font-weight: 600;
    align-self: flex-end;
}

#trzecia p{
    font-size:clamp(1.5rem, 4vw, 3rem);;
}
#trzecia p span{
    font-weight: 800;
}

/*-- Czwarta sekcja ----*/

#czwarta {
    background: url(../img/texture.png) no-repeat
    center bottom / cover fixed ;
    background-color: var(--kolor-bordo);
    background-blend-mode: multiply;
}
#czwarta h2{
    font-size: clamp(8rem, 10vw, 22rem);
    color: var(--kolor-glowny);
}

/*-- Piąta sekcja ----*/

#piata{
    background-color: var(--kolor-glowny);
}

#piata img{
    width: 90%;
    height: auto;
    max-width: 1300px;
}
    
/*-- szosta sekcja ----*/

#szosta{
    background-color: var(--kolor-glowny);
    display: flex;
    flex-direction: column;
}
#szosta .zawartosc{
    display: flex; 
    gap: 2rem;
    flex-wrap: nowrap;
    overflow-x: scroll;
    margin-left: 5vw;
    margin-right: 5vw;
}

#szosta figure{
    width:30vw;
}

#szosta figure img{
    border-radius: 10px;
}

#szosta h3{
    font-size:clamp(1.5rem, 4vw, 3.6rem);
    font-weight: 600;
    align-self: flex-end;
}

#szosta p{
    font-size:clamp(1.5rem, 4vw, 3rem);
}

#szosta p span{
    font-weight: 800;
}

/*-- siodma sekcja ----*/

#siodma {
    background: url(../img/texture.png) no-repeat
    center bottom / cover fixed ;
    background-color: var(--kolor-niebieski);
    background-blend-mode: multiply;
}
#siodma h2{
    font-size:clamp(8rem, 10vw, 22rem);
    color: var(--kolor-glowny);
}

/*-- osma sekcja ----*/

#osma{
    background-color: var(--kolor-glowny);
}

#osma img{
    width: 90%;
    height: auto;
    max-width: 1300px;
}

/*-- dziewiata sekcja ----*/

#dziewiata{
    background-color: var(--kolor-glowny);
    display: flex;
    flex-direction: column;
}
#dziewiata .zawartosc{
    display: flex; 
    gap: 2rem;
    flex-wrap: nowrap;
    overflow-x: scroll;
    margin-left: 5vw;
    margin-right: 5vw;
}

#dziewiata figure{
    width:30vw;
}

#dziewiata figure img{
    border-radius: 10px;
}

#dziewiata h3{
    font-size:clamp(1.5rem, 4vw, 3.6rem);
    font-weight: 600;
    align-self: flex-end;
}

#dziewiata p{
    font-size:clamp(1.5rem, 4vw, 3rem);
}

#dziewiata p span{
    font-weight: 800;
}

#news{
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: 100%;
}

#news h2{
    font-size: clamp(6rem, 10vw, 20rem);
    color: var(--kolor-bordo);
    padding: 0,5vw;
}

#news p{
    padding: 2vw;
}

.box{
    max-width: 90vw;
}

#news input[type=email]{
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    padding: 15px;
    border-radius: 10px;
    border: none;
    color: var(--kolor-ciemnyszary);
}

#news input[type=submit]{
    font-size: clamp(1.5rem, 3vw, 2.5rem);
  padding: 15px;
  border-radius: 10px;
  cursor: pointer;
  background-color:var(--kolor-bordo);
  border: none;
  color: var(--kolor-glowny);
}

#news input[type=submit]:hover{
    font-weight: 600;
}

/*------------------------STOPKA -------------------------*/
#stopka{
    min-height: 10vh;
}

/*   RWD     */

@media (max-width:600px){
    .search{display: none;}
    .polubione{display: none;}
    .konto{display: none;}
    .koszyk{display: block;}

    /* section{padding: 2rem;} */
}