@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        :root {
            --pink: #f9dae5;
            --pink-dark: #f4c3d4;
            --pink-darker: #ebacc2;
            --purple: #9b7aa5;
            --blue: #e8f4ff;
            --text: #674873;
        }

        @keyframes checkerboard {
            0% {
                background-position: 0 0, 0 15px, 15px -15px, -15px 0px;
            }
            100% {
                background-position: 30px 30px, 30px 45px, 45px 15px, 15px 30px;
            }
        }
        
        body {
            background: var(--pink);
            font-family: 'Press Start 2P', monospace;
            margin: 0;
            min-height: 100vh;
            background-image: 
                linear-gradient(45deg, var(--pink-dark) 25%, transparent 25%),
                linear-gradient(-45deg, var(--pink-dark) 25%, transparent 25%),
                linear-gradient(45deg, transparent 75%, var(--pink-dark) 75%),
                linear-gradient(-45deg, transparent 75%, var(--pink-dark) 75%);
            background-size: 30px 30px;
            animation: checkerboard 2s linear infinite;
        }

        .nav {
            background: var(--pink);
            padding: 1rem;
            position: sticky;
            top: 0;
            z-index: 100;
            border-bottom: 4px solid var(--pink-darker);
            box-shadow: 
                inset -4px -4px 0 0 rgba(0,0,0,0.1),
                inset 4px 4px 0 0 rgba(255,255,255,0.3);
        }

        .nav-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
        }

        .logo-container {
            position: relative;
            width: 100px;  /* Adjust based on your logo size */
            height: 50px; /* Adjust based on your logo size */
            background: linear-gradient(135deg, var(--purple) 0%, var(--blue) 100%);
            border: 4px solid var(--pink-darker);
            border-radius: 4px;
            transform: skew(-5deg);
            box-shadow: 
                inset -2px -2px 0 0 rgba(0,0,0,0.2),
                inset 2px 2px 0 0 rgba(255,255,255,0.5);
            overflow: hidden; /* In case the image gets slightly skewed */
        }
        
        .logo-container img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            transform: skew(5deg); /* Counter the container skew */
            display: block;
        }

        .nav-links {
            display: flex;
            gap: 0.5rem;
        }

        .nav-link {
            color: var(--text);
            text-decoration: none;
            font-size: 0.7rem;
            padding: 0.5rem 1rem;
            background: #fff;
            border: 4px solid var(--pink-darker);
            border-radius: 4px;
            box-shadow: 
                inset -2px -2px 0 0 rgba(0,0,0,0.1),
                inset 2px 2px 0 0 rgba(255,255,255,0.5);
            transition: all 0.1s ease;
        }

        .nav-link:hover {
            transform: translate(2px, 2px);
            background: var(--blue);
        }

        .nav-link.active {
            background: var(--purple);
            color: #fff;
            box-shadow: 
                inset 2px 2px 0 0 rgba(0,0,0,0.2),
                inset -1px -1px 0 0 rgba(255,255,255,0.2);
        }

        .mobile-menu-btn {
            display: none;
            background: #fff;
            color: var(--text);
            border: 4px solid var(--pink-darker);
            padding: 0.5rem;
            font-family: 'Press Start 2P';
            font-size: 0.8rem;
            border-radius: 4px;
            cursor: pointer;
        }

        .window {
            border: 4px solid var(--pink-darker);
            border-radius: 8px;
            background: var(--pink);
            margin-bottom: 2rem;
            overflow: hidden;
        }

        .window-header {
            background: var(--purple);
            padding: 0.8rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .window-title {
            color: #fff;
            font-size: 0.8rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .window-icon {
            width: 16px;
            height: 16px;
            background: var(--pink);
            border: 2px solid #fff;
            border-radius: 2px;
        }

        .window-controls {
            display: flex;
            gap: 0.5rem;
        }

        .window-button {
            width: 12px;
            height: 12px;
            background: var(--pink);
            border: 2px solid #fff;
            border-radius: 50%;
        }

        .window-content {
            padding: 1.5rem;
            background: var(--pink);
        }

        .section {
            background: #fff;
            padding: 1.5rem;
            border: 4px solid var(--pink-darker);
            border-radius: 4px;
            margin-bottom: 1.5rem;
            box-shadow: 
                inset -2px -2px 0 0 rgba(0,0,0,0.1),
                inset 2px 2px 0 0 rgba(255,255,255,0.5);
        }

        .section:last-child {
            margin-bottom: 0;
        }

        .skills-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 1rem;
        }

        .skill-item {
            background: var(--blue);
            padding: 1rem;
            border: 3px solid var(--pink-darker);
            border-radius: 4px;
            font-size: 0.6rem;
            text-align: center;
            box-shadow: 
                inset -2px -2px 0 0 rgba(0,0,0,0.1),
                inset 2px 2px 0 0 rgba(255,255,255,0.5);
            color: var(--text);
        }

        .experience-item {
            margin-bottom: 1.5rem;
            padding: 1rem;
            background: var(--blue);
            border: 3px solid var(--pink-darker);
            border-radius: 4px;
            box-shadow: 
                inset -2px -2px 0 0 rgba(0,0,0,0.1),
                inset 2px 2px 0 0 rgba(255,255,255,0.5);
        }

        /* Webkit scrollbar customization (Chrome, Safari, Edge) */
        ::-webkit-scrollbar {
            width: 12px;
        }

        ::-webkit-scrollbar-track {
            background: var(--pink);
            border: 2px solid var(--pink-darker);
        }

        ::-webkit-scrollbar-thumb {
            background: var(--purple);
            border: 2px solid var(--pink-darker);
            border-radius: 4px;
            box-shadow: 
                inset -2px -2px 0 0 rgba(0,0,0,0.1),
                inset 2px 2px 0 0 rgba(255,255,255,0.3);
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #8b6b95;
        }

        * {
            scrollbar-width: thin;
            scrollbar-color: var(--purple) var(--pink);
        }

        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }

            .mobile-menu-btn {
                display: block;
            }

            .nav-links.show {
                display: flex;
                flex-direction: column;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background: var(--pink);
                padding: 1rem;
                border-top: 4px solid var(--pink-darker);
            }

            .nav-links.show .nav-link {
                width: 100%;
                text-align: center;
            }
        }

        .container {
            max-width: 800px;
            margin: 2rem auto;
            padding: 0 1rem;
        }

        h2 {
            font-size: 1rem;
            margin-bottom: 1.5rem;
            color: var(--text);
        }

        p {
            font-size: 0.7rem;
            line-height: 1.5;
            margin-bottom: 1rem;
            color: var(--text);
        }

        .experience-item h3 {
            font-size: 0.8rem;
            margin-bottom: 0.5rem;
            color: var(--text);
        }

        .experience-item p {
            font-size: 0.7rem;
            color: var(--purple);
            margin-bottom: 0.5rem;
        }

        .scale-out-center {
            -webkit-animation: scale-out-center 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
            animation: scale-out-center 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
        }

        @-webkit-keyframes scale-out-center {
            0% {
                -webkit-transform: scale(1);
                transform: scale(1);
                opacity: 1;
            }
            100% {
                -webkit-transform: scale(0);
                transform: scale(0);
                opacity: 1;
            }
        }

        @keyframes scale-out-center {
            0% {
                -webkit-transform: scale(1);
                transform: scale(1);
                opacity: 1;
            }
            100% {
                -webkit-transform: scale(0);
                transform: scale(0);
                opacity: 1;
            }
        }

        /* Adjust window styles for animation */
        .window {
            transform-origin: center;
            position: relative;
        }

        /* Animation for window entry */
        .scale-in-center {
            -webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        }

        @-webkit-keyframes scale-in-center {
            0% {
                -webkit-transform: scale(0);
                transform: scale(0);
                opacity: 1;
            }
            100% {
                -webkit-transform: scale(1);
                transform: scale(1);
                opacity: 1;
            }
        }

        @keyframes scale-in-center {
            0% {
                -webkit-transform: scale(0);
                transform: scale(0);
                opacity: 1;
            }
            100% {
                -webkit-transform: scale(1);
                transform: scale(1);
                opacity: 1;
            }
        }