/* General styles */
body {
  font-family: 'Courier New', monospace; /* Retro monospace font */
  margin: 0;
  text-align: center;
  padding: 20px;
  background-color: #f3eac2; /* Soft beige for a vintage look */
  color: #3b3838; /* Deep charcoal for readability */
  line-height: 1.6;
}

/* Output box */
#output {
  width: 712px;
  height: 480px;
  image-rendering: pixelated;
  background: #d4c19c; /* Muted tan */
  border: 5px solid #8b7765; /* Earthy brown border */
  box-shadow: 4px 4px 0px #b0a18a, 6px 6px 0px #f3eac2; /* Subtle shadow effect */
  margin: 20px auto;
  border-radius: 8px; /* Slight rounding for a classic touch */
}

/* Header styles */
header {
  background: #8b7765; /* Earthy brown */
  color: #f3eac2; /* Soft beige text */
  padding: 20px 10px;
  text-align: center;
  text-shadow: 1px 1px #3b3838; /* Subtle vintage shadow */
  border-bottom: 4px solid #b0a18a;
}

/* Buttons and selectors */
select, button {
  padding: 10px 15px;
  margin: 5px;
  font-size: 16px;
}

button {
  background-color: #c7a27c; /* Soft peachy brown */
  color: #3b3838;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  border: 2px solid #8b7765;
  border-radius: 8px;
  padding: 10px 20px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  text-transform: uppercase;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

button:hover {
  background-color: #a6896e; /* Slightly darker vintage brown */
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}

/* Table styles */
table {
  margin: 5px auto;
  border-collapse: collapse;
  width: 50%;
}

th, td {
  border: 1px solid #8b7765;
  padding: 1px 15px;
  text-align: center;
  font-family: 'Courier New', monospace;
}

th {
  background-color: #8b7765;
  color: #f3eac2;
}

tr:nth-child(even) {
  background-color: #f3eac2;
}

tr:hover {
  background-color: #c7a27c;
}

/* Navigation styles */
nav {
  background: #8b7765;
  color: #f3eac2;
  padding: 10px;
  font-family: 'Courier New', monospace;
}

nav a {
  color: #f3eac2;
  text-decoration: none;
  padding: 10px;
  display: inline-block;
  border-radius: 4px;
  background: #3b3838;
  transition: background 0.3s ease;
}

nav a:hover {
  background: #c7a27c;
  color: #3b3838;
}

/* Footer styles */
footer {
  background: #3b3838;
  color: #f3eac2;
  text-align: center;
  padding: 10px;
  position: relative;
  bottom: 0;
  width: 100%;
  font-family: 'Courier New', monospace;
}

/* Header text */
h1, h2, h3 {
  margin-top: 0;
  text-shadow: 1px 1px #8b7765; /* Earthy text shadow */
}

label {
  background-color: #c7a27c; /* Soft peachy brown for retro feel */
  color: #3b3838; /* Muted dark color for text */
  font-family: 'Courier New', monospace; /* Retro font */
  font-size: 16px;
  padding: 10px 20px;
  border: 2px solid #8b7765; /* Earthy border */
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Subtle depth */
  text-transform: uppercase;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

label:hover {
  background-color: #a6896e; /* Slightly darker for hover effect */
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); /* Enhanced shadow */
}
/* General mobile adjustments */
@media (max-width: 768px) {
  body {
    padding: 10px; /* Reduce padding for smaller screens */
  }

  #output {
    width: 90%; /* Make it responsive to fit smaller screens */
    height: auto; /* Adjust height dynamically */
    margin: 10px auto; /* Keep centered */
  }

  header {
    padding: 15px 5px; /* Reduce padding */
    font-size: 18px; /* Adjust font size for readability */
  }

  button, label {
    font-size: 14px; /* Slightly smaller text for buttons/labels */
    padding: 8px 15px; /* Adjust padding for smaller buttons */
  }

  table {
    width: 100%; /* Tables span full width */
    font-size: 12px; /* Smaller font for compact view */
  }

  th, td {
    padding: 5px; /* Reduce padding inside table cells */
  }

  nav {
    padding: 5px; /* Compact navigation bar */
  }

  nav a {
    padding: 8px; /* Adjust link padding */
    font-size: 14px; /* Smaller link text */
  }

  footer {
    padding: 5px; /* Reduce footer padding */
    font-size: 12px; /* Smaller footer text */
  }

  h1, h2, h3 {
    font-size: 20px; /* Scale down header text */
  }
}