body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            height: 100vh;
            width: 100vw;
            margin: 0;
            font-family: Arial, sans-serif;
            /*font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
            font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
            font-family: "Lucida Console", Monaco, monospace;
            font-family: Trebuchet MS, Helvetica, sans-serif;*/
            overflow: hidden;
            background-color: snow;
            background-size: 400% 300%;            
	        background-position-x: center;
            background-position-y: center;        
        }

        * {
                user-select: none; /* Wyłącza zaznaczanie wszystkich elementów */
            }


        /* Styl dla niestandardowego kursora */
        .custom-cursor {
            display: none;
            position: absolute;
            width: 64px; /* Zmień na rozmiar kursora */
            height: 64px;
            background: url('grafika_programu/cursor.png') no-repeat center;
            background-size: cover;
            pointer-events: none; /* Zapobiega kolizjom z innymi elementami */
            transform: translate(-50%, -50%); /* Ustawia środek kursora w punkcie kliknięcia */
            z-index: 999; /* Zwiększenie indeksu, aby przycisk był na wierzchu */
        }

        .logo {
            /*background-image: url('grafika_programu/logo.png');*/
            background-size: contain;
            background-repeat: no-repeat;
            background-position: top;
            width: 700px;
            height: 100px;
            /*text-indent: -9999px;  ukrywa tekst, jeśli jakiś jest */
        }
        
        /*@keyframes clickAnimation {
            0% {
                transform: scale(1);
                opacity: 1;
            }
            50% {
                transform: scale(1.5);
                opacity: 0.6;
            }
            100% {
                transform: scale(0);
                opacity: 0;
            }
        }

            .click-effect {
            position: absolute;
            border-radius: 50%;
            width: 25px; 
            height: 25px;
            background-color: rgba(255, 0, 255, 0.6); 
            pointer-events: none;
            animation: clickAnimation 0.6s ease-out forwards;
        }*/


        /*caly ekran startowy wyswietlany po nacisnieciu klawisza MENU   main-start-screen-oprogramie */
        .main-startscreen-popupMenu  {
            display:none;
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
            position: absolute;
            text-align: left;
            padding: 50px;
            font-size: 1.5vw; /*25*/
            top: 50%;
            left: 50%;
            width: 85vw;
            height: 50vh;
            flex-direction: column;
            transform: translate(-50%, -50%);
            background-color:   rgba(135, 206, 250, 1);
            color: rgb(72, 72, 75);
            border-radius: 15px;
            
        }
        #start-screen {
            display: none;
        }

        #start-main-menu { /*obszar butonow obszaru menu - lewy panel a butonami*/
            display: flex; /*bylo flex*/
            
            position: absolute;
            text-align: center;
            font-size: 0.7em;
            top: 50%;
            left: 50%;
            width: 45vw;
            height: 60vh;
            flex-direction: column;
            transform: translate(-95%, -50%);
            background-color: rgba(135, 206, 250, 0.5);
            color: darkblue;
            border-radius: 15px;
            
        }

        #start-screen-main-menu-buttonscontent {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            flex-wrap: wrap;
            font-size: 1em;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            justify-content: center;
            align-content: center;
            gap: 20px;
            
        }

        #start-main-progress-panel { /* prawy panel z informacjami o postepach*/

            display: none; /*bylo block*/
            position: absolute;
            text-align: center;
            font-size: 1.1em;
            top: 50%;
            left: 50%;
            width: 30%;
            height: 60vh;
            flex-direction: column;
            transform: translate(20%, -50%);
            background-color: rgba(135, 206, 250, 0.5);
            color: darkblue;
            border-radius: 15px;
        }

        #start-main-progress-panel-basic {
            display: flex;           /* Umożliwia układanie elementów w elastyczny sposób */
            flex-direction: column;  /* Ustawia kierunek kolumnowy */
            justify-content: flex-start; /* Ustawia elementy na początku */
            font-size: 1.3vw ;
            font-size-adjust:auto;
            /*padding: 10px;*/
        }

        #start-main-progress-panel-advance {
            display: none;
            text-align: left;
            margin-left: 40px;
            font-size:1.2vw;
        }

        #start-main-progress-panel-content { /*content prawego panela z informacjami o postepach*/
            display: block;            
            padding: 2em;
            border-radius: 10px;
            font-size: 1em;
            color: darkslategrey;
            text-align: left;
            justify-content: left;
            align-content: left;
            
            gap: 20px;
        }

        #start-main-progress-panel-content-info { /*content prawego panela z informacjami o postepach*/
            display: block;            
            font-size: 0.7em;
            color: darkslategrey;
            text-align: left;
            justify-content: left;
            align-content: left;
            margin-left: 20px;
            margin-top: auto; 
            position: absolute;      /* Ustawia element na absolutną pozycję */
            bottom: 10px;           /* Ustawia go 10px od dołu kontenera */
        }

        #start-main-progress-panel-advance-buttons {
            display:flex; 
            width: 80%;
            justify-content: space-between;
            padding: 0px;
            position: absolute; 
            bottom: 0px; 
            margin-right: 20px;

        }

        #start-screen-title {
            font-family: "Lucida Console", Monaco, monospace;
            font-size: 2em;
            display: grid;
            text-align: center;
            

        }

        #game-over-banner {
            display: none;
            flex-direction: column;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 55vw;
            height: 35vh;
            gap: 10px; /* Dostosuj wartość odstępu między przyciskami */
            background-color: rgba(135, 206, 250, 0.98);
            color: papayawhip;
            font-size: 10px;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            justify-content: flex-start; /* Przeniesienie zawartości do góry */
            align-content: space-around;
        }

        /* górny panel gry*/
        #game-topPanel {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1em;
            text-align: center;
            width: 100%;
            height: 9vh; /* Ustal wysokość topPanel, aby uniknąć nieoczekiwanego rozszerzania */
            /*margin: 5px auto;  Opcjonalnie ustawienia marginesu */
            padding: 0;
            /*border: 1px solid black;  Tylko do testowania, można usunąć */
            background-color: snow;
            flex-direction: row; /* Ustawienie, aby elementy były w jednej linii */
            overflow: hidden; /* Zapobiega rozciąganiu topPanel przez duże elementy */
        }
        #top-Panel-score {
            display: flex;
            font-size: 30px;
            color: saddlebrown;
            margin-right: 20px;
        }

        #game-board {
            display: grid;
            background-color: snow;
            align-content: space-between; /* Równomierne rozmieszczenie w pionie */
            justify-content: space-between; /* Równomierne rozmieszczenie w poziomie */
            padding: 0;
            width: 100%;
            height: 100%;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Kolumny o szerokości min. 100px */
            grid-template-rows: auto; /* Automatyczna wysokość wierszy */
        }

        .square {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8em;
            font-weight: normal;
            /*color: black;*/
            background-color: transparent;
            border-radius: 24px;
            transition: transform 0.2s ease; /* Płynna transformacja w czasie 0.5s */
        }

            .square:focus, .square:active {
                -webkit-tap-highlight-color: transparent; /* Usuwa efekt zaznaczenia */
                outline: none;
                box-shadow: none; /* Usuwa cień */
            }

            .square.selected {
                /*background-color: greenyellow !important;  Overwrites inline styles */
                border: solid;
                border-color: black;
                box-shadow: 10px 10px 5px #888888;
                transform: scale(1.2) !important; /* Overwrites inline styles */
                font-size: 2.5rem !important;
                font-weight: bold;

                animation: blinkBorder 1s infinite alternate;
            }

            /* Definicja animacji */
            @keyframes blinkBorder {
                0% {
                    border-color: black; /* Pierwszy kolor */
                    box-shadow: 10px 10px 5px #888888;
                }
                50% {
                    border-color: red; /* Drugi kolor */
                    box-shadow: 10px 10px 5px red;
                }
                100% {
                    border-color: black; /* Powrót do pierwszego koloru */
                    box-shadow: 10px 10px 5px #888888;
                }

            }

            .square.clicked {
                /*background-color: greenyellow; /*#FFC107;*/
                transform: scale(0.9) !important;
            }

            .square.disabled {
                background-color: transparent !important; /* Overwrites inline styles */
                /* cursor: not-allowed; */
                transform: scale(0);
            }

            .square.fade-out {
                transition: opacity 1s ease;
                opacity: 0;
            }

        /*  .animation {
            font-size: 3em;
            color: yellow;
            opacity: 1;
            position: absolute;
            transform: translate(-50%, 0);
            transition: opacity 2s ease, transform 0.3s ease;
        }

        #animated-value {
            display: none;
            color: yellow;
        }*/

        button:focus, button:active {
            -webkit-tap-highlight-color: transparent; /* Usuwa podświetlenie przycisku na urządzeniach mobilnych */
            background-color: transparent; /* Domyślnie bez tła, jeśli nie chcesz zmieniać tła przy kliknięciu */

            outline: none;
            box-shadow: none; /* Usuwa cień wokół przycisku */
            /*background-color: #FF6347;  Nowy kolor tła przy focusie */
            color: snow; /* Zmieniony kolor tekstu */
        }

        h2{
            font-size: 25px;
        }

        .butonGame {
            width: 20vw;
            height: 8vh;
            background-color: darkslateblue;
            border-radius: 15px;
            font-size: 1.6vw;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            cursor: pointer;
            text-align: center;
            margin: auto;
            flex-grow: 1;
        }
            .butonGame:hover {
                background-color: #4CAF50;
                color: #FFFFFF;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
                transform: scale(1.1);
                font-size: 2.2vw;
                transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
            }

        .butonDodatkiBackToMenu {
                width: 20vw;
                height: 8vh;
                background-color: darkslateblue;
                border-radius: 15px;
                font-size: 1.6vw;
                color: white;
                display: flex;
                align-items: center;
                justify-content: center;
                border: none;
                cursor: pointer;
                text-align: center;
                margin: auto;
        }
                .butonDodatkiBackToMenu:hover {
                    background-color: #4CAF50;
                    color: #FFFFFF;
                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
                    transform: scale(1.1);
                    font-size: 2.2vw;
                    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
                }

        #butonWyloguj {
            display: block;
            position: fixed;
            width: 15vw; 
            height: 2vw; /*Dopasowanie wysokości do szerokości */
            font-size: 1rem;
            background-color: lightskyblue;
            color: rgb(0, 0, 0);
            top: 90%;
            right: 0%;
            margin-right: 0;
            margin-top: 0px;
            border-radius: 5px;
            border-style:none;
            /*cursor: pointer;*/
            z-index: 999; /* Zwiększenie indeksu, aby przycisk był na wierzchu */

        }

        #butonWyloguj:hover {
            background-color: #4CAF50;
            color: #e90a0a;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transform: scale(1.1);
            font-size: 1.5em;
            transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
        }

        #buttonMainDataPanel {
            width: 15vw;
            height: 5vh;
            font-size: 1.2vw;
            cursor: pointer;
        }

        .buttonMainDataPanelAdvance {
            width: auto;
            height: auto;
            font-size: auto;
            color:brown;
            background-color: #6158584d;
            border-radius: 15px;
            border: none;
            cursor: pointer;
        }
        .buttonMainDataPanelAdvance:hover {
            background-color: #ee07079d;
            color: #f2eaea;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transform: scale(1.5);
            font-size: auto;
            transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
        }

        .butonEndGame {
            width: 15vw;
            height: 8vh;
            background-color: darkslateblue;
            border-radius: 15px;
            font-size: 1.9em;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            text-align: center;
            margin: auto;
        }

        .butonEndGame:hover {
            background-color: #4CAF50;
            color: #FFFFFF;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transform: scale(1.2);
            font-size: 2.2em;
            transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
        }

        #buttonUpperSettings {
            display:none;
            position: fixed;
            width: auto; /* Zmniejszono szerokość kwadratów */
            height: 3vw; /*Dopasowanie wysokości do szerokości */
            font-size: 1vw;
            color: darkslateblue;
            top: 0.5%;
            right: 0.5%;
            margin-right: 0;
            margin-top: 0px;
            border-radius:15px;
            border-style: none;
            z-index: 999; /* Zwiększenie indeksu, aby przycisk był na wierzchu */
            cursor: none !important; /* Ustawia domyślny kursor dla przycisku */
        }
        #buttonUpperMenu {
            display: none;
            position: fixed;
            width: auto; /* Zmniejszono szerokość kwadratów */
            height: 3vw; /*Dopasowanie wysokości do szerokości */
            font-size: 1vw;
            color: darkslateblue;
            top: 0.5%;
            left: 0.5%;
            margin-right: 0;
            margin-top: 0px;
            border-radius: 15px;
            border-style: none;
            z-index: 999; /* Zwiększenie indeksu, aby przycisk był na wierzchu */
            cursor: none !important; /* Ustawia domyślny kursor dla przycisku */
        }

        /* HOVER dla obu przycisków */
        #buttonUpperSettings:hover,
        #buttonUpperMenu:hover {
            background-color: darkslateblue; /* ciemniejsze tło po najechaniu */
            color: white;                    /* jasny tekst */
            box-shadow: 0 0 0.5vw rgba(0,0,0,0.4);
        }

        /* style do menu Ustawien*/

        #game-Settings {
            display: flex;
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 1%;
            background-color: rgba(255, 255, 255, 0.9);
            border: 2px solid black;
            border-radius: 10px;
            width: 50vw;
            height: auto;
            max-width: 450px;
            max-height: 100%;
            overflow: hidden;
            font-size: 20px;
            flex-direction: column;
            align-items: stretch;
            /*cursor: pointer;*/
            justify-content: space-between;
        }

        .input-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            align-items: center; /* Doda pionowe wyrównanie */
            width: 100%;
        }

            .input-row label {
                /*margin-right: 10px;*/
                font-size: 1em;
                text-align: left;
            }

            .input-row input {

                /*justify-self: right;*/
            }


        .input-container {
            position: relative;
            display: flex;
            
        }

        input[type=number] {
            text-align: center;
        }

            input[type=number]::-webkit-inner-spin-button,
            input[type=number]::-webkit-outer-spin-button {
                -webkit-appearance: none;
                appearance: auto;
            }


        button {
            margin-top: 10px;
            /*cursor: pointer;*/
        }

        .buttony_w_Stettings {
            display: flex;
            justify-content: center;
            margin-top: 20px; /* Opcjonalny odstęp od poprzednich elementów */
            border-radius:15px;
            /*cursor: pointer;*/
        }

        .buttonyWmenu {
            width: 30%;
            height: 20%;
            font-size: 1em;
            text-align: center;
            margin: 0 10px; /* Odstęp między przyciskami */
            border-radius: 8px;
            cursor: pointer;
        }

        #backButton {
            position: fixed;
            width: 5vw; /* Zmniejszono szerokość kwadratów */
            height: 2vw; /*Dopasowanie wysokości do szerokości */
            font-size: 1vw;
            top: 0;
            right: 0;
            margin-right: 0;
            margin-top: 0px;
            z-index: 999; /* Zwiększenie indeksu, aby przycisk był na wierzchu */
            cursor: pointer;
        }

        #backToMenukButton {
            position: fixed;
            width: 5vw; /* Zmniejszono szerokość kwadratów */
            height: 2vw; /*Dopasowanie wysokości do szerokości */
            font-size: 1vw;
            top: 0;
            left: 0;
            margin-left: 0;
            margin-top: 0px;
            z-index: 999; /* Zwiększenie indeksu, aby przycisk był na wierzchu */
            cursor: pointer;
        }

        .prompt-regular-italic {
            font-family: "Prompt", sans-serif;
            font-weight: 400;
            font-style: italic;
        }

        .custom-input {
            width: 20%;
            height: 10%;
            font-size: 1.5em;
            text-align: center;
            margin-top: 2%;
            /*justify-content: right;*/
            display: inline-block;
        }

        .custom-input-select {
            padding: 5px;
            font-size: 16px;
            border-radius: 4px;
            border: 1px solid #ccc;
        }

        input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            appearance: auto;
        }

        #wybor_zakresu_znakow {
            display: flex;
            flex-direction: column;
        }

        #Liczba_do_znalezienia {
            display: flex;
            flex-direction: column;
        }

        #game-naglowek-info {
            display: flex;
            font-size: 1em;
            color: darkslategrey;
        }

        .footer {
            display:block;
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 5%;

            text-align: center;
            background-color: #fff;
            color: #888;
            box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
        }

        #naglowekBanera {
            position: absolute;
            top: 1%; /* Odległość od górnej krawędzi */
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            font-size: 3em;
            
            color: darkslategrey;
        }

        .buttons-butonEndGame-container { /*to jest pasek z butonami w banerze po zakonczeniu ćwiczenia*/
            display: flex;
            width: 100%;
            justify-content: space-evenly; /* Wyśrodkowanie poziome */
            align-items: center; /* Wyśrodkowanie pionowe */
            position: absolute; /* Pozwala na umieszczenie przycisków niezależnie od rodzica */
            top: 50%; /* Pozycjonowanie od dolnej krawędzi canvasu */
            left: 50%; /* Wyśrodkowanie względem lewej krawędzi */
            transform: translateX(-50%); /* Korekta wyśrodkowania */

        }

        #pozostalo {
            font-size: 1.5em;
            padding: 0.2em 0.5em;
            margin-left: 7em;
        }

        #naglowek_znajdzWszystkie {
            display: flex; align-items: center; justify-content: center; font-size: 1.5em;
            display: none;
        }

        #szukanyZnak_wyswielanie {
            font-size: 4em;
            background-color: lightsteelblue;
        }

        /* Stylowanie samej ikony menu */
        #menuButton {
            width: 50%;
            height: auto;
            cursor: pointer;

        }

        /* Stylowanie kontenera dla menu */
        #menuContainer {
            display:block;
            position: relative;
        }

        /* Stylowanie kontenera dla ikony menu */
        #menuIconContainer {
            position: fixed;
            top: 12%;
            right: 1%;
            width: 7%;
            height: 2%;
            /*background-color: deepskyblue;*/
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 999; /* Powyżej reszty zawartości */
        }

        /* Stylowanie menu rozwijanego */
        #dropdownMenu {
            position: fixed;
            top: 9%;
            right: 8%;
            width: auto;
            height: auto;
            background-color: rgba(135, 206, 250, 0.5);
            border: 0px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 70, 0, 0.1);
            font-size: 1em;;
            display: none;
            cursor: pointer;
            z-index: 999; /* Powyżej reszty zawartości */
        }

        /* Stylowanie punktów menu */
        #dropdownMenu ul {
            display: flex;
            
            list-style: none;
            padding: 0;
            margin: 0;
        }

        #dropdownMenu ul li {
            padding: 10px;
        }

        #dropdownMenu ul li a {
            text-decoration: none;
            color: #333;
            display: block;
            padding: 5px 10px;
        }

        #dropdownMenu ul li a:hover {
            background-color: #f0f0f0;
        }

        #close-btn-X {
        position: absolute;
        top: 5px;
        right: 15px;
        background-color: transparent;
        color: rgb(0, 0, 0);
        border: none;
        
        font-size: 38px;
        /*cursor: pointer;*/
        
        }

        #close-btn-X:hover {
            color: red;
            font-size: 2.5em;
        }

        #XXlogin-screen {
           /* display: block;
            position: absolute;*/
            top: 8vw;
            left: 1vw; 

            display: none;
            position: absolute;
            width:100vw;
            height:100vh;
            background-image: url('grafika_programu/login_background.png');
            background-position: right top; /* Obrazek na środku prawej strony */
            background-size: contain;
            background-repeat: no-repeat; /* Zapobiega powtarzaniu tła */
            animation: bgShine 3s infinite linear;
        }       

        #login-screen {
            display: none;
            position: absolute;
            top: 8vw;
            left: 1vw; 
            width: 100vw;
            height: 100vh;
            
            /* Tło: Obrazek + Efekt rozbłysku */
            background: 
                linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255, 255, 255, 0.319) 50%, rgba(255,255,255,0) 70%) no-repeat,
                url('grafika_programu/login_background.png') no-repeat right top;
            
            background-size: 250% 100%, contain; /* Gradient jest większy, żeby się przesuwał */
            
            animation: bgShine 1s infinite linear;
        }
        
        @keyframes bgShine {
            0% { background-position: -200% 0, right top; }  /* Startuje z lewej */
            100% { background-position: 200% 0, right top; } /* Kończy po prawej */
        }

            #loginByEmailForm, #LoginByCutomID {
            display: block;
            width: 40vw;
            height: 50vh;
            margin-top: 8vh;
            margin-left: 10vw;
            background-color: rgba(135, 206, 250, 0.77);
            padding: 20px;
            border-radius: 10px; /* Zaokrąglone rogi */
            place-self: left;
            font-size: 10px;
            color:#333; 
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
            }

            #loginByEmailForm label, #LoginByCutomID label {
                font-size: 2em; /* Rozmiar czcionki dla etykiet */
                color: white; /* Kolor etykiet */
            }

            #loginByEmailForm input[type="email"], #LoginByCutomID input[type="email"],
            #loginByEmailForm input[type="password"], #LoginByCutomID input[type="password"] {
                width: 60%;
                padding: 10px;
                margin-bottom: 10px;
                font-size: 1.5  rem; /* Rozmiar czcionki dla pól wejściowych */
                border-radius: 5px; /* Zaokrąglone rogi pól wejściowych */
                border-style: none;;
            }

            #loginByEmailForm button,  #LoginByCutomID button {
                width: 60%;
                padding: 12px;
                font-size: 1.2em; /* Rozmiar czcionki dla przycisku */
                background-color: #4CAF50; /* Kolor tła przycisku */
                color: white; /* Kolor tekstu przycisku */
                border: none;
                border-radius: 5px; /* Zaokrąglone rogi przycisku */
                
                /*cursor: pointer;*/
            }

            #loginByEmailForm button:hover, #LoginByCutomID button:hover {
                background-color: #00ff0d; /* Kolor tła przycisku po najechaniu myszką */
                font-weight: bold;

            }

            a_inf {
                font-size: 16px;
            }

            #LoginByCutomID
            {
                display: none;
                flex-direction: column;
            }

            h1 {
                font-size: 3rem;
                font-weight: bold;
                text-transform: uppercase;
                position: relative;
                display: inline-block;
                text-indent: -9999px; /* ukrywa tekst, jeśli jakiś jest */              
                
            }

            #main-area-screen{
                display: block;
                background-color: snow;
                width: 100vw;
                height: 100vh;
                background-image: url('grafika_programu/logo.png');
                background-size: 30% 30% contain; 
                background-repeat: no-repeat;
                background-position: top center;
                z-index: 999;

            }

            /*.h1-anim {
                animation: shine 6s infinite linear;
            }
            
            @keyframes shine {
                0% { background-position: -200% 0; }  /* Startuje z lewej 
                100% { background-position: 200% 0; } /* Kończy po prawej 
            }*/

            #dodatki_screen {
                display: none;
                flex-direction: column;
                align-items: center;
                gap: 20px;
                padding: 20px;
                background-color: #f4f4f4;
            }
            #lista_dodatki_screen {
                display: flex;
                justify-content: space-around;
                flex-wrap: wrap;
                gap: 20px;
                padding: 20px;
                background-color: #f4f4f4;
            }
            .blok { /* element do dodatki */
                text-align: center;
                width: 200px;
                padding: 10px;
                background: white;
                border-radius: 10px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            }
            .blok img {
                width: 100%;
                height: auto;
                border-radius: 10px;
                cursor: pointer;
                transition: transform 0.2s;
            }
            .blok img:hover {
                transform: scale(1.05);
            }

            #game-Cyferki-containerCyferki { 
                display: none;
                justify-content: center;
                align-content: center;
                gap: 5px;
                width: 100vw;
                height: 90vh;
                position: relative;
            }
            
            .squareCyferki { 
                display: flex; 
                align-items: center; 
                justify-content: center; 
                font-weight: bold; 
                border-radius: 15px;
                border: none; 
                cursor: none;
                color: white;
                text-align: center;
                position: relative;
                transition: transform 1s ease, opacity 1s ease;
            }