* {
  box-sizing: border-box;
}

/* Body styles: font, background, text color, margin, line height */
body {
  display: flex; /* added for flex layout */
  flex-direction: column; /* added for flex layout */
  min-height: 100vh; /* added for full height */
  margin: 0; /* keep existing */
  font-family: 'Goudy Old Style', Baskerville, Garamond, serif; /* keep your font if you want */
  background-color: #cbc1ae; /* keep your background if desired */
  color: #2F2F2F; /* keep your text color */
  line-height: 1.6; /* keep your line height */
}

/* Add this class for main content wrapper */
.main-content {
  flex: 1; /* expand to fill available space */
}

/* Header styles: main title */
h1 {
  margin-bottom: 0px;
  color: #c9980b; /* Gold/yellow */
  font-weight: normal;
  font-family: 'Garamond', Baskerville, Goudy Old Style, serif;
  border-bottom: 1px solid #FFD700; /* Gold border */
  background-color: #786f80; /* Purple-gray background */
  display: inline-block;
  margin: 0;
  padding: 10px 0 10px 20px;
  text-shadow: -.5px -.5px 1px #ffffff; /* subtle white shadow for text */
}

/* Subheaders (h2, h3, h4, h5, h6): font, color, spacing, shadow effects */
h2 {
  margin-top: 20px;
  margin-bottom: 0px;
  font-family: 'Cinzel', Garamond, Baskerville, Goudy Old Style, serif;
  color: #9b111e; /* Deep red */
  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; /* Soft blue-gray */
  font-weight: bold;
  text-shadow: -.5px -.5px .5px #c9980b;
}
h4 {
  margin-top: 10px;
  margin-bottom: 0px;
  font-family: 'Cinzel', Garamond, Baskerville, Goudy Old Style, serif;
  color: #000000; /* Black */
  font-weight: normal;
}
h5 {
  margin-top: 8px;
  margin-bottom: 0px;
  font-family: 'Cinzel', Garamond, Baskerville, Goudy Old Style, serif;
  font-weight: normal;
}
h6 {
  background-color: #f8f9fa; /* Light gray background */
  padding: 8px 16px; /* Padding inside header box */
  border-radius: 6px; /* Rounded corners */
  font-size: 1em; /* Base font size */
  font-weight: 600; /* Bold font weight */
  margin: 12px 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07); /* subtle shadow */
  font-family: 'Cinzel', Garamond, Baskerville, Goudy Old Style, serif;
  letter-spacing: 0.2px;
}
h6 a {
  text-decoration: none; /* Remove underline from links */
  transition: text-decoration 0.2s;
}
h6 a:hover {
  text-decoration: underline; /* Underline on hover */
}

/* Styles for the fetched section list */
#sections {
  padding-left: 20px; /* Indent the entire list */
  margin-top: 10px;   /* Space above the list */
  background-color: #fff; /* white background */
  border-radius: 4px; /* optional rounded corners for nicer look */
  padding: 10px; /* internal padding for content */
}
#sections h3 {
  margin-top: 0;
  margin-bottom: 10px; /* space below the heading */
  font-family: 'Cinzel', Garamond, Baskerville, Goudy Old Style, serif;
  font-size: 1.2em;
  font-weight: bold;
  color: #2F2F2F; /* dark text for heading */
}
#sections a {
  color: #2F2F2F; /* default link color */
  text-decoration: none;
  margin-right: 12px; /* space between links */
}
#sections a:hover {
  text-decoration: underline;
  color: #2F2F2F; /* same color on hover, optional */
}
#sections strong {
  font-weight: bold;
  padding: 2px 4px;
  border-radius: 2px;
  color: #2F2F2F;
}

/* Header container styles */
.header-container {
  background-color: #786f80; /* Same as h1 background */
  text-align: center;
  padding: 10px 0;
}

/* Sorc letters styles */
.sorc-letters {
  font-family: 'Baskerville', poderosa, cinzel, Garamond, Baskerville, Goudy Old Style, serif;
  color: black;
  font-size: 30px;
  font-weight: normal;
  margin-top: 5px;
  letter-spacing: 10px; /* Spacing between letters */
}

/* Paragraph styles */
p {
  margin-top: 15px;
  margin-bottom: 0px;
}

/* Current section highlight styles */
[id] .current-section,
[class] .current-section,
div .current-section,
ol .current-section,
script .current-section,
[id] .current-div,
[class] .current-div,
div .current-div,
ol .current-div,
script .current-div,
[id] .current-ol,
[class] .current-ol,
div .current-ol,
ol .current-ol,
script .current-ol,
[id] .current-li,
[class] .current-li,
div .current-li,
ol .current-li,
script .current-li {
  color: #cc7722 !important; /* Highlight color */
  font-weight: bold;
  text-decoration: none;
  background-color: none;
}

/* Link styles: default and hover */
a {
  color: #402956 !important; /* Default link color */
  text-decoration: none;
  font-weight: bold;
  position: relative;
  display: inline-block;
  transition: color 0.2s;
  animation: shimmer-topleft 2s infinite alternate;
}
a:hover {
  color: #402956 !important; /* Hover color */
  text-decoration: underline;
}

/* Highlight style for the current page link */
.sec-rules-link.active {
  font-weight: bold;
  color: blue; /* or your preferred highlight color */
}

/* Style for visited links to be orange */
.sec-rules-link:visited {
  color: orange;
}

/* GM username links with shimmer */
.gm-username a {
  color: #B22222 !important; /* GM link color */
  font-weight: bold;
  text-decoration: none;
  animation: shimmer-topleft 2s infinite alternate;
  transition: color 0.2s;
  font-size: 1em;
}
.gm-username a:hover {
  color: #8b1616 !important; /* Hover color */
}

/* Player username links with shimmer */
.player-username a {
  color: #2176ff !important; /* Player link color */
  font-weight: bold;
  text-decoration: none;
  animation: shimmer-topleft 2s infinite alternate;
  transition: color 0.2s;
  font-size: 1em;
}
.player-username a:hover {
  color: #113366 !important; /* Hover color */
}

/* GM tag styles with shimmer */
.gm-tag {
  display: inline-block;
  position: relative;
  top: -0.7em;
  margin-left: -1px;
  font-size: 0.53em;
  background: #18181a; /* Background color */
  color: #c9980b; /* Text color */
  border: 1px solid #b1101c; /* Border color */
  border-radius: 2.5px; /* Rounded corners */
  font-family: 'Cinzel', Garamond, serif;
  font-weight: bold;
  padding: 0 3px;
  vertical-align: baseline;
  box-shadow: 0 0 3px #b1101c22;
  line-height: 1;
  height: 1em;
  animation: shimmer-topleft 2s infinite alternate;
}

/* PC tag styles with shimmer */
.pc-tag {
  display: inline-block;
  position: relative;
  top: -0.7em;
  margin-left: -1px;
  font-size: 0.53em;
  background: #e0eafc;
  color: #213b60;
  border: 1px solid #2176ff;
  border-radius: 2.5px;
  font-family: 'Cinzel', Garamond, serif;
  font-weight: bold;
  padding: 0 3px;
  vertical-align: baseline;
  line-height: 1;
  height: 1em;
  box-shadow: 0 0 3px #2176ff22;
  animation: shimmer-topleft 2s infinite alternate;
}

/* GM button styles with shimmer */
.gm_button {
  display: inline-block;
  padding: 8px 16px;
  background: linear-gradient(135deg, #000000, #222);
  color: #FFD700; /* Gold text */
  font-family: 'Garamond', 'Goudy Old Style', serif;
  font-size: 10px;
  font-weight: bold;
  border: 2px solid #b22222;
  border-radius: 6px;
  box-shadow: 0 0 6px #b22222, inset 0 0 2px #b22222;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 1px 1px 2px #000;
  padding: 4px 8px;
  font-size: 8px;
  border-radius: 6px;
}
/* Player button styles with shimmer */
.plyr_button {
  padding: 8px 16px;
  border-radius: 6px;
  border: 2px solid #000000;
  background: linear-gradient(135deg, #ffffff, #fff);
  box-shadow: 0 0 6px #000000, inset 0 0 2px #000000;
  font-family: 'Garamond', 'Goudy Old Style', serif;
  font-size: 10px;
  font-weight: bold;
  text-shadow: 1px 1px 2px #000;
  color: #FFFFFF;
  padding: 4px 8px;
  font-size: 8px;
  border-radius: 6px;
}

/* Role text inside GM button */
.gm_button .role-text {
  font-family: 'Garamond', 'Goudy Old Style', serif; /* Elegant font */
  font-size: 16px; /* Larger size for prominence */
  font-weight: bold;
  color: #FFD700; /* Gold */
}

/* Role text inside Player button */
.plyr_button .role-text {
  font-family: 'Garamond', Goudy Old Style; /* Modern font */
  font-size: 16px; 
  font-weight: bold;
  color: #00008B; /* Dark blue */
}

/* Shimmer keyframes animation */
@keyframes shimmer-topleft {
  0% {
    text-shadow: -0.5px -0.5px 0.2px #fff, 0px 0px 0px #fff;
  }

  50% {
    text-shadow: -0.2px -0.2px 0.4px #fff, 0px 0px 0px #fff;
  }
  100% {
    text-shadow: -0.5px -0.5px 0.3px #fff, 0px 0px 0px #fff;
  }
}

.page-wrapper {
  border-left: 15px solid #333; /* your wide left border */
  border-right: 15px solid #333; /* your wide right border */
  padding-left: 2px;
  padding-right: 2px;
  min-height: 100vh; /* stretch to full viewport height */
  box-sizing: border-box; /* include borders and padding in size */
}

p, h3 {
  margin-left: 20px; /* Adjust the value as needed */
  margin-right: 20px; /* Adjust the value as needed */
  text-indent: 0em; /* Indent the first line of each paragraph */
}

/* Main buttons styles */
.button {
  background-color: #FFD700; /* Gold background */
  color: #B22222; /* Text color */
  padding: 8px 16px;
  font-family: 'Garamond', 'Goudy Old Style', serif; /* Font family */
  font-size: 10px; /* Font size */
  cursor: pointer; /* Pointer cursor on hover */
  border-radius: 6px; /* Rounded corners */
  border: 2px solid #c9980b; /* Border style */
  display: inline-block; /* Inline block element */
  box-sizing: border-box; /* Box sizing */
  line-height: 1.2; /* Line height */
  margin: 0; /* Margin for spacing */
  text-decoration: none; /* Remove underline from links */
  font-weight: bold; /* Bold text */
}

/* Style links with button class */

a.button {
  padding: 8px 16px;
  background-color: #FFD700; /* same as button */
  color: #B22222; /* Text color */
  border: 2px solid #c9980b; /* Border style */
  border-radius: 6px; /* Rounded corners */
  font-family: 'Garamond', 'Goudy Old Style', serif;
  font-size: 10px;
  font-weight: bold;
  text-decoration: none; /* No underline */
  cursor: pointer; /* Pointer on hover */
  display: block; /* keep this */
  width: 100%; /* keep this */
  margin: 0; /* add this line to remove side margins */
  box-sizing: border-box; /* keep this */
}

a.button:hover {
  background-color: #e6c200; /* Darker on hover */
}


/* Button container styles: top row and empty bottom row */
.button-container {
  text-align: center;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
}

.button-row {
  display: flex; /* Arrange buttons in a row */
  justify-content: center; /* Center buttons within the row */
  width: 100%; /* Make each row take full width */
  max-width: 600px; /* Optional: limit row width for better layout */
  margin: 5px 0; /* Spacing between rows */
}

.site-footer {
  background-color: #f0f0f0; /* your footer background color */
  border-radius: 8px;
  font-size: 0.7em;
  padding: 20px; /* increased padding for better spacing */
  width: 100%; /* full width */
  box-sizing: border-box; /* include padding in width calculation */
  margin: 0 auto; /* center if needed */
}

.footer-wrapper {
  border-left: none; /* remove side borders for full width */
  border-right: none;
  padding: 15px;
  box-sizing: border-box;
  width: 100%; /* full width */
  margin: 0 auto; /* center if needed */
}

/* Make the social icons container display flex for horizontal alignment */
.footer-socials {
  display: flex;
  justify-content: center; /* Center icons horizontally */
  gap: 10px; /* Space between icons, adjust as needed */
  margin-top: 10px;
}

/* Resize the social icon images for consistency */
.footer-socials img {
  width: 24px; /* Set desired icon size */
  height: auto;
  display: block; /* Remove inline spacing */
}