/* ===== CSS Variables ===== */
:root {
  --bg-color: #F7F0FF;
  --text-color: #020202;
  --link-color: #0000FF;
  --visited-link-color: #9900FF;
  --hover-color: #FF0000;
}

@font-face {
    font-family: 'RuneScape';
    src: url('/fonts/runescape.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Christmas Theme */
html[data-theme="christmas"] {
  --bg-color: #FFF0F0;
  --text-color: #006400;
  --link-color: #FF0000;
  --visited-link-color: #800000;
  --hover-color: #228B22;
}

/* Halloween Theme */
html[data-theme="halloween"] {
  --bg-color: #1E1E1E;
  --text-color: #FFA500;
  --link-color: #FF6600;
  --visited-link-color: #9933FF;
  --hover-color: #FF00FF;
}

/* ===== Show/hide theme-specific elements ===== */
.theme-image {
  display: none;
}

html[data-theme="christmas"] .theme-image.christmas {
  display: block;
}

html[data-theme="halloween"] .theme-image.halloween {
  display: block;
}

/* ===== Base Styles ===== */
body {
  color: var(--text-color);
  font-family: Linux Libertine, "Times New Roman", serif;
  background-color: var(--bg-color);
}

p {
  line-height: 120%;
}

/* ===== Typography and Text Alignment ===== */
.center {
  text-align: center;
}

.center:first-child {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 75%;
}

.blog,
.review {
  line-height: 120%;
  max-width: 70ch;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.blog p,
.review p {
  margin-left: 0;
  margin-right: 0;
}

.data {
  font-family: "Courier New", monospace;
}

.data p {
  line-height: 120%;
  max-width: 75%;
  text-align: auto;
  margin-left: auto;
  margin-right: auto;
}

.article-list {
  max-width: 70ch; /* or whatever fixed width you like */
  margin: 0 auto; /* centers the whole block */
  text-align: left; /* keeps text inside left-aligned */
  line-height: 120%;
  padding: 0 16px; /* some breathing room on smaller screens */
}

/* ===== Tables ===== */
table,
.center table {
  margin-left: auto;
  margin-right: auto;
}

.track-list {
  border: 2px ridge gray;
  background-color: #FFFFFF;
  border-spacing: 5px;
  width: 350px;
  table-layout: fixed;
  font-family: "Courier New", monospace;
  font-size: 14px;
}

.track-list td {
  border: 1px inset #888888;
  padding: 6px 8px;
}

.track-list td:first-child {
  text-align: left;
  width: 50%;
}

.track-list td:last-child {
  text-align: center;
  width: 10%;
}

.microblog {
  border: 3px ridge;
  background-color: #F0F0F0;
  border-spacing: 5px;
}

/* ===== Horizontal Rules ===== */
hr {
  position: relative;
  left: 50%;             /* move the hr’s left edge to the middle of container */
  width: 75vw;           /* 75% viewport width */
  margin-left: -37.5vw;  /* pull it back by half its width */
}


/* ===== Spoiler Effect ===== */
.spoiler {
  color: var(--bg-color);
  background: var(--bg-color);
}

.spoiler:hover {
  color: var(--text-color);
  background: var(--bg-color);
}

/* ===== Link Styles ===== */
a:link {
  color: var(--link-color);
  text-decoration: none;
}

a:visited {
  color: var(--visited-link-color);
  text-decoration: none;
}

a:hover {
  color: var(--hover-color);
  text-decoration: none;
}

@keyframes glowPulse {
  0% { box-shadow: 0 0 5px rgba(0, 204, 0, 0.4); }
  50% { box-shadow: 0 0 12px rgba(0, 255, 0, 0.6); }
  100% { box-shadow: 0 0 5px rgba(0, 204, 0, 0.4); }
}

/* ===== Dashboard Table & Iframe Styles ===== */
section[aria-label="Dashboard"] {
  margin: 1em auto;
  max-width: 640px;

  
}

section[aria-label="Dashboard"] table.microblog {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background-color: #222;
  border-radius: 8px;
  overflow: hidden;
  margin: 0 auto;
  animation: glowPulse 6s ease-in-out infinite;
}

section[aria-label="Dashboard"] table.microblog td {
  padding: 0;
  text-align: center;
  vertical-align: middle;
  border: none;
}

section[aria-label="Dashboard"] iframe#ouroborosStatusDash {
  max-width: 100%;
  /* Remove height:auto so it keeps its original height */
  /* height: auto; */
  height: 350px; /* keep original height */
  border: none;
  border-radius: 8px;
  box-shadow: 0 0 8px #00cc00a0;
  display: block;
  margin: 0 auto;
}