/* The Past Machine - Windows 95/98 interface, rebuilt in CSS
   No images: every bevel is a border trick, the way the originals did it. */

:root{
  --face:#c0c0c0;
  --face-dark:#9a9a9a;
  --hi:#ffffff;
  --sh:#808080;
  --sh2:#000000;
  --title:#000080;
  --title2:#1084d0;
  --title-off:#808080;
  --title-off2:#b5b5b5;
  --desk:#008080;
  --text:#000000;
  --link:#0000ee;
  --sel:#000080;
  --font:"MS Sans Serif","Microsoft Sans Serif",Tahoma,Geneva,Verdana,sans-serif;
  --mono:"Lucida Console","Courier New",monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  font-size:15px;
  line-height:1.55;
  color:var(--text);
  background:var(--desk);
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:4px 4px;
  padding-bottom:46px; /* room for the taskbar */
  min-height:100vh;
}

/* ---------- bevels ---------- */
.raised{border:2px solid;border-color:var(--hi) var(--sh2) var(--sh2) var(--hi);box-shadow:inset 1px 1px 0 var(--face),inset -1px -1px 0 var(--sh)}
.sunken{border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);box-shadow:inset 1px 1px 0 var(--sh2),inset -1px -1px 0 var(--face)}

/* ---------- window ---------- */
.win{
  background:var(--face);
  border:2px solid;
  border-color:var(--hi) var(--sh2) var(--sh2) var(--hi);
  box-shadow:inset 1px 1px 0 var(--face),inset -1px -1px 0 var(--sh);
  margin:0 0 20px;
}
.win__bar{
  display:flex;align-items:center;gap:6px;
  background:linear-gradient(90deg,var(--title),var(--title2));
  color:#fff;padding:3px 3px 3px 5px;
  font-weight:700;font-size:14px;
  user-select:none;
}
.win__bar--off{background:linear-gradient(90deg,var(--title-off),var(--title-off2))}
.win__title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.2px}
.win__btns{display:flex;gap:2px;flex:none}
.win__btn{
  width:19px;height:18px;background:var(--face);
  border:2px solid;border-color:var(--hi) var(--sh2) var(--sh2) var(--hi);
  box-shadow:inset 1px 1px 0 var(--face),inset -1px -1px 0 var(--sh);
  display:grid;place-items:center;font-size:11px;line-height:1;color:#000;
  font-family:var(--font);font-weight:700;padding:0;cursor:default;
}
.win__body{padding:16px 18px}
.win__status{
  display:flex;gap:6px;padding:3px;border-top:1px solid var(--hi);
}
.win__status span{
  flex:1;padding:2px 6px;font-size:12px;color:#000;
  border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);
}
.win__status span:last-child{flex:none;min-width:120px}

/* ---------- layout ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:18px 14px 0}

/* ---------- typography ---------- */
h1,h2,h3{font-family:var(--font);line-height:1.25;margin:0 0 10px}
h1{font-size:27px;letter-spacing:-.3px}
h2{font-size:20px;margin-top:26px;padding-bottom:5px;border-bottom:1px solid var(--sh)}
h2:first-child{margin-top:0}
h3{font-size:16px;margin-top:18px}
p{margin:0 0 12px}
a{color:var(--link)}
a:hover{color:#7c0a7c}
.lede{font-size:16px}
.muted{color:#3a3a3a}
small{font-size:12.5px}
hr{border:none;border-top:1px solid var(--sh);border-bottom:1px solid var(--hi);margin:20px 0}
ul,ol{margin:0 0 12px;padding-left:22px}
li{margin-bottom:5px}

/* ---------- desktop icons ---------- */
.desktop{
  display:grid;
  grid-template-columns:repeat(auto-fill,100px);
  justify-content:start;
  gap:6px 2px;
  margin:0 0 22px;
  padding:4px;
}
.dicon{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:8px 4px;text-decoration:none;color:#fff;text-align:center;
  text-shadow:1px 1px 2px rgba(0,0,0,.75);
  font-size:13px;line-height:1.3;
  border:1px dotted transparent;
}
.dicon:hover,.dicon:focus{border-color:#fff;background:rgba(0,0,128,.35);color:#fff}
.dicon__glyph{
  width:46px;height:42px;display:grid;place-items:center;
  font-size:26px;line-height:1;
  background:var(--face);
  border:2px solid;border-color:var(--hi) var(--sh2) var(--sh2) var(--hi);
  box-shadow:inset 1px 1px 0 var(--face),inset -1px -1px 0 var(--sh);
  text-shadow:none;
}

/* ---------- entry list ---------- */
.entry{
  display:block;padding:12px 14px;margin:0 0 10px;background:var(--face);
  border:2px solid;border-color:var(--hi) var(--sh2) var(--sh2) var(--hi);
  box-shadow:inset 1px 1px 0 var(--face),inset -1px -1px 0 var(--sh);
  text-decoration:none;color:inherit;
}
.entry:hover{background:#cdcdcd}
.entry:hover .entry__name{color:#7c0a7c}
.entry__head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.entry__name{font-weight:700;font-size:16px;color:var(--link)}
.entry__host{font-family:var(--mono);font-size:12px;color:#4a4a4a}
.entry__desc{margin:0;font-size:14.5px}
.tag{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;padding:1px 6px;background:var(--title);color:#fff;
}
.tag--own{background:#7c0a7c}
.tag--free{background:#046a04}

/* ---------- notice box ---------- */
.note{
  display:flex;gap:12px;align-items:flex-start;
  padding:12px 14px;margin:0 0 16px;background:#fffbe6;
  border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);
}
.note__icon{font-size:22px;line-height:1;flex:none}
.note p{margin:0;font-size:14px}

/* ---------- breadcrumb / nav ---------- */
.crumbs{font-size:13px;color:#e8f6f6;margin:0 0 12px;text-shadow:1px 1px 2px rgba(0,0,0,.6)}
.crumbs a{color:#fff}
.pagenav{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}
.pagenav a{
  padding:5px 11px;background:var(--face);text-decoration:none;color:#000;font-size:13.5px;
  border:2px solid;border-color:var(--hi) var(--sh2) var(--sh2) var(--hi);
  box-shadow:inset 1px 1px 0 var(--face),inset -1px -1px 0 var(--sh);
}
.pagenav a:hover{background:#cdcdcd;color:#000}
.pagenav a[aria-current="page"]{
  border-color:var(--sh) var(--hi) var(--hi) var(--sh);
  box-shadow:inset 1px 1px 0 var(--sh2);
  background:#b0b0b0;font-weight:700;
}

/* ---------- taskbar ---------- */
.taskbar{
  position:fixed;left:0;right:0;bottom:0;height:38px;z-index:60;
  display:flex;align-items:center;gap:6px;padding:3px 4px;
  background:var(--face);
  border-top:2px solid var(--hi);
  box-shadow:0 -1px 0 var(--sh);
}
.start{
  display:flex;align-items:center;gap:6px;flex:none;
  padding:3px 9px 4px 6px;font-weight:700;font-size:14px;color:#000;
  background:var(--face);text-decoration:none;
  border:2px solid;border-color:var(--hi) var(--sh2) var(--sh2) var(--hi);
  box-shadow:inset 1px 1px 0 var(--face),inset -1px -1px 0 var(--sh);
  cursor:pointer;font-family:var(--font);
}
.start[aria-expanded="true"]{
  border-color:var(--sh) var(--hi) var(--hi) var(--sh);
  box-shadow:inset 1px 1px 0 var(--sh2);background:#b0b0b0;
}
.start__flag{
  width:17px;height:15px;flex:none;
  background:
    linear-gradient(135deg,#ff3b30 50%,transparent 50%) 0 0/9px 8px no-repeat,
    linear-gradient(135deg,#34c759 50%,transparent 50%) 9px 0/9px 8px no-repeat,
    linear-gradient(135deg,#0a84ff 50%,transparent 50%) 0 8px/9px 8px no-repeat,
    linear-gradient(135deg,#ffd60a 50%,transparent 50%) 9px 8px/9px 8px no-repeat;
}
.tasks{flex:1;display:flex;gap:4px;overflow:hidden}
.tasks a{
  max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:3px 10px;font-size:13px;color:#000;text-decoration:none;background:var(--face);
  border:2px solid;border-color:var(--hi) var(--sh2) var(--sh2) var(--hi);
  box-shadow:inset 1px 1px 0 var(--face),inset -1px -1px 0 var(--sh);
}
.tasks a[aria-current="page"]{
  border-color:var(--sh) var(--hi) var(--hi) var(--sh);
  box-shadow:inset 1px 1px 0 var(--sh2);background:#b0b0b0;font-weight:700;
}
.tray{
  flex:none;margin-left:auto;display:flex;align-items:center;gap:6px;padding:3px 9px;font-size:13px;
  border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);
  min-width:74px;justify-content:flex-end;font-variant-numeric:tabular-nums;
}

/* ---------- start menu ---------- */
.startmenu{
  position:fixed;left:4px;bottom:41px;z-index:61;width:250px;display:none;
  background:var(--face);
  border:2px solid;border-color:var(--hi) var(--sh2) var(--sh2) var(--hi);
  box-shadow:inset 1px 1px 0 var(--face),inset -1px -1px 0 var(--sh);
}
.startmenu[data-open="1"]{display:flex}
.startmenu__spine{
  width:30px;flex:none;
  background:linear-gradient(180deg,#000080,#1084d0);
  writing-mode:vertical-rl;transform:rotate(180deg);
  color:#fff;font-weight:700;font-size:15px;letter-spacing:1px;
  display:grid;place-items:center;padding:10px 0;
}
.startmenu__list{flex:1;padding:3px;margin:0;list-style:none}
.startmenu__list a{
  display:flex;align-items:center;gap:9px;padding:6px 8px;
  text-decoration:none;color:#000;font-size:14px;
}
.startmenu__list a:hover{background:var(--sel);color:#fff}
.startmenu__list li+li.sep{border-top:1px solid var(--sh);margin-top:3px;padding-top:3px}

/* ---------- footer ---------- */
.foot{max-width:1080px;margin:0 auto;padding:0 14px 26px;color:#dff2f2;font-size:13px;text-shadow:1px 1px 2px rgba(0,0,0,.6)}
.foot a{color:#fff}

@media (max-width:640px){
  body{font-size:15.5px}
  .wrap{padding:12px 10px 0}
  h1{font-size:23px}
  h2{font-size:18.5px}
  .win__body{padding:13px 13px}
  .desktop{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));justify-content:stretch}
  .dicon{font-size:12.5px}
  .tasks{display:none}
  .startmenu{width:calc(100% - 8px)}
  .win__status span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}