@import url('https://fonts.googleapis.com/css2?family=Alata&family=Bowlby+One&family=Condiment&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Coda:wght@400;800&display=swap');
/* font-family: "Bowlby One", sans-serif; 
font-family: "Alata", sans-serif;
font-family: "Condiment", cursive; 
.coda-regular 
  font-family: "Coda", system-ui;
  font-weight: 400;
  font-style: normal;
.coda-extrabold 
  font-family: "Coda", system-ui;
  font-weight: 800;
  font-style: normal;
*/

:root{
    --kolor-ciemny:#610F7F;
    --kolor-ciemnyT:#610F7F20;
    --kolor-fiolet:#E2C1F8;
    --kolor-fioletT:#E4C1F890;
    --kolor-fioletCH:#E4C1F830;
    --kolor-akcent:#F08A4A;
    --kolor-akcentT:#F08A4A30;
    --kolor-zielony:#D0F4DE;
    --kolor-zielonyT:#D0F4DE20;
    --kolor-jasny:#FFC387;
    --kolor-jasnyT:#FFC38795;
    --kolor-nav:#FCF6BC;
    --kolor-navT:#FCF6BC20;
}
section{
    overflow: hidden;
}
*{
    box-sizing: border-box; /* zeby padding nie zwiekszal szerokosci boo nie mamy wtedy kontroli nad elementem i moga wystawac poza okno w poziomie*/
    transition: 300ms;
}

html{
    scroll-behavior: smooth;
}
body{
    font-family: "Alata", sans-serif;
}
a{
    text-decoration: none;
}
p{
    font-size: 20px;
    line-height: 30px;
}
img{
    max-width: 100%;
}

h2,h3,h4,h5,h6{
    font-family: "Bowlby One", sans-serif;
}

h1{
    font-family: "Condiment";
    font-size: 400px;
    text-align: center;
}

h1 span{
   
}
h2{
    font-size: 80px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--kolor-ciemny); 
    
}
h3{
    font-family: "Coda", system-ui;
    font-weight: 800;
    font-style: normal;
    font-size: 32px;
    line-height: 36px;
}
h4{
    font-family: "Coda";
    font-weight: 800;
    font-size: 24px;
    letter-spacing: 3px;
}
h6{
    font-size: 14px;
   font-family: "Alata";
   
}

nav{
    position: fixed;
    width: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: space-around;
    z-index: 1;
    align-items: center;
}
nav div{
    margin-top: 10px;
    max-width: 7vh;
    text-align: center;
}
nav ol{
    background-color: var(--kolor-zielony);
    max-width: 1200px;
    display: flex;
    justify-content: flex-end;
    border-radius:25px;
    box-shadow: 0px 5px 5px var(--kolor-ciemnyT);
}

nav ol li{
    
}

nav ol li a{
    color: var(--kolor-akcent);
    padding: 20px 2vw ;
    text-align: center;
    display: block;
    font-family: "Bowlby One";
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius:25px;
    
}

nav ol li a:hover{
    background-color: var(--kolor-akcent);
    color: var(--kolor-nav);
}

section{
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    scroll-margin-top: 56px;
}

.zawartosc{
    max-width: 1420px;
    width: 100%;
    /* background-color: red; */
}

#pierwsza{
    background: url(../img/googie_tlo.jpg)no-repeat center center;
    background-size: cover;
    
    position: relative;/*do tego elementu odnosi sie position absolute*/
}
#pierwsza .zawartosc{
    display: flex;
    justify-content: center;
    align-items: center;
}
#gwiazdka-left{
    animation: left 10s infinite;
    /* background-color: red; */
    position: absolute;
    left: 0;
    transform: translateX(-50%);
}
#gwiazdka-right{
    animation: right 10s infinite;
    /* background-color: red; */
    position: absolute;
    right: 0;
    transform: translateX(50%);
}
#poklatkowa-right{}
@keyframes left{
    0%{
        opacity: 0;
    }
    50%{
        left: 15vw;
        transform: translateX(-50%) rotate(360deg);
        opacity: 1;
    }
    70%{
        left: 15vw;
        transform: translateX(-50%) rotate(360deg);
        opacity: 1;
    }
    75%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}
@keyframes right{
    0%{
        opacity: 0;
    }
    50%{
        right: 15vw;
        transform: translateX(50%) rotate(-360deg);
        opacity: 1;
    }
    70%{
        right: 15vw;
        transform: translateX(50%) rotate(-360deg);
        opacity: 1;
    }
    75%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}      
#pierwsza h1{
    color: var(--kolor-ciemny);
}
#druga{
    background: url(../img/pochodzenie_tlo.jpg) center center;
    background-size: cover;
    /* display: block; */
    align-content: center;
}
#druga .zawartosc{
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
    color: var(--kolor-ciemny);
}

#druga div{   
}

#druga h2{
    
}
#druga p{
    background-color: var(--kolor-fioletT);
    max-width: 700px;
    padding: 40px 121px 40px 121px;
    border-radius: 25px;
    backdrop-filter: blur(10px);
}

#trzecia{
    background: url(../img/tło_trzy.jpg) center center;
    background-size: cover;
}
#trzecia .zawartosc{
    text-align: center;
    /* color: var(--kolor-ciemnyT); */
    /* background-color: red; */
}
#trzecia h1{
    /* padding: 2rem; */
    /* height: 10px; */
    /* font-weight: 900; */
    animation-name: od-do;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    /* background-color: red; */
}

@keyframes od-do{
    from{
        transform:scale(5);
        color: var(--kolor-ciemnyT);
        /* backdrop-filter: blur(5px); */
    }
    to{
        color: var(--kolor-ciemny);
        transform: scale(1) ;
        /* height: 100px; */
        /* font-weight: 100; */
        /* text-align: center; */
    }
}

#czwarta{
    background-color: var(--kolor-zielony);
}
#czwarta .zawartosc{
    color: var(--kolor-ciemny);
}

#czwarta div{
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    
}

#czwarta h2{}
#czwarta article{
    background-color: var(--kolor-jasny);
    color: white;
    padding: 40px;
    border-radius: 50px;
    flex: 0 1 400px;
}
#czwarta article:hover{
    /* padding: 40px; */
    background-color: white;
    color: var(--kolor-ciemny);
    box-shadow: 5px 5px 5px var(--kolor-ciemnyT);
}
.color{
    background-color: var(--kolor-fiolet) !important;
}
.color:hover{
    background-color: white !important;
}
.color p{
     color: var(--kolor-ciemny) !important;
}
.color h3 {
     color: var(--kolor-ciemny) !important;
}
#czwarta h3{
    margin-top: 30px;
    margin-bottom: 30px;
    /* color: #fff; */
}
#czwarta img{
    height: 300px;
    object-fit: contain;
}
#czwarta p{

}

#piata{
    background: url(../img/geneza_tlo.jpg) center center;
    background-size: cover;
}
#piata .zawartosc{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    color: var(--kolor-ciemny);
}
#piata h2{
   text-align: left;
}

#piata p{
    background-color: var(--kolor-jasnyT);
    max-width: 700px;
    padding: 40px 121px 40px 121px;
    border-radius: 25px; 
    backdrop-filter: blur(10px);
}

#szosta{
    background: url(../img/lokalizacje_tlo.jpg) center center;
    background-size: cover;
}
#szosta .zawartosc{
    display: flex;
    flex-direction: column;
    gap: 25px;
    flex-wrap: wrap;
    /* flex: 0 1 200px;  */
}
#szosta h2{}
#szosta h3{
    text-align: center;
    
}
#szosta article{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    background-color: var(--kolor-fiolet);
    color: white;
    max-width: 800px;
    padding: 40px 70px 40px 70px;
    border-radius: 25px; 
    
    /* flex: 0 1 200px;    */
}
#szosta article:hover{
    background-color: white;
    color: var(--kolor-ciemny);
    box-shadow: 5px 5px 5px var(--kolor-ciemnyT);
}
#szosta p{
    width: auto;
}


#stopka{
    background-color: var(--kolor-jasny);
    min-height: 40vh;
    display: flex;
    flex-direction: column;
    color: var(--kolor-ciemny);
}
#stopka .zawartosc{
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.logo-stopka img{
    width: 220px;
    margin-bottom: 40px;
}

.social img{
    width: 80px;
    display:block;
    margin-bottom: 20px;
}

#stopka article{
    /* background-color: red; */
    padding: 20px;
    height: auto;
    border-radius: 25px;
    /* flex: 0 1 500px;  */
    flex: 1;
}
#stopka article ol{}
#stopka article ol li{
    margin-bottom: 20px;
}
#stopka article a{
    color: var(--kolor-ciemny);
}
#stopka article a:hover{
    color: var(--kolor-zielony);
}
#stopka form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--kolor-zielony);
    padding: 50px 120px 50px 120px;
    border-radius: 25px;
    width: 580px;
    border: solid white;
    border-width: 5px;
}
#stopka form h4{
    margin-bottom: 25px;
}

#stopka article form input{
    margin-bottom: 25px;
    padding: 10px;
    width: 340px;
    border-radius:25px;
    /* text-align: center; */
}

#stopka article form input[type=submit]{
    width: 50%;
    padding: 10px;
    border: solid white;
    border-width: 4px;
}
#stopka ::placeholder{
    color: var(--kolor-fiolet); 
}

form input {
    font-family: "Coda";
    font-weight: 800;
    padding: 30px;
    font-size: 14px;
    font-weight: bold;
    border: 0;
}
form input[type=email]{
    color: var(--kolor-fiolet);
    border: 1px solid white;
}form input[type=email]:hover{
    border: solid var(--kolor-ciemny);
    border-width: 1px;
}
form input[type=email]:focus{
    outline: 0;
}
form input[type=text]{
    color: var(--kolor-fiolet);
    border: 1px solid white;
}
form input[type=text]:focus{
    outline: 0;
}
form input[type=text]:hover{
    border:1px solid var(--kolor-ciemny);
}

form input[type=submit]{
     background-color: var(--kolor-fiolet);
     color: white; 
}

form input[type=submit]:hover{
    background-color: var(--kolor-akcent);
    color:var(--kolor-jasny);
}

#stopka div h6{
    /* background-color: aqua; */
    margin-top: 40px;
    color: white;
}