:root {
  --win95-bg: #C1D5F2;
  --win95-teal: #008080;
  --win95-white: #ffffff;
  --win95-gray-dark: #8DA7CC;
  --win95-black: #8DA7CC; 
  --win95-blue: #000080;
}

body {
  background-color: var(--win95-teal);
  font-family: "Open Sans", "Open Sans", sans-serif;
  color: black;
  padding: 32px;
  
   /* Scrolling Background Setup */
  background-color: #f0f0f0;
  background-image: url('background-dark.png');
  background-repeat: repeat;
  background-size: 128px 128px; 
  
  /* Background Animation: moves diagonally forever */
  animation: slide-diag 8s linear infinite;
  
}

@keyframes slide-diag {
  from { background-position: 0 0; }
  to   { background-position: 256px 0px; }
}

/* Main Window Frame */
main {
  background-color: var(--win95-bg);
  border: 1px solid;
  /* Classic 3D border effect */
  border-color: var(--win95-white) var(--win95-black) var(--win95-black) var(--win95-white);
  max-width: 800px;
  margin: 0 auto;
  box-shadow: 8px 8px 1px rgba(0,0,0,0.2);
  padding: 2px; /* Slight padding to show the inner frame */
}

/* The Title Bar */
.title-bar {
  background: linear-gradient(90deg, #0385e5, #fe70a2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 5px 3px 8px;
  margin-bottom: 4px;
}

.title-bar-text {
  color: white;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: 0.5px;
}

.title-bar-controls button {
  width: 24px;
  height: 24px;
  background-color: var(--win95-bg);
  border: 1px solid;
  /* Top, Right, Bottom, Left */
  border-color: var(--win95-white) var(--win95-black) var(--win95-black) var(--win95-white);
  color: black;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  text-align: center;
  cursor: pointer;
  outline: none; /* Removes the modern focus ring */
}

/* This creates the "Pressed" effect */
.title-bar-controls button:active {
  /* We flip the border colors: Shadow on top/left, Highlight on bottom/right */
  border-color: var(--win95-black) var(--win95-white) var(--win95-white) var(--win95-black);
  
  /* This shifts the "X" or icon 1 pixel down and right for realism */
  padding: 1px 0 0 1px;
}

/* Inner Content Area */
.window-body {
  padding: 15px;
  background-color: var(--win95-bg);
}