body{font-family:'Roboto',sans-serif;}@media screen and (max-width:860px){}.nav-link:hover{color:#ffffff !important;}.secondary-nav .secondary-nav .secondary-nav .sphere-btn:hover{transform:scale(1.1);}@media screen and (max-width:860px){}.intro-image{display:block;max-width:80%;height:auto;}.portfolio{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;padding-top:5%;position:relative;}@media screen and (max-width:860px){.portfolio{margin-top:5%;}}.portfolio-item{position:relative;margin:1%;overflow:hidden;width:calc(25% - 1%);height:auto;cursor:pointer;outline:none;outline-offset:0;box-sizing:border-box;border-radius:4%;}.portfolio-item img{display:block;width:100%;height:100%;transition:transform 0.5s ease;object-fit:cover;border-radius:inherit;}.portfolio-item:hover img{transform:scale(1.05);}.portfolio-item::after{content:attr(data-project-name);position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:100%;height:5%;text-align:center;font-size:19.8px;font-weight:bold;color:#fff;background-color:#4e5867;padding:0.75em;opacity:0;transition:opacity 0.3s ease;}@media screen and (max-width:768px){.portfolio-item::after{font-size:19.8px;}}.portfolio-item:hover::after{opacity:1;}.overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);justify-content:center;align-items:flex-start;z-index:2;padding-top:var(--overlay-safe-top,240px);box-sizing:border-box;}.overlay-content{max-width:70%;max-height:100%;overflow-y:auto;background-color:#4e5867;}.close-btn{position:absolute;top:2.5%;right:2%;color:#fff;font-size:3em;cursor:pointer;z-index:15;}.image-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2% 2%;}.image-container img{max-width:100%;width:auto;height:auto;margin:0 0 3vh;}}@media screen and (max-width:860px){.thank-you-image{bottom:.5em;}}.dex-resume-image{display:block;margin-top:20px;width:1500px;max-width:100%;height:auto;margin-left:auto;margin-right:auto;}.centered-footer{text-align:center;color:#6a788c;font-weight:bold;}.particle{position:fixed;width:6px;height:6px;background-color:#4e5867;pointer-events:none;opacity:1;transform:scale(1);transition:opacity 1s ease-out,transform 1s ease-out;z-index:9999;border-radius:2px;}.particle.outlined{background-color:transparent;border:1px solid #98acc9;}html,body{margin:0;padding:0;min-height:100%;}body{}@media (max-width:900px){body{}}header{position:relative;background:none;margin:0;padding:0;box-shadow:none;z-index:3;}header::before{content:"";position:fixed;top:0;left:0;width:100%;height:478px;background-image:url("resources/main_background_header.png");background-repeat:no-repeat;background-position:top center;background-size:107% auto;z-index:2;pointer-events:none;}
/* === Background tile below main background (seamless tiling) === */
html{
  background-color:#000407;
  background-image:
    url("resources/main_background.png"),
    url("resources/main_background_tile.png");
  background-repeat: no-repeat, repeat-y;
  background-position: top center, bottom center;
  background-size: 107% auto, 107% auto;
  background-attachment: fixed, fixed;
}
:root{--btn-nudge:1vw;--btn-top:5.2vw;--btn-gap:17.2vw;--btn-width:11.72vw;}.header-buttons{position:fixed;top:var(--btn-top);left:50%;width:0;height:0;z-index:10;pointer-events:none;}.header-buttons .btn-link{position:absolute;top:0;pointer-events:auto;display:block;}.header-buttons .btn-projects{left:50%;transform:translateX(-50%);}.header-buttons .btn-portfolio{left:calc(50% - (var(--btn-gap) * 0.85));transform:translateX(-50%);}.header-buttons .btn-resume{left:calc(50% + (var(--btn-gap) * 0.85));transform:translateX(-50%);}.header-buttons img{display:block;width:var(--btn-width);height:auto;max-width:none;max-height:none;image-rendering:auto;}.header .header-nav .nav-link[href="resume.html"]{display:none;}.header-buttons .btn-home img,.header-buttons .btn-game img{width:calc(var(--btn-width) * (71 / 300)) !important;height:auto !important;display:block;}.header-buttons .btn-home{left:calc(50% - (2 * var(--btn-gap)));transform:translateX(-50%);}.header-buttons .btn-projects{left:50%;transform:translateX(-50%);}.header-buttons .btn-portfolio{left:calc(50% - (var(--btn-gap) * 0.85));transform:translateX(-50%);}.header-buttons .btn-resume{left:calc(50% + (var(--btn-gap) * 0.85));transform:translateX(-50%);}.header-buttons .btn-game{left:calc(50% + (2 * var(--btn-gap)));transform:translateX(-50%);}.header-buttons .btn-portfolio{left:calc(50% - (var(--btn-gap) - var(--btn-nudge,1vw)) );transform:translateX(-50%);}.header-buttons .btn-resume{left:calc(50% + (var(--btn-gap) - var(--btn-nudge,1vw)) );transform:translateX(-50%);}.header-buttons .btn-home{left:calc(50% - (2 * var(--btn-gap) + var(--btn-nudge,1vw)) );transform:translateX(-50%);}.header-buttons .btn-game{left:calc(50% + (2 * var(--btn-gap) + var(--btn-nudge,1vw)) );transform:translateX(-50%);}.header-buttons .btn-home{left:calc(50% - (2 * var(--btn-gap) + 2 * var(--btn-nudge,1vw)) );transform:translateX(-50%);}.header-buttons .btn-game{left:calc(50% + (2 * var(--btn-gap) + 2 * var(--btn-nudge,1vw)) );transform:translateX(-50%);}.header-buttons .btn-home{left:calc(50% - (2 * var(--btn-gap) + 1.5 * var(--btn-nudge,1vw)) );transform:translateX(-50%);}.header-buttons .btn-game{left:calc(50% + (2 * var(--btn-gap) + 1.5 * var(--btn-nudge,1vw)) );transform:translateX(-50%);}html{overflow-y:scroll;scrollbar-gutter:stable;}:root{--content-offset:16vw;}body.portfolio-page .portfolio,body.resume-page .portfolio{margin-top:var(--content-offset);}body.game-page header + *{margin-top:var(--game-offset) !important;}body.game-page header + *{margin-top:var(--game-offset) !important;}:root{--game-offset:calc(var(--content-offset) * 0.5 - 10vh);}body.game-page .game-square{z-index:20;}body.game-page header{z-index:5;}html,body{overflow-x:clip;}.portfolio .portfolio-item{position:relative;overflow:hidden;}.portfolio .portfolio-item .badge-anchor{position:absolute;top:8px;left:8px;width:43px;height:43px;z-index:2;pointer-events:none;}.portfolio .portfolio-item .thumb-badge{position:absolute;inset:0;width:43px;height:43px;transform-origin:top left;filter:drop-shadow(0 1px 1px rgba(0,0,0,.45)) drop-shadow(0 0 2px rgba(0,0,0,.35));}.portfolio .portfolio-item .thumb-badge .hex{position:absolute;inset:0;display:block}.portfolio .portfolio-item .thumb-badge .hex path{fill:#00C2FF;stroke:rgba(0,0,0,.35);stroke-width:2.5;stroke-linejoin:round;shape-rendering:geometricPrecision;}.portfolio .portfolio-item .thumb-badge .num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:800 14px/1 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Roboto;color:#0B132B;text-shadow:0 1px 0 rgba(255,255,255,.25);}.overlay-open .thumb-badge{display:none;}html,body{overscroll-behavior:none;}body.overlay-open{overflow:hidden !important;touch-action:none;}.overlay .overlay-content,.overlay-content{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}.overlay .close-btn,.close-btn{position:fixed !important;left:50% !important;top:50% !important;transform:translate(-50%,-50%) !important;z-index:10000 !important;pointer-events:auto !important;}.overlay .close-btn,.close-btn{position:fixed !important;top:50% !important;right:2% !important;left:auto !important;transform:translateY(-50%) !important;z-index:10000 !important;pointer-events:auto !important;}.overlay .close-btn,.close-btn{position:fixed !important;top:50% !important;left:50% !important;right:auto !important;transform:translate(-50%,-50%) !important;z-index:10000 !important;width:56px !important;height:56px !important;border-radius:12px !important;background:rgba(0,0,0,0.72) !important;color:#FFFFFF !important;display:grid !important;place-items:center !important;font-size:33px !important;line-height:1 !important;cursor:pointer !important;box-shadow:0 2px 10px rgba(0,0,0,0.35) !important;user-select:none !important;}:root{--close-x-right-offset:5vw;}.overlay .close-btn,.close-btn{position:fixed !important;top:50% !important;right:var(--close-x-right-offset) !important;left:auto !important;transform:translateY(-50%) !important;z-index:10000 !important;}.overlay .close-btn,.close-btn{right:var(--close-x-right-offset) !important;background:rgba(0,0,0,0.88) !important;color:#00bfff !important;font-size:36.3px !important;}:root{--close-x-right-offset:5vw;}.overlay .close-btn,.close-btn{top:75% !important;transform:translateY(-50%) !important;background:#525866 !important;color:#ffffff !important;}.overlay .close-btn,.close-btn{top:50% !important;transform:translateY(-50%) !important;background:#525866 !important;color:#ffffff !important;}.overlay .close-btn,.close-btn{transition:border-radius 180ms ease,font-size 150ms ease,transform 150ms ease,box-shadow 180ms ease;}.overlay .close-btn:hover,.overlay .close-btn:focus-visible,.close-btn:hover,.close-btn:focus-visible{border-radius:50% !important;font-size:39.6px !important;transform:translateY(-50%) scale(1.06) !important;box-shadow:0 4px 14px rgba(0,0,0,0.35) !important;outline:none !important;}:root{--overlay-fixed-width:70vw;}.overlay .overlay-content,.overlay-content{width:var(--overlay-fixed-width) !important;max-width:var(--overlay-fixed-width) !important;box-sizing:border-box;}



  left: 50%;
  transform: translateX(-50%);
  z-index: 1000; /* above main content, below modals if any */
  pointer-events: none; /* image is decorative; does not block UI */
}

@media (max-width: 640px){
  
}

/* Home greeting in-flow (revised) */
.home-greeting-wrap{
  position: relative;       /* normal flow */
  display: block;
  margin: 30vh auto 6vh;    /* ~25% down from top, then some space below */
  width: 100%;
  text-align: center;       /* center img if it's inline */
  z-index: auto;            /* no stacking over header/buttons */
  pointer-events: auto;     /* allow normal interactions if needed */
}
.home-greeting{
  display: inline-block;
  max-width: min(63vw, 648px);
  height: auto;
  image-rendering: auto;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.25));
}
@media (max-width: 640px){
  .home-greeting{ max-width: min(77vw, 468px); }
  .home-greeting-wrap{ margin-top: 23vh; }
}



/* Footer lightness tweak */
footer, .site-footer { color: #cfcfcf; }
footer a { color: #e6e6e6; }