body {
  margin: 0;
  padding: 40px 16px;
  background-color: #4f7a52;          
  background-image: url("images/bg.gif");
  background-repeat: repeat;
  image-rendering: pixelated;
  font-family: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Geneva, sans-serif;
  font-size: 14px;
  color: #000;
  -webkit-text-size-adjust: 100%;
  zoom: var(--scale, 1);
}

/* Everything below is sized in fixed px, so on high-res monitors the whole
   window ends up tiny. Scale the entire thing instead of resizing each bit,
   which keeps the pixel chrome (borders, title bar, logo) in proportion.
   Only kicks in above normal 1080p widths. */
@media (min-width: 1800px) {
  body { --scale: 1.25; }
}

@media (min-width: 2300px) {   /* 1440p, maximized */
  body { --scale: 1.5; }
}

@media (min-width: 3200px) {   /* 4K */
  body { --scale: 2; }
}

.window {
  max-width: 460px;
  margin: 0 auto;
  background: #c0c0c0;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #000000;
  border-bottom: 2px solid #000000;
  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf, 4px 4px 0 rgba(0,0,0,.3);
  padding: 3px;
}

.titlebar {
  background: #000080;
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff;
  font-weight: bold;
  padding: 3px 3px 3px 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.titlebar-buttons {
  display: flex;
  gap: 2px;
}

/* 3 little buttons. Not real buttons. */
.tb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 16px;
  background: #c0c0c0;
  color: #000;
  font: bold 10px "MS Sans Serif", Tahoma, sans-serif;
  line-height: 1;
  padding: 0;
  user-select: none;
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf;
}

.tb:active {
  border-color: #000000 #ffffff #ffffff #000000;
}

.inside {
  padding: 16px 18px;
}

.logo {
  display: block;
  margin: 0 auto 5px;
  max-width: 64px;
  height: auto;
  image-rendering: auto;
}

h1 {
  margin: 0 0 10px;
  font-size: 20px;
  text-align: center;
}

p {
  margin: 0 0 4px;
  line-height: 1.5;
}

hr {
  border: none;
  border-top: 1px solid #808080;
  border-bottom: 1px solid #ffffff;
  margin: 14px 0;
}

.links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.links li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.links a {
  display: block;
  padding: 8px 0;
}

.icon {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}

a {
  color: #000080;
}

a:visited {
  color: #551a8b;
}

a:hover {
  color: #1084d0;
}

.statusbar {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
  padding: 3px 6px;
  font-size: 12px;
  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}