* { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; }
a { color: #0000ee; text-decoration: underline; }
a:visited { color: #551a8b; }
a:focus-visible { outline: 2px dotted currentColor; outline-offset: 2px; }
.stars-gif { display: block; max-width: 100%; height: 14px; object-fit: fill; }
.retro-article { font: 16px/1.42 'Times New Roman', Times, serif; color: #101010; overflow-wrap: anywhere; }
.retro-article h2 { margin: 24px 0 10px; font: bold 24px/1.1 'Times New Roman', Times, serif; }
.retro-article h3 { margin: 24px 0 8px; font: bold 19px 'Times New Roman', Times, serif; }
.retro-article p { margin: 0 0 15px; }
.retro-article ul { margin: 0 0 18px; padding-left: 35px; }
.retro-article li { margin: 4px 0; }
.retro-article blockquote { margin: 20px 25px; padding-left: 14px; border-left: 3px solid #808080; font-style: italic; }
.retro-article blockquote p { margin: 0; }
.retro-article code { font: 13px/1.4 'Courier New', Courier, monospace; }
.retro-article pre { max-width: 100%; overflow-x: auto; padding: 8px !important; background: #eee !important; border: 1px inset #aaa; }
.retro-article pre code { color: #111; }

/* Actual Windows controls around an ordinary early-web page. */
.win-page { min-height: 100vh; padding: 36px 28px 65px 130px; background: #008080; font-family: 'MS Sans Serif', Tahoma, sans-serif; }
.desktop-icon { position: absolute; left: 30px; top: 35px; width: 70px; display: grid; justify-items: center; gap: 5px; color: #fff; text-align: center; font: 12px/1.15 Tahoma, sans-serif; text-shadow: 1px 1px #000; }
.browser-window { width: min(850px, 100%); margin: 0 auto; }
.browser-window .window-body { margin: 8px; }
.menu-bar { display: flex; flex-wrap: wrap; gap: 15px; padding: 2px 5px 7px; font: 12px Tahoma, sans-serif; }
.menu-bar a { color: #111; text-decoration: none; }
.menu-bar a::first-letter { text-decoration: underline; }
.menu-bar a:hover { text-decoration: underline; }
.address-row { display: flex; align-items: center; gap: 7px; padding: 3px 5px 7px; border-top: 1px solid #fff; font: 12px Tahoma, sans-serif; }
.address-field { flex: 1; min-width: 0; padding: 3px 5px; background: #fff; color: #111; overflow: hidden; white-space: nowrap; }
.browser-paper { min-height: 620px; max-height: min(72vh, 760px); overflow-y: auto; padding: 26px 35px 35px; background: #fff; border: 2px inset #ddd; font: 16px/1.35 'Times New Roman', Times, serif; color: #111; }
.old-header { display: flex; align-items: center; gap: 14px; }
.old-header h1 { margin: 0 0 3px; font: bold 25px/1.1 'Times New Roman', Times, serif; }
.old-header p { margin: 0; }
.browser-paper > .stars-gif { margin: 18px auto 9px; }
.old-nav { text-align: center; margin: 0 0 24px; }
.old-nav a { margin: 0 3px; }
.update-line { margin: 0 0 24px; background: #ffffcc; padding: 4px 8px; }
.update-line strong { color: #a00000; }
.old-footer { display: flex; align-items: center; gap: 12px; margin-top: 25px; font-size: 13px; }
.old-footer img, .homepage footer > img:first-child { object-fit: contain; image-rendering: pixelated; }
.browser-window .status-bar { margin: 5px 0 0; }
.browser-window .status-bar-field:first-child { flex: 1; }
.taskbar { position: fixed; z-index: 2; bottom: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; height: 32px; padding: 3px 5px; background: #c0c0c0; border-top: 2px solid #fff; color: #111; font: bold 12px Tahoma, sans-serif; box-shadow: 0 -1px #808080; }
.start-button, .taskbar-item, .taskbar-clock { padding: 4px 8px; border: 2px outset #fff; white-space: nowrap; }
.start-button { font-weight: bold; }
.taskbar-item { flex: 0 1 170px; overflow: hidden; }
.taskbar-clock { margin-left: auto; border-style: inset; font-weight: normal; }

/* A sparse handmade personal homepage, with real GIFs and ordinary HTML type. */
.home-page { min-height: 100vh; padding: 30px 15px 50px; background: #161122; color: #ede5cb; font: 16px/1.4 'Times New Roman', Times, serif; }
.homepage { width: min(100%, 720px); margin: auto; }
.homepage header { text-align: center; }
.tiny-top { margin: 0 0 12px; font: 12px 'Courier New', Courier, monospace; }
.homepage h1 { margin: 4px 0 5px; color: #ffe69a; font: bold 27px/1.1 'Times New Roman', Times, serif; }
.homepage header p:not(.tiny-top) { margin: 0 0 18px; }
.homepage .stars-gif { margin: 0 auto; }
.home-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 11px; margin: 15px 0 24px; }
.home-links a, .homepage footer a { color: #b9d9ff; }
.home-links span { color: #d8c77a; }
.home-note { margin: 0 0 28px; font-size: 15px; }
.home-note strong { color: #ffe69a; }
.homepage .retro-article { padding: 16px 20px 8px; background: #f5f0df; color: #161122; }
.homepage .retro-article a { color: #0000aa; }
.homepage footer { padding-top: 18px; text-align: center; font-size: 13px; }
.homepage footer p { margin: 8px 0 20px; }
@media (max-width: 700px) {
  .win-page { padding: 16px 10px 53px; }
  .desktop-icon { display: none; }
  .browser-paper { min-height: 0; max-height: none; padding: 18px 15px; }
  .old-header h1 { font-size: 22px; }
}
@media (max-width: 440px) {
  .old-header { align-items: flex-start; }
  .old-header img { width: 30px; height: 30px; }
  .old-header h1 { font-size: 20px; }
  .taskbar-item { flex-basis: 110px; }
  .homepage h1 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  img[src$='.gif'] { visibility: hidden; }
}