body { font-family: 'Goudy Old Style', Baskerville, Garamond, serif;
  background-color: #FFFFFF;
  color: #2F2F2F;
  margin: 20px;
  line-height: 1.6;
}

/* Header styles */
h1 {
  margin-bottom: 0px;
  color: #c9980b;
  font-weight: normal;
  font-family: 'Garamond', Baskerville, Goudy Old Style, serif;
  border-bottom: 1px solid #FFD700;
  background-color: #d3d3d3;
  display: inline-block;
  margin: 0;
  padding: 10px 0;
  padding-left: 20px;
  text-shadow: -.5px -.5px 1px #ffffff;
  position: relative;
  overflow: hidden; /* combined from second h1 rule */
  text-align: center;
}
h2 {
  margin-top: 20px;
  margin-bottom: 0px;
  font-family: 'Cinzel', Garamond, Baskerville, Goudy Old Style, serif;
  color: #9b111e;
  font-weight: normal;
  text-shadow: -.5px -.5px .75px #c9980b;
}
h3 {
  margin-top: 15px;
  margin-bottom: 0px;
  font-family: 'Cinzel', Garamond, Baskerville, Goudy Old Style, serif;
  color: #908cbc;
  font-weight: normal; /* changed from 'strong' which isn't valid */
  text-shadow: -.5px -.5px .5px #c9980b;
}
h4 {
  margin-top: 10px;
  margin-bottom: 0px;
  font-family: 'Cinzel', Garamond, Baskerville, Goudy Old Style, serif;
  color: #000000;
  font-weight: normal;
}
h5 {
  margin-top: 8px;
  margin-bottom: 0px;
  font-family: 'Cinzel', Garamond, Baskerville, Goudy Old Style, serif;
  font-weight: normal;
}
h6 {
  margin-top: 6px;
  margin-bottom: 0px;
  font-family: 'Cinzel', Garamond, Baskerville, Goudy Old Style, serif;
  font-weight: normal;
}
.header-container {
  background-color: #d3d3d3; /* same as your h1 background color */
  text-align: center; /* centers inline content inside */
  padding: 10px 0; /* optional padding for spacing */
}

.sorc-letters {
  font-family: 'Baskerville', poderosa, cinzel, Garamond, Baskerville, Goudy Old Style, serif; /* or your preferred font */
  color: black;
  font-size: 30px; /* adjust as needed */
  font-weight: strong;
  margin-top: 5px; /* space between the h1 and the line */
  letter-spacing: 10px; /* spacing between letters */
}

/* Paragraph and links */
p {
  margin-top: 15px;
  margin-bottom: 0px;
}
a {
  color: #306754;
  text-decoration: none;
  font-weight: bold;
}
a:hover {
  text-decoration: underline;
  color: #6cbb3c;
}

/* Buttons */
.button {
  background-color: transparent;
  color: #B22222;
  padding: 8px 16px;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 8px;
  border: 2px solid #FFD700;
  display: inline-block;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  max-width: 150px;
}
.buttons-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.button:hover {
  background-color: #FFD700;
  color: #FFD700;
  border-color: #FFA500;
}

/* Border rule - removed the invalid curly brace */

footer {
  background-color: #36454f;
  padding: 15px;
  margin-top: 40px;
  font-size: 14px;
  color: #ffffff;
  font-family: 'Garamond', Baskerville, Goudy Old Styleserif, serif;
  width: 100%;
  box-sizing: border-box;
}
.footer-inner {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  text-align: left;
}
footer a {
  color: #03c04a;
  text-decoration: none;
}

/* Social icons styling */
.social-icons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}
.social-icon {
  display: inline-block;
  width: auto;
  height: auto;
}

.social-icon img {
  max-width: 40px;
  max-height: 40px;
}

hr {
  height: 1px; /* Thickness of the hr */
  background-color: #656565; /* Gray color for the line */
  border: none; /* Remove default border */
  box-shadow: -1px -1px 3px rgb(192, 192, 192); /* Shadow above with RGB color */
  display: block; /* Ensures it's a block element */
  margin-top: 20px; /* Optional: space above the hr */
  margin-bottom: 60px; /* Space below the hr */
}

/* Layout for buttons in two rows */

.buttons-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

/* First row: 4 buttons */
.buttons-row-1 {
  display: flex;
  justify-content: center;
  gap: 10px;
}
/* second row: 4 buttons */
.buttons-row-2 {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}
.button {
  display: flex; /* or inline-flex */
  align-items: center; /* vertical centering */
  justify-content: center; /* horizontal centering */
  height: 40px; /* set your desired button height */
  padding: 0 10px; /* optional: space inside buttons */
  text-align: center;
}