:root{
  --ui-bg:#c0c0c0;          /* classic Win95 body */
  --ui-edge-light:#ffffff;  /* top/left highlight */
  --ui-edge-dark:#808080;   /* right/bottom shadow */
  --ink:#000;               /* text */
  /* feminine pastel set */
  --rose:#f6c1d0;  /* header rose */
  --mint:#bdeccf;  /* accents */
  --lav:#d7c2f0;   /* alt header */
  --sky:#cfe7ff;   /* alt header */

  --base-font: 12px; /* scaled up from 8px */
  --small-font: 10px;
  --tiny-font: 9px;
  --title-font: 18px; /* larger titles */
  --subtitle-font: 14px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body{
  margin:0;
  font-family:'Press Start 2P', monospace;
  font-size:var(--base-font);
  line-height:1.6;
  color:var(--ink);
  background: repeating-linear-gradient(
    45deg,
    #f4f4f4 0 10px,
    #ffffff 10px 20px
  );
  overflow:hidden;
}

/* LANDING PAGE */
.landing-page{
  position:fixed; inset:0; z-index:3000;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 45%, #fff 0 40%, #f6f6f6 60%, #efefef 100%);
}
.crt-mask{
  position:absolute; inset:0; pointer-events:none; opacity:.25;
  background:linear-gradient(rgba(0,0,0,.05) 50%, transparent 50%);
  background-size:100% 3px; mix-blend:multiply;
}
.landing-card{
  width:min(92vw, 820px);
  border:2px outset var(--ui-bg);
  background:#fff;
  box-shadow: 4px 4px 0 var(--ui-edge-dark);
  text-align:center;
  padding:32px 24px;
}
.landing-header{
  background:var(--rose);
  padding:8px 12px; text-align:left;
  border-bottom:1px solid var(--ui-edge-dark);
  display:flex; gap:12px; align-items:center;
}
.landing-title{ font-size:var(--title-font); }
.pixel-avatar{ width:96px; height:96px; border:2px solid var(--ink); image-rendering:pixelated; background: var(--mint); }
.pixel-avatar.large{ width:144px; height:144px; }
.landing-body{ padding:20px; }
.landing-body h1{ font-size:var(--title-font); color:#d86b98; margin:12px 0 6px; }
.landing-body h2{ font-size:var(--subtitle-font); color:#3a8b6d; margin:0 0 18px; }
.press-start{
  font-family:'Press Start 2P', monospace;
  display:inline-block; cursor:pointer;
  background:var(--ui-bg); color:var(--ink);
  border:2px outset var(--ui-bg);
  padding:10px 16px; font-size:var(--base-font);
  text-decoration:none; margin-top:10px;
}
.press-start:active{ border:2px inset var(--ui-bg); }
.landing-footer{ font-size:var(--tiny-font); color:#666; margin-top:12px; }

/* DESKTOP */
.desktop{ position:relative; height:100vh; padding:16px; overflow:hidden; }

.taskbar{
  position:fixed; left:0; right:0; bottom:0; height:44px;
  background:var(--ui-bg);
  border-top:2px solid var(--ui-edge-light);
  border-left:2px solid var(--ui-edge-light);
  border-right:2px solid var(--ui-edge-dark);
  border-bottom:2px solid var(--ui-edge-dark);
  display:flex; align-items:center; gap:8px; padding:0 8px; z-index:1200;
  font-size:var(--tiny-font);
}
.start-button{ background:var(--ui-bg); border:2px outset var(--ui-bg); padding:8px 12px; cursor:pointer; }
.start-button:active{ border:2px inset var(--ui-bg); }

/* DESKTOP ICONS */
.desktop-icons{ position:absolute; top:16px; right:16px; display:flex; flex-direction:column; gap:18px; z-index:200; }
.desktop-icon{ display:flex; flex-direction:column; align-items:center; cursor:pointer; padding:8px; border-radius:4px; }
.desktop-icon:hover{ background:rgba(246,193,208,.25); }
.icon{ width:40px; height:40px; border:2px solid var(--ink); image-rendering:pixelated; background:var(--mint); margin-bottom:6px; }
.icon.about{ background:var(--rose); }
.icon.projects{ background:linear-gradient(0deg, var(--rose), var(--mint)); }
.icon.skills{ background:var(--lav); }
.icon.contact{ background:var(--sky); }
.icon-label{ font-size:var(--tiny-font); background:rgba(255,255,255,.85); padding:3px 6px; border-radius:2px; }

/* WINDOWS */
.window{
  position:absolute; background:var(--ui-bg);
  border:2px outset var(--ui-bg);
  min-width:440px; min-height:260px; width:520px;
  box-shadow:3px 3px 0 var(--ui-edge-dark);
  overflow:hidden; /* keeps header visible while resizing */
  resize:both; /* native resizable handle */
  z-index:100;
}
.window.maximized{ left:8px !important; top:8px !important; right:8px !important; bottom:60px !important; width:auto !important; height:auto !important; resize:none; }

.window-header{
  user-select:none; cursor:move; display:flex; align-items:center; justify-content:space-between;
  padding:6px 8px; border-bottom:1px solid var(--ui-edge-dark); background:var(--rose);
}
.window-title{ font-size:var(--small-font); font-weight:bold; }
.window-controls{ display:flex; gap:4px; }
.window-control{ width:18px; height:16px; background:var(--ui-bg); border:1px outset var(--ui-bg); display:flex; align-items:center; justify-content:center; font-size:10px; cursor:pointer; }
.window-control:active{ border:1px inset var(--ui-bg); }

.window-content{ background:#fff; padding:16px; height:calc(100% - 28px); overflow:auto; }

/* SPECIFIC WINDOWS POSITIONS (bigger by default) */
.hero-window{ top:64px; left:48px; width:640px; height:380px; }
.about-window{ top:140px; left:240px; width:560px; height:360px; display:none; }
.projects-window{ top:96px; left:380px; width:720px; height:440px; display:none; }
.skills-window{ top:180px; left:120px; width:520px; height:360px; display:none; }
.contact-window{ top:220px; left:520px; width:520px; height:360px; display:none; }

/* HERO */
.hero-content{ text-align:center; }
.hero-content h1{ font-size:var(--title-font); color:#d86b98; margin:10px 0 8px; }
.hero-content h2{ font-size:var(--subtitle-font); color:#3a8b6d; margin-bottom:14px; }
.pixel-heart{ display:inline-block; width:10px; height:10px; background:#f6a3b8; margin:0 3px; animation:pulse 2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.5} }

/* PROJECTS */
.project-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:8px; }
.project-card{ background:#f3f3f3; border:2px inset var(--ui-bg); padding:12px; cursor:pointer; }
.project-card:hover{ background:rgba(246,193,208,.18); border:2px outset var(--ui-bg); }
.project-title{ color:#3a8b6d; margin-bottom:8px; font-size:var(--small-font); }
.project-tech{ color:#d86b98; margin-bottom:8px; font-size:var(--tiny-font); }
.project-desc{ font-size:var(--tiny-font); color:#111; line-height:1.4; }

/* SKILLS */
.skills-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.skill-item{ background:#f3f3f3; border:2px inset var(--ui-bg); padding:10px; text-align:center; }
.skill-name{ font-size:var(--tiny-font); color:#3a8b6d; margin-bottom:6px; }
.skill-level{ width:100%; height:10px; background:#fff; border:1px inset var(--ui-bg); overflow:hidden; }
.skill-progress{ height:100%; background:linear-gradient(90deg, var(--rose), var(--mint)); transition:width .4s; }

/* SOCIAL */
.social-links{ display:flex; gap:18px; justify-content:center; margin-top:16px; }
.social-link{ display:flex; flex-direction:column; align-items:center; text-decoration:none; color:var(--ink); padding:8px; border:2px outset var(--ui-bg); background:#f3f3f3; }
.social-link:hover{ border:2px inset var(--ui-bg); background:rgba(246,193,208,.25); }
.social-icon{ width:18px; height:18px; border:1px solid var(--ink); margin-bottom:4px; background:var(--mint); }

/* FORMS */
.contact-form{ display:flex; flex-direction:column; gap:12px; }
.form-group{ display:flex; flex-direction:column; gap:6px; }
.form-label{ font-size:var(--tiny-font); color:#3a8b6d; }
.form-input{ border:2px inset var(--ui-bg); padding:6px; font-family:'Press Start 2P', monospace; font-size:var(--tiny-font); background:#fff; }
.button{ background:var(--ui-bg); border:2px outset var(--ui-bg); padding:8px 16px; cursor:pointer; font-family:'Press Start 2P', monospace; font-size:var(--tiny-font); color:var(--ink); text-decoration:none; display:inline-block; }
.button:active{ border:2px inset var(--ui-bg); }

@media (max-width: 880px){
  .window{ min-width: auto; width:auto; left:10px !important; right:10px !important; }
  .project-grid{ grid-template-columns:1fr; }
  .desktop-icons{ position:fixed; bottom:52px; right:10px; top:auto; flex-direction:row; gap:12px; }
}