* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: black;
            color: white;
            font-family: Arial, sans-serif;
            min-height: 100vh;
        }

        .header-bar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 1% 2%;
            background-color: rgba(0, 0, 0, 0.9);
            z-index: 30;
        }

        .profile-container {
            display: flex;
            align-items: center;
            text-align: center;
        }

        .profile-pic {
            width: 5vw;
            height: 5vw;
            max-width: 70px;
            max-height: 70px;
            border-radius: 50%;
            object-fit: cover;
        }

        .nav-menu {
            margin-top: 1rem;
        }

        .nav-menu ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: row;
        }

        .nav-menu li {
            margin: 0 3rem;
        }

        .nav-menu a {
            color: white;
            text-decoration: none;
            font-size: clamp(1rem, 2vw, 1.125rem);
            transition: color 0.3s ease;
        }

        .nav-menu a:hover {
            color: #ccc;
        }

        .nav-menu a.active {
            color: #00ff88;
            font-weight: bold;
        }

        .nav-menu a:focus {
            outline: 2px solid #00ff88;
            outline-offset: 2px;
            border-radius: 4px;
        }

        .atlas {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
            margin-top: clamp(6rem, 12vw, 8rem);
        }

        .page-container {
            display: flex;
            justify-content: center;
            width: 100%;
        }

        .page-container > .content-wrapper {
            width: min(1000px, 100%);
            padding: 0 clamp(10px, 2vw, 20px);
        }

        .page {
            margin: clamp(10px, 2vw, 20px) auto;
            padding: clamp(10px, 2vw, 20px);
            background-color: #fffef0;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            border: 1px solid #c2b280;
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            overflow: hidden;
        }

        .skewed-header {
            position: relative;
            height: clamp(200px, 40vw, 350px);
            width: 100%;
            background-color: #cea123;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            border: 1px solid #c2b280;
            overflow: hidden;
        }

        .skewed-header > .header-bg {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background: no-repeat center center;
            background-size: cover;
            transform: skewY(-4deg);
            transform-origin: top left;
            filter: brightness(100%);
        }

        .skewed-header > .skewed-header-wrapper {
            position: absolute;
            display: flex;
            justify-content: center;
            width: 100%;
            height: 100%;
            align-items: flex-start;
            padding-top: clamp(10px, 2vw, 20px);
        }

        .skewed-header > .skewed-header-wrapper > .skewed-header-content {
            width: 100%;
            max-width: min(700px, 90%);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .skewed-header > .skewed-header-wrapper > .skewed-header-content > .heading-wrapper {
            background-color: #cea123;
            color: #11122b;
            border-bottom-left-radius: 2px;
            border-bottom-right-radius: 2px;
            width: clamp(120px, 20vw, 160px);
            padding: clamp(6px, 1vw, 8px);
            text-align: center;
        }

        .skewed-header > .skewed-header-wrapper > .skewed-header-content > .heading-wrapper h1 {
            margin: 0;
            font-size: clamp(1.25rem, 2.5vw, 1.75rem);
            text-transform: uppercase;
        }

        .page h2 {
            font-size: clamp(1.25rem, 2.5vw, 1.75rem);
            margin: 0 0 clamp(10px, 1.5vw, 15px);
            color: #2f4f4f;
            border-bottom: 2px solid #d3d3d3;
            padding-bottom: clamp(6px, 1vw, 8px);
        }

        .page-body {
            overflow: hidden;
        }

        .page-content {
            margin: 0;
        }

        .page-content p {
            font-size: clamp(0.875rem, 1.5vw, 1rem);
            margin: 0 0 clamp(8px, 1vw, 10px);
        }

        .image-slider {
            position: relative;
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            margin: clamp(0.5rem, 1vw, 1rem) 0;
            padding: clamp(0.25rem, 0.5vw, 0.5rem) 0;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            -ms-overflow-style: none;
            max-width: 100%;
        }

        .image-slider::-webkit-scrollbar {
            display: none;
        }

        .slider-card {
            flex: 0 0 min(300px, 90vw);
            margin-right: clamp(0.5rem, 1vw, 1rem);
            scroll-snap-align: start;
            background: #fffef0;
            border: 2px solid #666;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            border-radius: 4px;
            overflow: hidden;
        }

        .slider-card img {
            width: 100%;
            aspect-ratio: 16 / 9;
            object-fit: cover;
            display: block;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .slider-card img:hover,
        .slider-card img:focus {
            transform: scale(1.05);
        }

        .slider-card img.fullscreen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            object-fit: contain;
            z-index: 1000;
            background: rgba(0, 0, 0, 0.9);
            margin: 0;
            padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
            transition: all 0.3s ease;
        }

        body.fullscreen-active {
            overflow: hidden;
        }

        .facts {
            font-size: clamp(0.75rem, 1.5vw, 0.875rem);
            color: #555;
            margin-top: clamp(8px, 1vw, 10px);
        }

        .facts strong {
            color: #333;
        }

        .facts ul {
            margin: clamp(0.25rem, 0.5vw, 0.5rem) 0;
            padding-left: clamp(1rem, 2vw, 1.5rem);
        }

        .end-page {
            text-align: center;
            background-color: #fffef0;
            color: #333;
            padding: clamp(10px, 2vw, 20px);
        }

        footer {
            padding: clamp(1rem, 2vw, 2rem) 0;
            text-align: center;
            margin-top: clamp(1rem, 2vw, 2rem);
            width: 100%;
            background-color: #1a1a1a;
        }

        .footer-copyright {
            margin: 0;
            font-size: clamp(0.75rem, 1.5vw, 0.875rem);
            color: #aaa;
        }

        @media (min-width: 1200px) {
            .page-container > .content-wrapper {
                width: 1100px;
            }
            .slider-card {
                flex: 0 0 350px;
            }
        }

        @media (max-width: 768px) {
            .header-bar {
                padding: 1% 1%;
            }
            .nav-menu li {
                margin: 0 1.5rem;
            }
            .profile-pic {
                width: 8vw;
                height: 8vw;
            }
            .atlas {
                margin-top: clamp(5rem, 10vw, 6rem);
            }
            .page-container > .content-wrapper {
                padding: 0 clamp(8px, 1.5vw, 12px);
            }
            .slider-card {
                flex: 0 0 min(280px, 85vw);
            }
            .skewed-header {
                height: clamp(180px, 35vw, 250px);
            }
            .skewed-header > .header-bg {
                transform: skewY(-3deg);
            }
        }

        @media (max-width: 480px) {
            .header-bar {
                padding: 1% 1%;
            }
            .nav-menu {
                margin-top: 0.5rem;
            }
            .nav-menu ul {
                flex-direction: row;
                align-items: center;
            }
            .nav-menu li {
                margin: 0 1rem;
            }
            .nav-menu a {
                font-size: clamp(0.875rem, 2vw, 1rem);
            }
            .profile-pic {
                width: 10vw;
                height: 10vw;
            }
            .page-container > .content-wrapper {
                padding: 0 clamp(4px, 1vw, 8px);
            }
            .slider-card {
                flex: 0 0 min(240px, 90vw);
            }
            .skewed-header {
                height: clamp(150px, 30vw, 200px);
            }
            .skewed-header > .header-bg {
                transform: skewY(-2deg);
            }
        }