/* ClickNostalgia — Windows 95 theme */

@font-face {
  font-family: "MS Sans Serif Fallback";
  src: local("Tahoma"), local("Segoe UI");
}

:root{
  --win-bg: #008080;           /* classic teal desktop */
  --win-gray: #c0c0c0;         /* window chrome gray */
  --win-gray-dark: #808080;
  --win-gray-darker: #404040;
  --win-white: #ffffff;
  --win-blue-title: #000080;   /* titlebar navy */
  --win-blue-title2: #1084d0;  /* titlebar gradient end */
  --win-text: #000000;
  --win-btn-face: #c0c0c0;
}

*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  background:var(--win-bg);
  color:var(--win-text);
  font-family:"MS Sans Serif Fallback","Tahoma","Segoe UI",Geneva,sans-serif;
  font-size:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px 12px;
}

/* Top brand bar, styled like a Win95 title bar */
.titlebar{
  width:100%;
  max-width:520px;
  background:linear-gradient(90deg, var(--win-blue-title), var(--win-blue-title2));
  color:#fff;
  padding:5px 8px;
  display:flex;
  align-items:center;
  border:2px solid #000;
  border-bottom:none;
  font-weight:bold;
  letter-spacing:0.5px;
  font-size:15px;
}
.titlebar a{color:#fff; text-decoration:none}
.titlebar .dots{margin-left:auto; display:flex; gap:4px}
.titlebar .dots span{
  width:16px; height:14px;
  background:var(--win-btn-face);
  border:1px solid #000;
  display:inline-block;
  box-shadow: inset -1px -1px 0 var(--win-gray-darker), inset 1px 1px 0 #fff;
}

/* Main "window" */
.window{
  width:100%;
  max-width:520px;
  background:var(--win-gray);
  border:2px solid #000;
  box-shadow: inset -2px -2px 0 var(--win-gray-darker), inset 2px 2px 0 #dfdfdf, 4px 4px 0 rgba(0,0,0,0.4);
  padding:20px;
  text-align:center;
}

/* Fixed-size image container, keeps proportions via object-fit */
.image-frame{
  width:100%;
  height:260px;
  background:#fff;
  border:2px solid #000;
  box-shadow: inset 2px 2px 0 var(--win-gray-darker), inset -2px -2px 0 #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  margin-bottom:18px;
}
.image-frame img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  image-rendering:auto;
}
.image-frame .placeholder-text{
  color:#808080;
  font-size:13px;
  font-family:"Courier New",monospace;
}

h1{
  font-size:1.35rem;
  margin:0 0 12px;
  line-height:1.25;
  word-break:break-word;
}

p.desc{
  font-size:0.95rem;
  line-height:1.55;
  color:#111;
  text-align:left;
  background:#fff;
  border:2px solid #000;
  box-shadow: inset 1px 1px 0 var(--win-gray-darker), inset -1px -1px 0 #fff;
  padding:12px 14px;
  margin:0 0 22px;
}

/* Chunky beveled Win95 button */
.dig-btn{
  display:inline-block;
  background:var(--win-btn-face);
  color:#000;
  font-weight:bold;
  font-size:1rem;
  font-family:inherit;
  padding:10px 26px;
  border:2px solid #000;
  box-shadow: inset -1px -1px 0 var(--win-gray-darker), inset 1px 1px 0 #fff, 2px 2px 0 rgba(0,0,0,0.5);
  text-decoration:none;
  cursor:pointer;
}
.dig-btn:active{
  box-shadow: inset 1px 1px 0 var(--win-gray-darker), inset -1px -1px 0 #fff;
  transform:translate(1px,1px);
}

footer{
  display:block;
  text-align:center;
  padding:14px 10px 4px;
  font-size:11px;
  color:#003c3c;
}
footer a{color:#003c3c; text-decoration:underline; margin:0 6px}
footer a:hover{color:#000}
noscript p{color:#fff; margin-top:12px; font-size:12px}