@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=VT323&family=Silkscreen:wght@400;700&display=swap');

        * { font-family: 'Poppins', sans-serif; }
        .font-pixel { font-family: 'Silkscreen', cursive; }
        .font-book { font-family: 'VT323', monospace; }

        body {
            background-color: #1c1917;
            background-image: 
                radial-gradient(circle at 20% 50%, rgba(120, 53, 15, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 80% 50%, rgba(87, 83, 78, 0.2) 0%, transparent 50%),
                url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");
        }

        /* Book Container */
        .book-container {
            perspective: 2000px;
            perspective-origin: center;
        }

        .book {
            background: linear-gradient(90deg, #78350f 0%, #92400e 48%, #451a03 50%, #78350f 52%, #92400e 100%);
            box-shadow: 
                0 30px 60px rgba(0, 0, 0, 0.6),
                inset 0 0 0 2px rgba(0, 0, 0, 0.3),
                inset -10px 0 20px rgba(0, 0, 0, 0.4),
                inset 10px 0 20px rgba(0, 0, 0, 0.4);
            transform-style: preserve-3d;
            position: relative;
        }

        /* Book Pages */
        .page {
            background-color: #fef9e5; /* Bardzo jasny kremowy dla czytelności */
            position: relative;
            border: 4px solid #d6d3d1; /* Jasna ramka wewnętrzna */
        }

        .page::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 12px;
            background: rgba(0,0,0,0.05); /* Delikatny cień przy grzbiecie */
        }

        .page-right::before {
            left: auto;
            right: auto;
            left: 0;
            background: linear-gradient(to right, rgba(0,0,0,0.1), transparent);
        }
        
        .page-left::after {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 12px;
            background: linear-gradient(to left, rgba(0,0,0,0.1), transparent);
        }

        /* Left Page */
        .page-left {
            border-right: 1px solid rgba(120, 53, 15, 0.2);
        }

        /* Right Page */
        .page-right {
            border-left: 1px solid rgba(120, 53, 15, 0.2);
        }

        /* Page Content Styling */
        .page-content {
            padding: 20px;
        }

        .page-content h2 {
            color: #1c1917; /* Prawie czarny dla max kontrastu */
            font-size: 1.75rem;
            margin-bottom: 1.5rem;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .page-content h3 {
            color: #1c1917;
            font-size: 1.25rem;
            margin-top: 1.5rem;
            margin-bottom: 0.75rem;
            font-weight: bold;
            text-decoration: underline;
        }

        .page-content p, .page-content li {
            color: #1c1917;
            line-height: 1.4;
            margin-bottom: 0.5rem;
            font-size: 1.15rem;
            font-family: 'VT323', monospace; /* Pixelowy font ale czytelny */
        }

        .page-content ul, .page-content ol {
            margin-left: 1.5rem;
            margin-bottom: 1rem;
        }

        .page-content li {
            margin-bottom: 0.5rem;
        }

        /* Decorative elements */
        .corner-decoration {
            position: absolute;
            width: 40px;
            height: 40px;
            opacity: 0.3;
        }

        .corner-decoration.top-left {
            top: 10px;
            left: 10px;
            border-top: 3px solid #78350f;
            border-left: 3px solid #78350f;
        }

        .corner-decoration.top-right {
            top: 10px;
            right: 10px;
            border-top: 3px solid #78350f;
            border-right: 3px solid #78350f;
        }

        .corner-decoration.bottom-left {
            bottom: 10px;
            left: 10px;
            border-bottom: 3px solid #78350f;
            border-left: 3px solid #78350f;
        }

        .corner-decoration.bottom-right {
            bottom: 10px;
            right: 10px;
            border-bottom: 3px solid #78350f;
            border-right: 3px solid #78350f;
        }

        /* Page Numbers */
        .page-number {
            position: absolute;
            bottom: 20px;
            font-size: 0.875rem;
            color: #78350f;
            opacity: 0.6;
        }

        .page-number.left {
            left: 20px;
        }

        .page-number.right {
            right: 20px;
        }

        /* Back Button */
        .back-button {
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 100;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .book {
                transform: none !important;
            }
            .page-content h2 {
                font-size: 1.25rem;
            }
            .page-content h3 {
                font-size: 1.1rem;
            }
        }

        /* Paper texture overlay */
        .paper-texture {
            background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
        }