/* Moje style css*/
/* FONT Z GOOGLE*/
@import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400..900;1,400..900&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');

/* KOLORY */
:root{
    --kolor-podstawowy: #77726E;
    --kolor-2: #ADA69C;
    --kolor-3: #D4D3CE;
    --kolor-jasny: #F5F4EF;
    --kolor-brazawy: #2A231E;
}

/*selektory globalne*/
*{
    transition: 1s;
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
}

/* .josefin-sans {
  font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.alegreya {
  font-family: "Alegreya", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
} */

body{
    background: url(../img/Back2.jpg) no-repeat center center / cover fixed;
    font-family: "Alegreya", serif;
}
h1, h2, h3, h4, h5, h6{
    font-family: "Josefin Sans", sans-serif;
    font-weight: 400;
}
h1{
    /* background-color: rgb(102, 15, 122); */
    color: var(--kolor-jasny);
    display: flex;
    justify-content: center;
    font-size: 96pt;
    text-align: center;
}

h2{
    /* background-color: rgb(166, 11, 201); */
    color: var(--kolor-jasny);
    display: flex;
    justify-content: center;
    padding: 0px 0px 50px 0px;
    font-size: 60pt;
    text-align: center;
}

h3{
    /* background-color: rgb(208, 125, 226); */
    color: var(--kolor-jasny);
    display: flex;
    justify-content: center;
    padding: 25px 5px;
    font-size: 18pt;
    text-transform: uppercase;
}

h4{
    color: var(--kolor-podstawowy);
    display: flex;
    justify-content: center;
    padding: 25px 5px;
    font-size: 18pt;
    text-transform: uppercase;
}

h6{
    font-size: 12px;
    margin: 20px;
    color: var(--kolor-jasny);
}

a{
    /* background-color: deeppink; */
    color: var(--kolor-jasny);
    text-decoration: none;
    text-align: center;
    font-size: 14pt;
}

p{
    /* background-color: purple; */
    color: var(--kolor-jasny);
    line-height: 140%;
    padding: 10px 0px;
    font-family: "Alegreya", serif;
    font-size: 14pt;
}

ul{
    /* background-color: chartreuse; */
    line-height: 140%;
    padding: 10px 0px;
    columns: var(--kolor-jasny);
    font-size: 14pt;
}

li{
    color: var(--kolor-podstawowy);
    font-size: 14pt;
}


/*NAWIGACJA*/
nav{
    background: var(--kolor-podstawowy);
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 100%;
    opacity: 0.7;

    z-index: 1;
    font-family: "Josefin Sans", sans-serif;
}

nav ol{
    /*background-color: yellow;*/
    display: flex;
    max-width: 1000px;
    width: 100%;
    justify-content: space-evenly;
    align-items: center;
}

nav ol li{
    /*background-color: green;*/
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#logo{}

nav ol li img{
    max-width: 25px;
    max-height: 25px;
}

nav ol li a{
   /*background-color: pink;*/
    padding: 1vw;
   display: block;
    color: var(--kolor-jasny);
    text-transform: uppercase;
}

nav ol img{

}

nav ol li a:hover{
    /*background-color: white;
    color: var(--kolor-ciemny);*/
    border-radius: 10px;
    text-decoration: underline;
    font-weight: bold;
}


/*WSZYSTKIE SEKCJE*/
section{
    background-color: var(--kolor-podstawowy);
    min-height: 90vh; 
    /*FLEX CONTAINER*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* scroll-margin-top: 56px; */
    /* żeby nie zasłaniała zawartości sekcji */
    /* ctrl slash szybki kom */
    padding: 73px 20px;
}

#zawartosc{
    background-color: green;
    padding: 100px 0px;
}

article{
    /* background-color: red; */
    max-width: 1200px;
    width: 100%;
    padding: 50px 0px;
    display: flex;
    flex-direction: column;
}


/*POSZCZEGÓLNE SEKCJE*/


/* SEKCJA1 */
#sekcja1{
    background: url(../img/Back1.jpg)no-repeat center center / cover;

    display: flex;
    justify-content: center;
    align-items: center;
}

#sekcja1 h1 {
    text-align: center;
}


/* SEKCJA 2 */
#sekcja2{
    /*background:var(--kolor-uzupelniajacy);*/
}

#sekcja2 .zawartosc{
    flex-wrap: wrap;
}

#sekcja2 article{
    flex: 1 1 300px;
}

#sekcja2 article img{
}

#sekcja2 h2{
 color: var(--kolor-jasny);
}

#sekcja2 img{

}

#lokal{
    /* background-color: red; */
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.about{
    /* background-color: green; */
    flex: 1 1 300px;
    max-width: 285px; 
    max-height: 400px;  
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 1000px;
}

.about img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

hr{

}

.img-hoover{
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.img-hoover:hover{
    opacity: 1;
}

/* SEKCJA 3 */
#sekcja3{
    margin: 100px 0px;
    padding: 73px 0px 0px 0px;
}

#sekcja3 .zawartosc{
    flex-wrap: wrap;
}

#sekcja3 article{
    flex: 1 1 300px;
}

#galeria {
    /* background-color: rgb(255, 0, 208); */
    max-width: 1200px;
    flex-direction: row;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
}

/* zdjęcia */
#sekcja3 .ziarna{
    flex: 1 1 300;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

#galeria img{
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 50px;
}

#galeria p{
    text-align: center;
    padding: 20px;
}

#sekcja3 .ziarno{
    /* background-color: aqua; */
    max-width: 300px;
    max-height: 300px;
    border-radius: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#tloinfo{
    background-color: var(--kolor-brazawy);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#info{
    width: 100%; 
    max-width: 1200px;  
    margin: 0 auto;     
    display: flex;
    justify-content: center;
    padding: 0px 0px 40px 0px;
}

#info img{
    width: 100%;        
    max-width: 1200px;   
    height: auto; s
}

#sekcja3 .ziarno:hover{
    background-color: #ADA69C;
    transition: color 0.3s ease;
    color: #77726E;
}

.ziarno::before {
    
}

/* SEKCJA 4 */
#sekcja4{
    background-color: var(--kolor-2);
    width: 100%;
    padding: 73px 0px 0px 0px;
}

#sekcja4 .zawartosc{
    /* background-color: #e0e0e0; */
}

#sekcja4 article{
    /* background-color: rgba(119, 34, 34, 0); */
    
}
    
#sklep{
    /* background-color: chartreuse; */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1200px;
    width: 100%;
}

#sklep article{
    flex: 1 1 300px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 20px 0px;
}

#tlosklep{
    background-color: var(--kolor-3);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#sklep .opakowanie{
    background-color: var(--kolor-jasny);
    border-radius: 50%;
    width: 350px;
    height: 350px;

    border-color: var(--kolor-jasny);
    outline: 4px solid var(--kolor-jasny);
    outline-offset: 15px;

    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
    transition: transform 0.3s ease;
}

#sklep .opakowanie img{
    width: 90%;
    height: 90%;
    object-fit: cover;
}

#sklep p{
    color: var(--kolor-podstawowy);
}

#sklep ul{
    list-style-type: disc;
}

#sklep li{
    columns: var(--kolor-jasny);
}

#sklep .opakowanie:hover {
    transform: scale(0.95);
}

/*STOPKA*/
#stopka{
    background-color: var(--kolor-brazawy);
    color: var(--kolor-ko);
    min-height: 20vh;
    display: flex;
    flex-direction: column;
    padding: 0px 40px 0px 40px;
}

#stopka .zawartosc{
    /* background-color: red; */
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    gap: 20px;
    justify-content: center;
}

#stopka .zawartosc .box{
    /* background-color: rgb(65, 255, 147); */
    display: flex;
    flex-direction: column;
    min-width: 300px;
    padding: 10px;
    flex: 1 1 300px;
}

.stbox{
    /* background-color: darkblue; */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

form{
    /* background-color: rgb(0, 139, 130); */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.link{
    /* background-color: rgb(0, 139, 130); */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.stbox img{
    max-width: 25px;
    max-height: 25px;
}

#stopka .zawartosc a{
    padding: 15px;
    color: var(--kolor-jasny);
}

#stopka .zawartosc a:hover{
    text-decoration: underline;
}

input{
    border-radius: 50px;
    min-height: 20px;
    font-family: inherit;
    padding: 10px;
    margin: 10px;
    background-color: var(--kolor-2);
    color: var(--kolor-jasny);
}

#stopka .copy{
    display: flex;
    align-self: center;
    padding: 20px;
}

#stopka .zawartosc form input{}

#stopka .zawartosc form input [type=email]{}

#stopka .zawartosc form[type=submit]{}

#stopka .zawartosc form [type=submit]:hover{
    background-color: var(--kolor-jasny);
    color: var(--kolor-podstawowy);
}