style.css

/* Set a vintage color palette */
body {
  background-color: #e8d6b3;
  color: #635d4d;
  font-family: 'Courier New', Courier, monospace;
}

/* Add a patterned background */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://www.transparenttextures.com/patterns/45-degree-fabric-light.png');
  opacity: 0.3;
  z-index: -1;
}

/* Set a vintage-looking font for headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
}

/* Style links to look like old newspaper links */
a {
  color: #a34e22;
  text-decoration: none;
  border-bottom: 1px dotted #a34e22;
  transition: border-bottom 0.3s ease-in-out;
}
a:hover {
  border-bottom: 1px solid #a34e22;
}

/* Add a subtle border around images */
img {
  border: 1px solid #e8d6b3;
}

/* Set the default width of content containers */
.container {
  max-width: 800px;
  margin: 0 auto;
}

/* Add a shadow to content containers */
.container {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Add some extra padding to make the content feel more contained */
.container {
  padding: 20px;
}

/* Style buttons with a vintage look */
button {
  background-color: #a34e22;
  color: #e8d6b3;
  border: none;
  border-radius: 3px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}
button:hover {
  background-color: #e8d6b3;
  color: #a34e22;
}

/* Set a background color for code blocks */
pre {
  background-color: #f8f8f8;
  color: #4d4d4d;
  padding: 10px;
  border-radius: 3px;
  font-size: 0.9em;
}

/* Style blockquotes to look like old typewriter text */
blockquote {
  font-style: italic;
  font-size: 1.2em;
  padding: 20px;
  margin: 20px;
  background-color: #e8d6b3;
  border-left: 5px solid #a34e22;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Style tables to look like old ledger sheets */
table {
  border-collapse: collapse;
  font-family: 'Courier New', Courier, monospace;
  width: 100%;
  margin: 20px 0;
}
table th, table td {
  border: 1px solid #635d4d;
  padding: 10px;
  text-align: left;
}
table th {
  background-color: #e8d6b3;
}

/* Style the footer */
footer {
  background-color: #635d4d;
  color: #e8d6b3;
  padding: 20px;
}

/* Center the footer content */
.footer-info {
  text-align: center;
}

/* Add some spacing between footer links */
.footer-links {
  margin-top: 20px;
}

/* Style the footer links */
.footer-links a {
  color: #e8d6b3;
  text-decoration: none;
  margin-right: 10px;
}

.footer-links a:hover {
  border-bottom: 1px dotted #e8d6b3;
}

/* Add a separator between footer links */
.footer-links a:not(:last-child)::after {
  content: '|';
  margin-left: 10px;
  margin-right: 10px;
  color: #e8d6b3;
}

/* Style the footer text */
.footer-text {
  margin-top: 20px;
  font-size: 0.8em;
}

/* Add a separator between footer text and footer links */
.footer-text::before {
  content: '';
  display: block;
  height: 1px;
  background-color: #e8d6b3;
  margin-bottom: 20px;
}

/* Center the social media icons */
.footer-social {
  text-align: center;
  margin-top: 20px;
}

/* Style the social media icons */
.footer-social i {
  color: #e8d6b3;
  font-size: 1.5em;
  margin-right: 10px;
}

.footer-social i:hover {
  color: #a34e22;
}