/* ======================================================= */
/* 🌍 OGÓLNE USTAWIENIA STRONY                             */
/* ======================================================= */
body {
    /* 1. KOLOR WYJŚCIOWY I ANIMACJA */
   background-color:lightblue;
    /* Nazwa scenariusza | Czas trwania (12 sekund, żeby było powoli i kojąco) | Płynność | Nieskończenie */
    animation: plynneTloRona 12s ease-in-out;

    /* 2. CZYSZCZENIE MARGINESÓW */
    margin: 0;
    padding: 0;

    /* 3. USTAWIENIA TEKSTU I WYGLĄDU */
    font-family: sans-serif; /* Czysta, nowoczesna czcionka bezszeryfowa dla całego projektu */
    color: #333333;          /* Elegancki, ciemnoszary kolor dla domyślnych tekstów */
    
    /* 4. BEZPIECZEŃSTWO STRONY */
    min-height: 100vh;       /* Gwarancja, że tło zawsze pokryje cały ekran w dół */
    overflow-x: hidden;      /* Blokuje brzydki poziomy pasek przewijania, gdy menu się wysuwa */
}

/* Ukrywamy systemowy kwadracik checkboxa */
.kod-hamburgera {
    display: none;
}

/* ======================================================= */
/* 🍔 IKONA HAMBURGERA W LEWYM GÓRNYM ROGU                 */
/* ======================================================= */
.ikona-hamburgera {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    cursor: pointer;
    z-index: 100; /* Gwarancja, że ikonka zawsze będzie na wierzchu */
    
    /* Przypinamy ikonkę w rożku ekranu */
    position: fixed; 
    top: 20px;    
    left: 20px;   
    
    /* Odpychanie elementów poniżej, gdy menu jest wyłączone */
    margin-bottom: 40px;
}

/* Trzy białe kreski hamburgera */
.ikona-hamburgera span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: white;
    border-radius: 3px;
}

/* ======================================================= */
/* 📐 PIONOWY PANEL BOCZNY (ZAKTUALIZOWANY)                 */
/* ======================================================= */
.linki-kontener {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 80px 0px 20px 0px; /* Szerokość paddingu bocznego na 0 na start */
    
    
    position: fixed;
    top: 0;
    left: 0;
    width: 0px; /* Na start panel ma zero szerokości, czyli jest niewidzialny */
    height: 100vh;
    background-color: #1a1a1a;
    box-shadow: none;
    overflow: hidden; /* Ukrywa linki, kiedy menu jest zamknięte */
    
    transition: width 0.3s ease-in-out, padding 0.3s ease-in-out; 
}

/* Wygląd linków wewnątrz panelu */
.link-menu {
    color: white;
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    padding: 12px;
    border-radius: 5px;
    text-align: left;
    transition: background-color 0.2s;
}

.link-menu:hover {
    background-color: purple;
}

/* Kiedy menu jest otwarte: panel płynnie dostaje 250px szerokości i cień */
.kod-hamburgera:checked + .ikona-hamburgera + .linki-kontener {
    width: 250px;
    padding: 80px 20px 20px 20px;
    box-shadow: 5px 0px 15px rgba(0, 0, 0, 0.5);
}

/* ======================================================= */
/* 🔥 UNIWERSALNE ODPYCHANIE STRONY I PODSTRONY            */
/* ======================================================= */

/* Dodajemy płynność ruchu dla wszystkich głównych sekcji na obu stronach */
.rzadek, .dodatek, .fraktale, .sofizmaty, .tresc-podstrony, div {
    transition: transform 0.3s ease-in-out, margin-left 0.3s ease-in-out;
}

/* GŁÓWNA REGUŁA: Jeśli checkbox jest kliknięty, przesuń CAŁĄ zawartość 
   strony głównej oraz podstrony (w tym ogólny div podstrony) w prawo o 250px! */
.kod-hamburgera:checked ~ .tresc-podstrony,
.kod-hamburgera:checked ~ .rzadek,
.kod-hamburgera:checked ~ .dodatek,
.kod-hamburgera:checked ~ .fraktale,
.kod-hamburgera:checked ~ .sofizmaty,
.kod-hamburgera:checked ~ div {
    transform: translateX(250px);
}

/* Wyjątek: Sam panel boczny nie może się przesuwać w prawo przez regułę 'div' */
.kod-hamburgera:checked ~ .linki-kontener {
    transform: translateX(0px);
}

/* ======================================================= */
/* 🎨 STYLIZACJA KAFELKÓW MATEMATYCZNYCH                   */
/* ======================================================= */

/* KAFELEK: Figury i Bryły (Rządek) */
.rzadek {
    display: inline-flex;
    align-items: center;
    flex-direction: row;
    gap: 20px;
    padding: 10px;
    margin: 10px;
    margin-left: 50px; 
    border: 5px solid green;
    border-radius: 13px;
    box-shadow: 13px 13px 29px rgba(0, 0, 0, 0.4);
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out; 
}

.rzadek:hover {
    transform: scale(1.1) translateX(0px); /* Blokujemy interferencję hovera z transformacją menu */
    box-shadow: 0px 0px 30px #00ffcc;
}

/* Wnętrze kafelka figury */
.prst {
    display: inline-flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    margin: 10px;
}

.figury {
    height: 250px;
    width: 400px;
    border-radius: 10px;
}

/* Wnętrze kafelka bryły */
.szcz {
    display: inline-flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    margin: 10px;
}

.bryly {
    height: 250px;
    width: 400px;
    border-radius: 10px;
}

/* KAFELEK: Równania liniowe (Dodatek) */
.dodatek {
    display: inline-flex;
    align-items: center;
    flex-direction: column;
    border: 5px solid green;
    border-radius: 13px;
    padding: 10px; 
    margin: 10px;
    box-shadow: 13px 13px 29px rgba(0, 0, 0, 0.4); 
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.dodatek:hover {
    transform: scale(1.1); 
   box-shadow: 0px 0px 30px #00ffcc;
}

.rowna {
    height: 250px;
    width: 400px;
    border-radius: 10px;
}

/* KAFELEK: Fraktale */
.fraktale {
    display: inline-flex;
    align-items: center;
    flex-direction: column;
    border: 5px solid green;
    border-radius: 15px;
    margin: 10px;
    padding: 10px;
    margin-left: 50px;
    box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.7);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.fraktale:hover {
    transform: scale(1.2);
   box-shadow: 0px 0px 30px #00ffcc;
}

.zdjfrk {
    width: 250px;
    height: auto;
    border-radius: 15px;
}

/* KAFELEK: Sofizmaty */
.sofizmaty {
    display: inline-flex;
    align-items: center;
    flex-direction: column;
    border: 5px solid green;
    border-radius: 13px;
    box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.7);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    margin: 10px;
    padding: 10px;
}

.sofizmaty:hover {
    transform: scale(1.2);
    box-shadow: 0px 0px 30px #00ffcc;
}

.sfm {
    width: 260px; 
    height: 250px;
    border-radius: 13px;
}

/* Styl dla tekstu na podstronie */
.tresc-podstrony {
    padding: 20px;
    margin-left: 50px;
}

/* Nowa klasa dodana przez Rona */
.napit {
    margin-left: 60px;
    margin-top: 30px;
    font-size: 40px;
}

/* ======================================================= */
/* 🎬 SCENARIUSZ ANIMACJI TŁA (BRAKUJĄCY ELEMENT!)         */
/* ======================================================= */
@keyframes plynneTloRona {
    0% {
        background-color: lightblue;
    }
    33% {
        background-color: #20b2aa; /* Jasny morski */
    }
    66% {
        background-color: #00bfff; /* Głęboki błękit */
    }
    100% {
        background-color: lightblue; /* Płynny powrót */
    }
}
.tytul{
    font-size: 40px;
    font-family: Arial, Helvetica, sans-serif;
    margin-left: 500px;
}

.lody{
    height: 200px;
    width: auto;
    border-radius: 30px;
    margin: 20px;
}
.kot{
    height: 200px;
    width: auto;
    border-radius: 30px;
    margin: 20px;
    
}
.kot:hover{
    animation: whr 6s ease-in-out;
}

@keyframes whr {
    0% {
        /* Punkt początkowy: Mały i bez filtrów */
        transform: scale(1);
        filter: hue-rotate(0deg) sepia(0);
    }
    
    50% {
        /* PŁYNNY SZCZYT w połowie czasu: Największy i najwięcej filtrów */
        transform: scale(1.2);
        filter: hue-rotate(180deg) sepia(0.8);
    }
    
    100% {
        /* PŁYNNY POWRÓT na start: Przeglądarka wie, jak tu dojść, bo zna drogę powrotną */
        transform: scale(1);
        filter: hue-rotate(360deg) sepia(0);
    }
}

.input-password{
    margin: 10px;
    border-radius: 5px;
}
.komunikat-sukces {
    color: limegreen;
    font-weight: bold;
}
.komunikat-sukces {
    color: red;
    font-weight: bold;
}
.lista-ceny{
    border: solid snow 3px;
    margin: 20px;
    padding: 5px;
    display: inline-flex;
    border-radius: 10px;
}

.lista-cen{
    border: solid snow 3px;
    margin: 20px;
    padding: 5px;
    display: inline-flex;
    border-radius: 10px;
}
.trzylisty{
    display: inline-flex;
}
.sklepRona{
    border: dotted red 2px;
    border-radius: 10px;
    margin: 10px;
    padding: 5px;
    display: inline-flex;
}
.bananybla{
    border-radius: 10px;
    margin: 10px;
    
}
.zamknij{
    border-radius: 4px;
    background-color: greenyellow;
    height: 20px;
    margin-top: 100px;
    
}
.bananyniebla{
    display: inline-flex;
    border: solid yellow;
    padding: 5px;
    margin: 10px;
    border-radius: 10px;
}