/* =========================================================
   WIN98 TOOLBOX BLOG TEMPLATE  ·  style.css
   Retro Y2K / Windows 98 personal diary layout
   ---------------------------------------------------------
   HOW TO CHANGE COLORS:  edit the variables in :root below.
   Everything (buttons, windows, borders) uses these.
   ========================================================= */
:root{
  --gray:#c3c7cb; --gray-d:#868a8e; --gray-dd:#5a5e62;
  --hi:#ffffff; --teal:#118276; --navy:#000080; --navy2:#1084d0;
  --pink:#ff5fa2; --pinkl:#ffd6ea;
  --desktop:#0a5d55;          /* page background */
  --desktop2:#1aa093;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:'VT323',monospace; font-size:20px; color:#111;
  background:var(--desktop);
  background-image:radial-gradient(circle at 20% 20%,var(--desktop2) 0,var(--desktop) 60%);
  min-height:100vh; padding:18px; image-rendering:pixelated;
}

/* ---- Win98 beveled panel helper ---- */
.bevel{background:var(--gray);
  border:2px solid; border-color:var(--hi) var(--gray-dd) var(--gray-dd) var(--hi);
  box-shadow:inset -1px -1px 0 var(--gray-d), inset 1px 1px 0 var(--gray);}
.bevel-in{border-color:var(--gray-dd) var(--hi) var(--hi) var(--gray-dd);
  box-shadow:inset 1px 1px 0 var(--gray-d);}
.titlebar{background:linear-gradient(90deg,var(--navy),var(--navy2));
  color:#fff; font-family:'Pixelify Sans',sans-serif; font-weight:700; font-size:15px;
  padding:3px 4px 3px 6px; display:flex; align-items:center; justify-content:space-between;}
.tb-btns span{display:inline-flex;width:16px;height:14px;margin-left:2px;
  align-items:center;justify-content:center;font-size:11px;font-family:sans-serif;
  background:var(--gray);border:1px solid;border-color:var(--hi) var(--gray-dd) var(--gray-dd) var(--hi);color:#000;}
.menubar{font-family:'Pixelify Sans',sans-serif;font-size:13px;padding:2px 4px;display:flex;gap:12px}
.menubar span u{text-decoration:underline}

/* ---- overall layout ---- */
.wrap{max-width:1000px;margin:0 auto}
.topbar{display:flex;gap:8px;align-items:center;padding:4px 6px;margin-bottom:10px;
  font-family:'Pixelify Sans',sans-serif;font-size:13px;flex-wrap:wrap}
.topbar a{color:#000;text-decoration:none;display:flex;align-items:center;gap:5px;padding:2px 6px}
.topbar a:hover,.topbar a.active{background:var(--navy);color:#fff}
.ico{width:16px;height:16px;display:inline-block;border:1px solid var(--gray-dd);background:#fff;flex:none}
.ico.globe{background:radial-gradient(circle at 5px 5px,#7ad,#059 70%)}
.ico.star{background:#ffde59;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.ico.mail{background:linear-gradient(#fff,#ddd)}
.ico.heart{background:var(--pink);clip-path:path('M8 14 L1 6 A3 3 0 0 1 8 4 A3 3 0 0 1 15 6 Z')}

.layout{display:grid;grid-template-columns:104px 1fr;gap:10px}
@media(max-width:640px){.layout{grid-template-columns:1fr}}

/* ---- tool palette (decorative pixel icons) ---- */
.toolwin{padding:0}
.tools{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:4px}
.tool{aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  background:var(--gray);border:1px solid;border-color:var(--hi) var(--gray-dd) var(--gray-dd) var(--hi);cursor:pointer}
.tool:hover{background:#d7dbdf}
.tool:active,.tool.on{border-color:var(--gray-dd) var(--hi) var(--hi) var(--gray-dd);background:#b5b9bd}
.tool svg{width:20px;height:20px;display:block;shape-rendering:crispEdges}
.rainbow{height:14px;margin:4px 4px 0;
  background:linear-gradient(90deg,red,orange,yellow,lime,cyan,blue,violet,magenta);
  border:1px solid var(--gray-dd)}
.palette{display:flex;flex-wrap:wrap;gap:0;padding:4px;margin-top:8px}
.palette i{width:20px;height:16px;border:1px solid #0004}
/* mobile: keep the tool palette a compact centered grid (placed AFTER base .tools so it wins the cascade) */
@media(max-width:640px){
  .tools{grid-template-columns:repeat(auto-fill,40px);justify-content:center}
  .tool{aspect-ratio:auto;height:36px}
}

/* ---- VHS static hero monitor ---- */
.monitor{padding:8px}
.screen{position:relative;height:190px;overflow:hidden;background:#111;
  border:3px solid;border-color:var(--gray-dd) var(--hi) var(--hi) var(--gray-dd)}
.static{position:absolute;inset:0;opacity:.9;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:jit .12s steps(2) infinite}
@keyframes jit{0%{transform:translate(0,0)}50%{transform:translate(-4px,3px)}100%{transform:translate(3px,-2px)}}
.scan{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0,rgba(0,0,0,.35) 1px,transparent 2px,transparent 3px)}
.screen .dlg{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:82%;z-index:2}
.dlg .titlebar{font-size:12px}
.dlg-body{padding:10px 8px;text-align:center}
.glitch{font-family:'Press Start 2P',monospace;font-size:13px;color:var(--navy);
  text-shadow:1px 1px 0 #fff;letter-spacing:2px}
.loading{margin:8px auto 4px;height:14px;width:88%;background:#000;border:1px solid var(--gray-dd);padding:2px}
.loading i{display:block;height:100%;width:70%;
  background:repeating-linear-gradient(90deg,var(--navy) 0,var(--navy) 8px,var(--gray) 8px,var(--gray) 10px);
  animation:load 1.6s steps(7) infinite}
@keyframes load{0%{width:64%}20%{width:70%}40%{width:62%}60%{width:73%}80%{width:66%}100%{width:71%}}
.tape{position:absolute;top:6px;left:8px;color:#eee;font-family:'Press Start 2P';font-size:8px;z-index:2;opacity:.8}
.rec{position:absolute;top:6px;right:8px;color:#ff3b3b;font-family:'Press Start 2P';font-size:8px;z-index:2}
.rec b{color:#ff3b3b;animation:bl 1s steps(1) infinite}
@keyframes bl{50%{opacity:0}}

/* ---- CD player ---- */
.cdplayer{display:flex;align-items:center;gap:8px;padding:6px 8px;margin-top:8px;font-family:'Press Start 2P';font-size:9px}
.cd-screen{background:#0b2b0b;color:#5f5;padding:4px 8px;flex:1;
  border:2px solid;border-color:var(--gray-dd) var(--hi) var(--hi) var(--gray-dd)}
.cd-btns span{display:inline-block;width:22px;height:18px;text-align:center;line-height:18px;margin-left:2px;font-size:10px;
  background:var(--gray);border:1px solid;border-color:var(--hi) var(--gray-dd) var(--gray-dd) var(--hi)}

/* ---- content window (original Win98 theme) ---- */
.win{margin-top:10px}
.win-body{padding:14px;background:#fff;
  border:2px solid;border-color:var(--gray-dd) var(--hi) var(--hi) var(--gray-dd)}
.page-title{font-family:'Press Start 2P';font-size:15px;color:var(--navy);text-align:center;margin:2px 0 2px}
.page-sub{text-align:center;color:#777;margin:0 0 12px}
.statusbar{display:flex;gap:6px;padding:3px}
.statusbar span{flex:1;padding:2px 6px;font-size:14px;
  border:1px solid;border-color:var(--gray-dd) var(--hi) var(--hi) var(--gray-dd)}
.editnote{background:#ffffcc;border:1px dashed #cc0;padding:5px 8px;font-size:16px;margin-bottom:12px;color:#665}
p.body{font-size:19px;line-height:1.3;margin:0 0 12px}

/* ---- diary entries ---- */
.entry{border:2px solid;border-color:var(--gray-dd) var(--hi) var(--hi) var(--gray-dd);
  background:#f4f4f4;padding:9px 11px;margin-bottom:11px}
.entry h3{margin:0;font-family:'Pixelify Sans';color:var(--navy);font-size:16px}
.entry p{margin:6px 0 0;font-size:19px;line-height:1.25}
.tags{margin-top:7px;color:#666;font-size:16px}

/* ---- home: welcome + currently ---- */
.welcome{text-align:center;padding:6px 0 4px}
.welcome h2{font-family:'Press Start 2P';font-size:15px;color:var(--navy);margin:6px 0}
.welcome .hi{font-family:'Pixelify Sans';color:var(--pink);font-size:20px}
.homebtns{display:flex;gap:10px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.homebtns a{text-decoration:none;color:#000}
.currently{width:100%;border-collapse:collapse;font-size:18px}
.currently td{padding:4px 8px;border-bottom:1px dotted #ccc}
.currently td.k{font-family:'Pixelify Sans';font-size:13px;color:var(--navy);width:120px;white-space:nowrap}
.shortcuts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.shortcuts a{text-decoration:none;color:#000}

/* ---- gallery ---- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:520px){.gallery{grid-template-columns:1fr 1fr}}
.frame{padding:6px;background:var(--gray);
  border:2px solid;border-color:var(--hi) var(--gray-dd) var(--gray-dd) var(--hi)}
.frame .pic{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:34px;
  border:2px solid;border-color:var(--gray-dd) var(--hi) var(--hi) var(--gray-dd);
  background:linear-gradient(135deg,#bfe3ff,#ffd6ea)}
.frame .cap{text-align:center;font-size:16px;margin-top:4px;color:#333}

/* ---- links (88x31 retro buttons) ---- */
.linkbtns{display:flex;flex-wrap:wrap;gap:8px}
.linkbtns a{width:88px;height:31px;display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:'Pixelify Sans';font-size:11px;color:#fff;text-decoration:none;
  border:2px solid;border-color:var(--hi) var(--gray-dd) var(--gray-dd) var(--hi);
  background:linear-gradient(135deg,var(--navy),var(--pink))}
.linkbtns a:nth-child(3n+2){background:linear-gradient(135deg,#7a2ff2,#00e0ff)}
.linkbtns a:nth-child(3n){background:linear-gradient(135deg,#e0007a,#ffb03a)}
.linklist{list-style:none;padding:0;margin:14px 0 0}
.linklist li{padding:5px 0;border-bottom:1px dotted #bbb}
.linklist a{color:var(--navy);text-decoration:none}
.linklist a:hover{text-decoration:underline;background:#eef}

/* ---- forms (guestbook / contact) ---- */
.field{margin-bottom:10px}
.field label{display:block;font-family:'Pixelify Sans';font-size:14px;margin-bottom:3px;color:#222}
.field input,.field textarea{width:100%;font-family:'VT323';font-size:18px;padding:5px 7px;
  background:#fff;border:2px solid;border-color:var(--gray-dd) var(--hi) var(--hi) var(--gray-dd)}
.btn{font-family:'Pixelify Sans';font-size:14px;padding:5px 16px;cursor:pointer;background:var(--gray);
  border:2px solid;border-color:var(--hi) var(--gray-dd) var(--gray-dd) var(--hi)}
.btn:active{border-color:var(--gray-dd) var(--hi) var(--hi) var(--gray-dd)}
.gb-entry{background:#f4f4f4;padding:8px 11px;margin-bottom:9px;
  border:2px solid;border-color:var(--gray-dd) var(--hi) var(--hi) var(--gray-dd)}
.gb-entry .who{font-family:'Pixelify Sans';color:var(--navy);font-size:15px}
.gb-entry .msg{font-size:18px;margin-top:3px}

/* ---- about profile ---- */
.profile{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.avatar{width:120px;height:120px;flex:none;font-size:60px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#bfe3ff,#ffd6ea);
  border:2px solid;border-color:var(--gray-dd) var(--hi) var(--hi) var(--gray-dd)}
.statlist{list-style:none;padding:0;margin:0;font-size:18px}
.statlist li{padding:3px 0;border-bottom:1px dotted #ccc}
.statlist b{color:var(--navy);font-family:'Pixelify Sans';font-size:14px}

/* ---- taskbar ---- */
.taskbar{display:flex;align-items:center;gap:6px;padding:3px 5px;margin-top:12px;font-family:'Pixelify Sans';font-size:14px}
.start{display:flex;align-items:center;gap:5px;font-weight:700;padding:2px 8px;
  border:1px solid;border-color:var(--hi) var(--gray-dd) var(--gray-dd) var(--hi)}
.start .star{width:15px;height:15px}
.tb-app{padding:2px 8px;border:1px solid;border-color:var(--gray-dd) var(--hi) var(--hi) var(--gray-dd)}
.clock{margin-left:auto;padding:2px 10px;font-family:'VT323';font-size:17px;
  border:1px solid;border-color:var(--gray-dd) var(--hi) var(--hi) var(--gray-dd)}
.demo-badge{text-align:center;font-family:'Press Start 2P';font-size:9px;color:#fff;margin:0 0 12px;opacity:.85}