/* STYLE CSS */
/*import fontow z Google*/
@import url('https://fonts.googleapis.com/css2?family=Jersey+20&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
/*KOLORY JAKO ZMIENNE*/
:root{
    --kolor-podstawowy: #E6EBEE;
    --kolor-uzupelniajacy: #DA0071;
    --kolor-ciemny: #212324;
    --kolor-fire: #FFBE25;
    --kolor-water: #70B2B3;
    --kolor-air: #B7CCD7;
    --kolor-earth: #BDBE2D;
    --kolor-jasny: #fff;
    --bg-gradient: linear-gradient(
    180deg,
    #E6EBEE 65%,
    
    #212324 85%);
}

/* ANIMACJE */
@keyframes shake {
  0%   { transform: translateX(0);}
  25%  { transform: translateX(-2px);}
  50%  { transform: translateX(2px);}
  75%  { transform: translateX(-2px);}
  100% { transform: translateX(0);};
}

/* SELEKTORY GLOBALNE */
*{
    transition: 1s;
    box-sizing: border-box;
    /* padding i border wliczone do szer i wys elementu */
}
html{
    scroll-behavior: smooth;
}

a{
    text-decoration: none;
}

img{
    max-width: 100%; /* RESPONSYWNE OBRAZKI */
    height: auto;   
}

p{
    font-family: "JetBrains Mono";
    font-size: 20px;
    font-weight: 300;
    font-style: normal;
    line-height: 1.4;
    color: var(--kolor-jasny);
}

h1{
    font-family: "Jersey 20";
    font-size: 256px;
    text-align: center;
    color: var(--kolor-jasny);
}

h2{
    font-family: "Jersey 20";
    font-size: 120px;
}

h3{
    font-family: "Jersey 20";
    font-size: 68px;
    color: var(--kolor-jasny);
}

h4{
    font-family: "Jersey 20";
    font-size: 48px;
}

h5{
    font-family: "JetBrains Mono";
    font-size: 24px;
    font-weight: 700;
    color: var(--kolor-jasny);

}

h6{
    font-family: "Jersey 20";
    font-size: 20px;
    color: #5E5E5E;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
}


/* NAWIGACJA */
nav{
    position: fixed;
    height: 50vh;
    margin: 50px;
    width: 100px;
    display: flex;
    justify-content: center;
    z-index: 1;
    margin-top: 6vh;
    /*Zniana kolejnosci warstw - domyslnie wszystkie el. mają z-index:0, ale wtedy jak dodajemy mix-blend-mode, to el. z trybami mieszania staje sie wazniejszy, dlatego do nav dajemy z-index:1;, zeby byla ponad wszystkimi innymi elementami*/
}
nav ol{
    max-width: 1200px;
    width: 100%;/*przywracamy max szer. po flex*/

/* flex container */
    display: flex;
    justify-content: space-evenly;
    gap: 2vw; /* vw = viewport width = % szer. okna przegl. */

    list-style-type: none;
    padding: 0;
    margin: 0;

    /* height: 100vh;
    width: 200px;*/
    text-align: center;
    font-family: "Jersey 20";
    font-size: 48px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

nav ol li{
    /*flex: 1;  kazdy element zajmie tyle samo miejsca */
    flex: 1 1 200px;
}
nav ol li a{
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: center;
    padding: 20px 0;
    align-items: center;
/* paddingi wplywaja na otoczenie, boxy maja 100% szer */
}

nav ol li a:hover{
    animation: shake 0.3s ease-in-out;
}

nav .kotek{
    writing-mode: horizontal-tb;
    width: 125px;
    height: 85px;
    align-items: center;
    justify-content: center;
}

nav .kotek:hover{
    animation: none;
}

/* WSZYSTKIE SEKCJE */
.dots{
    display: flex;
    gap: 14px;
    justify-content: flex-start;
    margin-top: 27px;
    margin-bottom: 27px;
}

.dots > * {
    flex-shrink: 0;
}

.dot{
    background-color: #ffffff70;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
    gap: 14px;
}

section{
    min-height: 80vh; 
    padding-left: 12rem;
    padding-right: 12rem;
    gap: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.zawartosc {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    width: 100%; /*przywracamy max szer po flex'ie*/
    flex-wrap: wrap;
    
}

.zawartosc h2, h5{
    margin-top: 20px;
    margin-bottom: 20px;
}

.zawartosc h3{
    margin-top: 0px;
    margin-bottom: 0px;
}
.zawartosc h4{
    margin-top: 0px;
    margin-bottom: 6vh;
}

.zawartosc p{
    margin-bottom: 65px;
}

.tekst {
    
    min-width: 0;
    max-width: 500px;
    justify-content: flex-start;
    margin-top: 10vh;
    margin-bottom: 10vh;
}

.kot {
   
    max-width: 500px;
    width: 100%;
    position: sticky;
    top: 20px;
    align-self: flex-start;
    margin-top: -10px;
    margin-bottom: -10px;
}

/* POSZCZEGOLNE SEKCJE */
/*SEKCJA 1 - HOME*/
#home{
    background: var(--bg-gradient);
}

#home .naglowki{
    background: none;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    flex: 1 1 100%;
}

#home .naglowki h1{
    margin-top: 2vh;
}

#home .naglowki h2{
    margin-top: 100px;
}

#home .naglowki h3{
    text-align: right;
    padding-right: 5vh;
}

#home .naglowki .kitty{
    color: var(--kolor-uzupelniajacy);
    text-align: right;
    margin-top: -50px;
}

#home .znaki{
    margin: 100px;
    gap: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    max-width: 860px;
    width: 100%;
}

#home .znaki a{
    padding: 10px;  
}

#firebutton, #waterbutton{
    justify-content: flex-end;
    padding-right: 20px;
}

#airbutton, #earthbutton {
    justify-content: flex-start;
    padding-left: 20px;
}

#home .znaki img{
    width: 160px;
    height: auto;
    display: block;
    align-items: center;
    justify-items: center;
}

#home h1{
    margin-top: 125px;
}
#home h1 span{
    color: var(--kolor-uzupelniajacy);
}

#home h2{
    color: var(--kolor-jasny);
    text-align: center;
    
}
#home h2 span{
    color: var(--kolor-uzupelniajacy);
}

#home a{
    font-family: "Jersey 20";
    font-size: 80px;
    text-align: center;
    padding: 20px;
    display: block;
}

#home a:hover{
    animation: shake 0.3s ease-in-out;
}

#firebutton{
    color: var(--kolor-fire);
}
#airbutton{
    color: var(--kolor-air);
}
#waterbutton{
    color: var(--kolor-water);
}
#earthbutton{
    color: var(--kolor-earth);
}

#home .kompozycja{
    margin-top: 100px;
    margin-bottom: 100px;
}

/*SEKCJA 2 - FIRE*/
#fire{
    background:linear-gradient(
    180deg,
    #212324 50%,
    #511E04 100%);

    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

#fire h2, #fire h4{
    color: var(--kolor-fire);
}

#fire .dotactive{
    background-color: var(--kolor-fire);
    opacity: 0.9;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    gap: 8px;
}

/*SEKCJA 3 - WATER*/

#water{
    background:linear-gradient(
    180deg,
    #212324 0%,
    #ADCFC1 100%);
}

#water h2, #water h4{
    color: var(--kolor-water);
}

#water .dotactive{
    background-color: #1B4041;
    opacity: 0.9;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    gap: 8px;
}

/*SEKCJA 4 - AIR*/

#air{
    background:linear-gradient(
    180deg,
    #212324 50%,
    #3E5055 100%);
    display: flex;
    flex-wrap: wrap;
}

#air h2, #air h4{
    color: var(--kolor-air);
}

#air .dotactive{
    background-color: #F2F4F4;
    opacity: 0.9;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    gap: 8px;
}

/*SEKCJA 5 - EARTH*/

#earth{
    background: linear-gradient(
        180deg,
        #212324 50%,
        #65631B 100%);
}

#earth h2, #earth h4{
    color: var(--kolor-earth);
}

#earth .dotactive{
    background-color: #D1D26C;
    opacity: 0.9;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    gap: 8px;
}

/* STOPKA */
#stopka{
    background-color: var(--kolor-ciemny);
    min-height: 20vh;
    /*padding-bottom: 4vh;*/
    gap: 68px;
}

#stopka .zawartosc{
    margin-top: 97px;
    margin-bottom: 65px;
    gap: 83px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    
}

#stopka .logo{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#stopka .zawartosc .logo .kotek{
    width: 198px;
    height: auto;
}

#stopka .socialmedia{
    display: flex;
    flex-wrap:wrap;
    justify-content: center;
    align-items: center;
    gap: 92px;
   
}

#stopka article h3{
    color: var(--kolor-uzupelniajacy);
}