:root {
  --background: #080a08;
  --panel: #101510;
  --text: #e8e3d5;
  --muted-text: #b8b5a8;
  --gold: #c7a85b;
  --green: #87a878;
}

* {
  box-sizing: border-box;
}

body {
  background-color: var(--background);
  color: var(--text);
  font-family: Verdana, sans-serif;
  line-height: 1.65;
  margin: 0;
  padding: 24px;
}

main {
  width: min(100%, 760px);
  margin: 40px auto;
  padding: 32px;
  background-color: var(--panel);
  border: 1px solid var(--gold);
  box-shadow: 8px 8px 0 #263426;
}

h1 {
  color: var(--gold);
  font-family: "Courier New", monospace;
  font-size: clamp(1.8rem, 5vw, 2.7rem);
  line-height: 1.15;
  text-align: center;
  margin: 0 0 12px;
}

.tagline {
  color: var(--green);
  font-family: "Courier New", monospace;
  text-align: center;
  margin: 0 0 32px;
}

p {
  color: var(--text);
  margin: 0 0 1.25rem;
}

/* Avoid justified text on narrow screens—it creates awkward gaps. */
.responsive-image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 680px;
  height: auto;
  margin: 32px auto 0;
  border: 1px solid var(--gold);
}

.links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 28px 0;
}

.links a {
  color: var(--background);
  background-color: var(--gold);
  font-family: "Courier New", monospace;
  font-weight: bold;
  text-decoration: none;
  padding: 9px 14px;
  border: 1px solid var(--gold);
}

.links a:hover,
.links a:focus {
  color: var(--text);
  background-color: transparent;
}

footer {
  color: var(--muted-text);
  font-family: "Courier New", monospace;
  font-size: 0.8rem;
  text-align: center;
  margin-top: 32px;
}

@media (max-width: 600px) {
  body {
    padding: 12px;
  }

  main {
    margin: 12px auto;
    padding: 22px 18px;
    box-shadow: 4px 4px 0 #263426;
  }

  .responsive-image {
    max-height: none;
  }
}

/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color."

body {
  background-color: black;
  color: white;
  font-family: Verdana;
  margin: 10px 20px;
}

.responsive-image {
  display: block;
  max-width: 50%;
  height: auto;
  margin: 0 auto;
  }