@charset "utf-8";

/* Font */
@font-face {
  font-family: 'dynamictrooper';
  src: url('fonts/dynamictrooper-ovb7a-webfont.woff2') format('woff2'),
       url('fonts/dynamictrooper-ovb7a-webfont.woff') format('woff');
  font-weight: normal;
}

/* smooth anchor scrolling, and offset for fixed header */
html {
  scroll-behavior: smooth;
  /* If your header height is fairly constant, this alone may be enough: */
  scroll-padding-top: var(--header-offset, 220px);
}

/* one place to set/update the header height */
:root {
  --header-offset: 220px; /* tweak to match your combined fixed header(s) */
}

/* extra safety: if the target element supports scroll-margin-top */
h1[id], h2[id], h3[id], .anchor-target {
  scroll-margin-top: var(--header-offset);
}


/* Header */
header {
  position: fixed;
  z-index: 1000;
}

/* Page layout (optional tidy) */
.content {
  max-width: none;        /* prevents overflow from width:100% + margins */
  margin: 0 auto 10%;
  padding: 0 10%;
}

.mystic-logo {
  display: block;
  width: 25%;
  padding-top: 220px;
  margin: 0 auto;           /* centers the image */
}

/* === TABLES === */

/* Flex wrapper that holds both tables */
.sorcery_container {        /* match this to your HTML */
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;          /* stack on narrow screens */
}

/* Only style the sorcery tables (avoid global table styles) */
.sorcery-table {
  background: beige;
  border: 1px solid #000;
  border-collapse: collapse;
  width: 340px;
  flex: 1 1 340px; /* allows two per row, wraps on small screens */
}

.sorcery-table th,
.sorcery-table td {
  border: 1px solid #000;
  text-align: center;
  padding: 8px;
}

.sorcery-table h3 { margin: 0.25rem 0; }
.sorcery-table p  { margin: 0.25rem 0; }

/* two-up layout that wraps only when truly narrow */
.content .sorcery_container {
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 24px;
  justify-content: center;
}

/* tables */
.content .sorcery_container .sorcery-table {
  width: 100%;
  border-collapse: collapse;
  background: beige;
  border: 1px solid #000;
}
.content .sorcery_container th,
.content .sorcery_container td {
  border: 1px solid #000;
  text-align: center;
  padding: 8px;
}

.sorcery_spells {
  text-align: left;
}