body {
  background-color: #eeeeee;
  color: #777777;
  font-family: "monaco", "Consolas", "Lucida Console", monospace;
  width:60%
}

@media screen and (max-width: 768px) {
  body {
    width: 100%; /* Set the width to full for small screens */
  }
}

.ascii-art {
  font-family: "monaco", "Consolas", "Lucida Console", monospace;
  color: #777777;
  text-align: center;
  font-size: .5rem;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: 1px;   
  margin: 0;
  text-shadow: 0 0 1px currentColor;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}   

a:link {
  color: rgb(231,204,151);
}

a:visited {
  color: rgb(231,204,151);
}

a:hover {
  color: rgb(250,247,232);
}

h1 {
  color: rgb(112,84,73);
}

h2 {
  color: rgb(112,84,73);
}

h3 {
  color: rgb(112,84,73);
}

h4 {
  color: rgb(112,84,73);
}

hr {
  border: 1px solid rgb(112,84,73);
}

blockquote {
  max-width: 50%; /* Slightly thinner than body */
  margin: 1em auto; /* Centering */
  padding: 0.5em;
}

.blockquote-alt {
  max-width: 65%; /* Wider than 50%, still narrower than 60% */
  font-size: 0.9em; /* Makes the text slightly smaller */
}

sup {
  font-size: 0.75em; /* Makes it smaller so it doesn’t push lines apart */
  line-height: 0; /* Prevents extra space */
  position: relative;
  top: -0.3em; /* Adjusts placement to avoid excessive height changes */
}