/* ------- */
        /* FLEXBOX */
        /* ------- */
        
        .flexbox{
            display: flex;
            justify-content: center;
            align-items: flex-start;
            gap: 22px; /* Dodaje odstep miedzy boxami w flexbox */
            flex-wrap: wrap; /* ← TO. Jak nie mieszczą się obok siebie, idą niżej */
    
        }
        
        /* ----------- */
        /* LEFT-COLUMN */
        /* ----------- */
        
        .left-column {
                display: flex;
                flex-direction: column;
                width: auto;
                gap: 16px;
                flex-shrink: 0;
        }
        
        /* ------------ */
        /* RIGHT-COLUMN */
        /* ------------ */
        
        .right-column {
                display: flex;
                flex-direction: column;
                width: auto;
                gap: 16px;
                flex-shrink: 0;
        }

               
        
        /* ---- */
        /* ROOT */
        /* ---- */
        
         :root{
          --bg:#FDD50B;
          --border:#E870A0;
          --text:#78226D;
        }
        
        /* ---------- */
        /* NEW THEME */
        /* ---------- */
        
        body.dark-mode {
            --bg: #1a1a2e;
            --border: #5c424b;
            --text: #FDD50B;
            background-image: url('../assets/bg-img/5014.png');
            background-repeat: repeat; /* kafle jak tapeta */
        }
        
        /* ---------- */
        /* NOISE MODE */
        /* ---------- */
        
        body.noise-mode {
            --bg: #ffb6c1;
            --border: #ff69b4;
            --text: #880044;
            /* background-image: url('https://tcrf.net/images/3/30/Pizza_Tower_spr-vsnoise.png'); */
            background-image: url('https://i.pinimg.com/736x/bc/f2/9a/bcf29a65ccadf904c0e5f82368101de8.jpg');
            background-repeat: repeat; /* kafle jak tapeta */
            background-size: 280px /*250px*/; /* szerokość x wysokość kafelka */
        }
        

        /* --------------------------------  */
        /* My custom FONT lockated in fonts! */ 
        /* --------------------------------  */
        
        @font-face {
            font-family: 'SHPinscher-Regular'; /* rodzina fontów? Wybiera po prostu nazwe mojego fonta.*/
            src: url('/fonts/SHPinscher-Regular.otf') format('truetype'); /* Daje dokladna sciezke do naszego plku .otf. truetype to format pliku. */
            font-weight: normal;  /* Waga fonta. Jakby bylo bold to bedzie gruby wszedzie. */
            font-style: normal; /* Style fonta normlany. Można dać jeszcze italic czy oblique. Będzie wtedy bardziej pochylony */
        }
        
        /* -----------------  */
        /* WHOLE BODY OF HTML */
        /* -----------------  */
        
        body {
            margin: 15px; /* Im wieksza wartosc tym dalej od krawedzie strony.*/
            background: linear-gradient(90deg, #78226d, #772141, #582177, red); /* gradient - "to right" = poziomo do prawej, pierwszy kolor góra, drugi dół. */
            color: var(--bg); /* kolor całego naszego body? Tekstu chyba! */
            font-family: 'SHPinscher-Regular', monospace; /* nasz font a po przecinku monospace jako zapasowa gdyby tamta sie nie załadowała */
            font-size: 1.5em; /* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-size */
            text-align: center; /* text-aling center w caluktim naszym body do center! */
        }
        
        /* ----------------------- */
        /* MAIN BOX + LEFT + RIGHT */
        /* ----------------------- */
        
        .main, 
        .left-box, .right-box, .gustebook {
          background-color: var(--bg);
          border: 12px groove var(--border);
          color: var(--text);
          border-radius: 5px;
          padding: 20px;
        }
        
        .main {
          flex: 1;
                max-width: 500px; /* nie urośnie szerzej niż tyle */
                min-width: 200px; /* nie skurczy się za bardzo */
        }

        .left-box, .right-box {
          width: 300px;
        }
          
        .right-box a img{ 
            width:150px; 
            display:block; 
            margin:8px auto; 
        }
        
        /* --------- */
        /* GUESTBOOK */
        /* --------- */
        
        .gustebook {                                                     
          border: 12px groove var(--border);  /* DODANA RAMKA! */
          background-color: var(--bg);         /* TŁO JAK W MAIN-BOX */
          padding: 20px;                       /* ODSTĘP OD RAMKI */
        }
        
        .gustebook iframe {
          width: 100%;     /* 100% szerokości RODZICA (.gustebook) */
          height: 420px;
          /* reszta stylów... */
        }
        
       /* ------- */
       /* ARTWORK */
       /* ------- */
       
       .artwork{
           display: grid; /* włącza tryb siatki na kontenerze */
           grid-template-columns: repeat(2, 220px); /* tworzy 2 kolumny o szerokości dopasowanej do zawartości */
           gap: 2px;
           width: fit-content; /* kontener dopasowuje się do zawartości */
           margin: 0 auto; /* to centruje cały grid */
       }
       
       .artwork div{
           padding: 2px;
           border: 1px groove white;
           display: flex;          /* włącz flex na divie by funkcje dzialaly pod spodem */
           justify-content: center; 
           align-items: center;     /* środkuje pionowo divy*/
       }
       
        .navbar {
            margin-top: 70px; /* miejsce na giffy które wystają ponad przyciski */
        } 

        .site-nav {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 22px;
            padding: 16px 0;
        }

        .site-nav a {
            display: inline-block; /* Wyświetlanie liniowe oznacza to, że nasze <a> wyświetlą się w linii blokowo? */
            padding: 8px 12px; /* Czyli tak jakby pakował karton i masz padding w środku. Czyli? Ile miejsca masz zanim dojdzie do tekstu czy tego co jest w środku? Czyli w naszym przypadku <a> bo jest site-nav a? */
            border-radius: 5px; /* Zaokrąglanie ramki! Radius Zaokrąglanie! */
            color: var(--text); /* Kolor tekstu naszego <a> znajdującego się w .site-nav! */
            background: var(--bg); /* Kolor background naszego <a> znajdującego się w .site-nav! */
            text-decoration: none; /* Dekoracja tekstu? Tutaj mam none, czyli bez żadnej dekoracji! */
            border: 8px groove var(--border); /* Czyli ramka 8 pikseli, styl groove czyli tak chyba 3D? no i kolor samej ramki. */
            transition: transform 0.5s ease, box-shadow .12s ease; /* Zakładam że dodaję jakiś cień czy coś i transformuję w parę sekund, 0.8 nawet nie sekundy */
        }

        .site-nav a:hover,
        .site-nav a:focus {
            transform: translateY(-4px);
            box-shadow: 0 6px 18px rgba(120, 34, 109, 0.08);
            outline: 3px solid rgba(120, 34, 109, 0.12);
            z-index: 2; /* Z-index to dosłownie oś Z — głębokość. Jak dasz czemus 1 a czemus 2 to bedzie wyzej i sie wyswietlac nad tym*/
        }
        
        /* ------------------------- */
        /* Random GIFS fixed postion */
        /* ------------------------- */
    
        .noise-idle {
          position: fixed; /* Zostaje w miejscu na stronie. Jak scrollujesz znika bo strona jedzie w górę razem z nim. */
          top: 100px; /* -100 pikseli od górnej krawędzi przeglądarki */
          right: 5px; /* 10 pikseli od lewej krawędzi */
          width: 120px; /* szerokośc 200 pikseli */
          z-index: -1
        }
        
        .fake-noise {
          position: fixed; /* Zostaje w miejscu na stronie. Jak scrollujesz znika bo strona jedzie w górę razem z nim. */
          top: 50px; /* 500 pikseli od górnej krawędzi przeglądarki */
          right: 5%; 
          width: 200px; 
          z-index: -1
        }
        
        .lain64 {
          position: absolute; /* Podaza za toba na ekranie */
          bottom: 450px; /* Im wyższa wartosc dla top tym wyzje idzie np. 70% to wyzej do gory */
          left: 200px; 
          width: 100px; 
          z-index: 3;
        }
        

/* wspólne style dla wszystkich wersji */
.lain64, .lain64-dark, .lain64-noise {
    position: absolute;
    bottom: 450px;
    left: 200px;
    width: 100px;
    z-index: 3;
}

/* domyślnie ukryj warianty */
.lain64-dark, .lain64-noise {
    display: none;
}

/* dark-mode */
body.dark-mode .lain64 { display: none; }
body.dark-mode .lain64-dark { display: block; }

/* noise-mode */
body.noise-mode .lain64 { display: none; }
body.noise-mode .lain64-noise { display: block; }

       
        .miku-gleep {
          position: absolute; /* Zostaje na ekranie. Jak scrollujesz — nadal go widzisz zawsze. */
          top: 80px; /* 500 pikseli od górnej krawędzi przeglądarki */
          left: 130px; /* 300 pikseli od lewej krawędzi */
          width: 80px; 
          z-index: 1;
        }
        
        /* --------------------------- */
        /* Wrappers for navigation bar */
        /* --------------------------- */
        
        .homelab-wrapper, /* Jesli cos ma 2 idetnczye CSS mozesz zapisac to po przecinku. */
        .find-me-here-wrapper,
        .foss-journal-wrapper,
        .home-wrapper,
        .about-me-wrapper{
            position: relative;
        }
        
        
        /* --------------------------------- */
        /* GIFS for navigation bar wrapper's */
        /* --------------------------------- */
        
        .edd-wave {
          width: 80px;
          position: absolute; 
          top: -80px;
          right: 20px;
          z-index: -1; /* Z-index to dosłownie oś Z — głębokość. Jak dasz czemus 1 a czemus 2 to bedzie wyzej i sie wyswietlac nad tym*/ 
        }
        
        .tux-rotate {
          width: 80px;
          position: absolute; 
          top: -60px;
          right: 45px;
          z-index: -1; /* Z-index to dosłownie oś Z — głębokość. Jak dasz czemus 1 a czemus 2 to bedzie wyzej i sie wyswietlac nad tym*/ 
        }
        
        .glorp-type{
          width: 80px;
          position: absolute; 
          top: -60px;
          right: 45px;
          z-index: -1; /* Z-index to dosłownie oś Z — głębokość. Jak dasz czemus 1 a czemus 2 to bedzie wyzej i sie wyswietlac nad tym*/ 
        }
        
        .home{
          width: 70px;
          position: absolute; 
          top: -60px;
          left: 10px;
          z-index: -1; /* Z-index to dosłownie oś Z — głębokość. Jak dasz czemus 1 a czemus 2 to bedzie wyzej i sie wyswietlac nad tym*/
        }
        
        .clap-bocchi{
          width: 70px;
          position: absolute; 
          top: -60px;
          left: 5px;
          z-index: -1; /* Z-index to dosłownie oś Z — głębokość. Jak dasz czemus 1 a czemus 2 to bedzie wyzej i sie wyswietlac nad tym*/  
        }
        
        /* -------------------- */
        /* GIF for left wrapper */
        /* -------------------- */
        
        .left-box-wrapper,
        .guestbook-wrapper{
            position: relative;
        }
        
                /* kirby-headphones CSS */
        .kirby-headphones {
          position: absolute; /* Zostaje na ekranie. Jak scrollujesz — nadal go widzisz zawsze. */
          top: -45px; 
          right: -170px;
          width: 80px; 
          z-index: 1;
        }
                
        
        .tux-type {
          position: absolute; /* Zostaje na ekranie. Jak scrollujesz — nadal go widzisz zawsze. */
          top: -450px;
          left: -22px;
          width: 80px; 
          z-index: 1;
        }
        
        /* nowy gif — domyślnie ukryty, te same pozycje co lain64 */
        .tux-type-dark {
            position: absolute; /* ← tego brakuje! */
            display: none;
            top: -450px;
            left: -22px;
            width: 80px; 
            z-index: 1;
        }

        /* dark-mode — zamień miejscami */
        body.dark-mode .tux-type {
            display: none;
        }

        body.dark-mode .tux-type-dark {
            display: block;
        }
        
        .hiii-gif-dark {
            display: none;
        }

        body.dark-mode .hiii-gif {
            display: none;
        }

        body.dark-mode .hiii-gif-dark {
            display: block;
        }