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

            user-select: none; /* Standard */
        }

        body {
            font-family: 'Rubik', 'IBM Plex Sans', 'IBM Plex Sans','Inter', sans-serif;
            padding: 3rem;
        }

        body[data-mode="dark"] {
            background-color: #333;
        }

        body[data-mode="light"] {
            background-color: #fafafa;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 6rem;
        }

        h1 {
            font-weight: 400;
            font-size: 2rem;
            color: var(--theme-color, hotpink);
            display: inline-block;
            rotate: 1deg;
            text-align: left;
            &:hover {
                animation: zoom-rattle 1s ease;
            }
        }

        @keyframes zoom-rattle {
            0%   { transform: scale(1) rotate(0deg); }
            20%  { transform: scale(0.5) rotate(-3deg); }
            40%  { transform: scale(0.6) rotate(3deg); }
            60%  { transform: scale(0.8) rotate(-2deg); }
            80%  { transform: scale(0.95) rotate(1deg); }
            100% { transform: scale(1) rotate(0deg); }
        }

        a {
            color: var(--theme-color, hotpink);
            text-decoration: none;
        }

        .burger {
            display: flex;
            flex-direction: column;
            gap: 6px;
            cursor: pointer;
            padding: 0.5rem;
            background: none;
            border: none;
            transition: transform 0.5s ease;
        }

        .burger:hover {
            transform: rotate(360deg);
            opacity: 0.5        }

        .burger:hover span {
            background-color: var(--theme-color, hotpink);
        }

        .burger span {
            display: block;
            width: 28px;
            height: 2px;
            background-color: #000;
            background-color: var(--theme-color, hotpink);
            transition: background-color 0.3s;
        }

        .series {
            margin-bottom: 10rem;
        }

        .series:last-child {
            margin-bottom: 4rem;
        }

        .series h2 {
            font-weight: 400;
            font-size: 1.2rem;
            margin-bottom: 0.75rem;
            color: #333;
            text-decoration: none;
            padding-block-start: 2rem;
            transition: color 0.2s;
            color: var(--theme-color, hotpink);
        }

        .series h2:hover {
            color: var(--theme-color, hotpink);
        }

        .gallery-container {
            position: relative;
            overflow: hidden;

        }

        .gallery-container::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 8rem;
            height: 100%;
            background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9));
            pointer-events: none;
            z-index: 5;
            transition: opacity 0.2s;
        }

        body[data-mode="dark"] .gallery-container::after {
            background: linear-gradient(to right, rgba(255, 255, 255, 0), #333333aa);
        }


        .gallery-container.at-end::after {
            opacity: 0;
        }

        .gallery {
            display: flex;
            gap: 1.5rem;
            overflow-x: auto;
            scroll-behavior: smooth;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .gallery::-webkit-scrollbar {
            display: none;
        }

        .gallery img {
            height: 500px;
            width: auto;
            object-fit: cover;
            cursor: pointer;
            flex-shrink: 0;
            transition: opacity 0.2s;
        }

        .gallery img:hover {
            opacity: 0.95;
            _filter: invert(100%);
            filter: brightness(105%);
        }

        .scroll-link {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            cursor: pointer;
            font-family: 'IBM Plex Sans', 'Inter', sans-serif;
            font-size: 2rem;
            font-weight: 500;
            color: #fff;
            text-decoration: none;
            z-index: 10;
            transition: opacity 0.2s;
            opacity: 0;
            pointer-events: none;
            padding: 0.5rem 0.5rem;
        }

        .gallery-container:hover .scroll-link {
            opacity: 1;
            pointer-events: auto;
        }

        .scroll-link:hover {
            color: var(--theme-color, hotpink);
        }

        .scroll-link.left {
            left: 1rem;
        }

        .scroll-link.right {
            right: 1rem;
        }

        .scroll-link.hidden {
            opacity: 0 !important;
            pointer-events: none !important;
        }

        .menu-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 999;
            align-items: center;
            justify-content: center;
        }

        body[data-mode="dark"] .menu-overlay {
            background-color: #333;
        }

        body[data-mode="light"] .menu-overlay {
            background-color: #fafafa;
        }

        .menu-overlay.active {
            display: flex;
        }

        .menu-nav {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2rem;
        }

        .menu-nav a {
            font-size: 2rem;
            font-weight: 500;
            color: #000;
            text-decoration: none;
            transition: color 0.2s;
        }

        body[data-mode="dark"] .menu-nav a {
            color: #fff;
        }

        .menu-nav a:hover,
        body[data-mode="dark"] .menu-nav a:hover {
            color: var(--theme-color, hotpink);
        }

        #mode-light:hover,
        #mode-dark:hover {
            color: var(--theme-color, hotpink) !important;
        }

        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1000;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        body[data-mode="dark"] .overlay {
            background-color: #333;
        }

        body[data-mode="light"] .overlay {
            background-color: #fafafa;
        }

        .overlay.active {
            display: flex;
        }

        .overlay-content {
            position: relative;
            max-width: 90vw;
            cursor: default;
        }

        .overlay-content img {
            max-width: 90vw;
            height: 90vh;
            object-fit: contain;
            display: block;
        }

        .overlay-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            cursor: pointer;
            font-family: 'Rubik', 'IBM Plex Sans', sans-serif;
            font-size: 2rem;
            font-weight: 500;
            color: #888;
            z-index: 1001;
            transition: color 0.2s;
        }

        .overlay-nav:hover {
            color: var(--theme-color, hotpink);
        }

        .overlay-nav.prev {
            left: 3rem;
        }

        .overlay-nav.next {
            right: 3rem;
        }

        .close-overlay {
            position: absolute;
            top: 2.5rem;
            right: 3.5rem;
            background: none;
            border: none;
            font-size: 3rem;
            cursor: pointer;
            color: var(--theme-color, hotpink);
            line-height: 1;
            font-weight: 300;
        }

        @media (max-width: 768px) {
            body {
                padding: 2rem;
            }

            h1 {
                font-size: 2rem;
                margin-bottom: 3rem;
            }

            .series {
                margin-bottom: 10rem;
            }

            .series h2 {
                font-size: 1.5rem;
            }

            .gallery img {
                height: 300px;
            }

            .overlay-content {
                padding: 2rem;
            }

            .overlay-content img {
                max-height: calc(90vh - 4rem);
            }
        }

        /* Series page styles */
        .header-small h1 {
            font-size: 1rem;
            margin: 0;
        }

        .header-small {
            margin-bottom: 1rem;
        }

        .series-title {
            font-weight: 400;
            font-size: 2.5rem;
            color: var(--theme-color, hotpink);
            margin-bottom: 3rem;
        }

        .series-vertical {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 2rem;
        }

        .series-vertical img {
            width: 75vw;
            max-height: 800px;
            width: auto;
            height: auto;
            object-fit: contain;
            cursor: pointer;
            transition: opacity 0.2s;
        }

        .series-vertical img:hover {
            opacity: 0.95;
            filter: brightness(105%);
        }