/* Isolate the pixel desktop and its cursor inside About Me. */
#about-dialog{width:100vw;height:100svh;max-width:none;max-height:none;margin:0;border:0;padding:0;background:#dce2e5;overflow:hidden}
#about-dialog::backdrop{background:#dce2e5}
.about-pixel-frame{width:100%;height:100%;display:block;border:0}
@font-face{font-family:MonitorPixel;src:url('about-me/assets/DotGothic16-Regular.ttf') format('truetype');font-display:swap}
#monitor{padding:0;border:3px solid #9aa8b1;border-radius:0;background:#d9e1e5;box-shadow:inset 3px 3px #eef1f2,inset -3px -3px #b9c5cd;overflow:visible;display:block}
#monitor #about-more{display:block;position:relative;width:100%;height:100%;margin:0;padding:4px;border:0;background-image:linear-gradient(#9aadb61a 1px,transparent 1px),linear-gradient(90deg,#9aadb61a 1px,transparent 1px);background-size:12px 12px;cursor:pointer}
#monitor #about-more img{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;filter:saturate(.45) contrast(.88) brightness(1.07);opacity:.92}
#monitor .monitor-hint{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);white-space:nowrap;padding:7px 10px;color:#596a76;background:#f6f5f1;border:2px solid #9aa8b1;box-shadow:3px 3px #c3cbd1;font:12px/1.4 MonitorPixel,monospace;opacity:0;visibility:hidden;pointer-events:none}
#about-more:is(:hover,:focus-visible) .monitor-hint{opacity:1;visibility:visible}
#screen-zoom{display:none}

/* A single small greeting; its hint follows the movement. */
#about-more:is(:hover,:focus-visible) img{animation:hourglass-greeting 480ms ease-in-out 1;transform-origin:52% 80%}
#monitor .monitor-hint{transition:opacity 150ms,visibility 150ms;transition-delay:0ms}
#about-more:is(:hover,:focus-visible) .monitor-hint{transition-delay:400ms}
@keyframes hourglass-greeting{0%,100%{transform:rotate(0)}35%{transform:rotate(-3deg)}70%{transform:rotate(1.5deg)}}
@media(prefers-reduced-motion:reduce){#about-more img{animation:none!important}#monitor .monitor-hint{transition:none!important}}