body {
  background-color: #2f4f4f;
  font-family: "MS Sans Serif", Geneva, sans-serif
}



/* WINDOW COMPONENTS */
.window {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
  color: #000;
  margin-bottom: 16px;
}

.window-title {
  background: linear-gradient(90deg, #0700b8 0%, #00ff88 100%);
  padding: 3px 10px;
  color: #ffffff;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.window-body {
  padding: 12px;
  border: 1px inset #fff;
  margin: 2px;
}

/* LAYOUT */
.desktop-container {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 250px 1fr 200px;
  gap: 12px;
}

/* Sidebar Nav */
.nav-list {
  list-style: none;
  padding: 0;
}
.nav-list li a {
  display: block;
  background: #eee;
  border: 1px solid #808080;
  padding: 4px;
  margin-bottom: 4px;
  text-decoration: none;
  color: #000;
  text-align: center;
  vertical-align: middle;
}
.nav-list li a:hover {
  background: #dfdfdf;
  border-color: #000;
}



/* DECORATIONS */
marquee {
  background: #ff8c00;
  color: #000;
  border: 1px solid #000;
  font-weight: bold;
  padding: 2px;
  margin-bottom: 10px;
}

.pixel-art-icon {
  image-rendering: pixelated;
  width: 32px;
  height: 32px;
}

.blink { animation: blinker 1s linear infinite; }
@keyframes blinker { 50% { opacity: 0; } }

/* Reponsive */
@media (max-width: 800px) {
  .desktop-container { grid-template-columns: 1fr; }
}