.hero1 {
  background-image: url("../images/bg1.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}

.hero2 {
  background-image: url("../images/bg-xalatath.webp");
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: left;
}

.hero3 {
  background-image: url("../images/bg-dis.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right;
}

.hero4 {
  background-image: url("../images/bg2.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}
.hero-404 {
  background-image: url("../images/bg404.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}

.hero-500 {
  background-image: url("../images/bg500.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}

iframe {
  margin: auto;
}
.text-shadow_dark {
  text-shadow: 1px 1px 1px black, 0 0 1px black, 0 1px 1px black,
    1px 0px 1px black;
}

.text-shadow_none {
  text-shadow: none;
}
.navbar {
  position: absolute;
  z-index: 2;
}

.tabs-lift
  > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not(
    [disabled]
  ),
.tabs-lift > .tab:is(input:checked) {
  background-color: rgb(120 25 0 / 0.15);
}

.tab-content {
  margin-top: 0px;
}



.class-paladin {
  color: #f58cba;
}

.class-warrior {
  color: #c79c6e;
}

.class-hunter {
  color: #abd473;
}

.class-rogue {
  color: #fff569;
}

.class-priest {
  color: #ffffff;
}

.class-deathknight {
  color: #c41f3b;
}

.class-shaman {
  color: #0070de;
}

.class-mage {
  color: #69ccf0;
}

.class-warlock {
  color: #9482c9;
}

.class-druid {
  color: #ff7d0a;
}

/* Shared responsive and keyboard-accessible layout. */
html { color-scheme: dark; }
body { min-width: 0; font-family: "Poppins", system-ui, sans-serif; }

.container { width: 100%; max-width: 80rem; margin-inline: auto; }
.hero-content { min-width: 0; max-width: 100%; }
.hero-content > *, .alert > div, .grid > *, .flex > * { min-width: 0; }
.hero-content :is(p, td, a, span) { overflow-wrap: anywhere; }
.navbar { inset-inline: 0; width: min(100% - 1rem, 80rem); margin-inline: auto; }
.navbar .dropdown-content, .navbar details > ul { z-index: 40; }
.navbar .dropdown-content { max-width: calc(100vw - 2rem); }
.footer { gap: 2rem; }
.footer nav { display: grid; }
iframe { max-width: 100%; }
img, video { max-width: 100%; }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea { max-width: 100%; }
.form-control { display: flex; flex-direction: column; gap: .35rem; }
.label { justify-content: space-between; }
.label-text, .label-text-alt { white-space: normal; color: inherit; }
.table { width: 100%; }
.table :is(th,td) { white-space: normal; }
.tabs { max-width: 100%; flex-wrap: wrap; }
.tabs .tab { white-space: normal; height: auto; min-height: 2.75rem; text-align: center; }
.tab-content { min-width: 0; }
.skip-link { position: fixed; top: .5rem; left: .5rem; transform: translateY(-200%); z-index: 10000; padding: .75rem 1rem; color: #fff; background: #312e81; border-radius: .5rem; }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 2px solid #67e8f9; outline-offset: 3px; }
@media (max-width: 767px) {
  .hero-content { padding: 1rem .5rem; }
  .hero-content .p-9, .hero-content .p-10 { padding: 1rem; }
  .hero-content .px-10 { padding-inline: 1rem; }
  .hero-content .w-\[32rem\] { width: 100%; }
  .hero-content .text-4xl { font-size: clamp(1.6rem, 7vw, 2.25rem); }
  .alert { text-align: start; align-items: start; }
  .footer { padding: 2rem 1rem; }
  .btn { white-space: normal; height: auto; min-height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.footer p a { text-decoration: underline; text-underline-offset: .2em; }

.footer p a { text-decoration: underline; text-underline-offset: .2em; }

/* Keep dialogs readable over artwork and stack long form labels on small screens. */
.modal-box { background: #0f172a; color: #e2e8f0; text-align: start; border: 1px solid #334155; }
.modal::backdrop { background: rgb(2 6 23 / .72); }
.input > input { min-width: 0; }
@media (max-width: 639px) {
  .modal-box { width: 100%; max-height: calc(100dvh - 1rem); padding: 1.25rem; }
  .modal-box label.input { display: flex; flex-direction: column; align-items: stretch; height: auto; padding: .75rem; gap: .5rem; white-space: normal; }
  .modal-box label.input > span { text-align: start; margin: 0; }
  .modal-box label.input > input { width: 100%; min-width: 0; flex: auto; }
  .modal-box .modal-action { flex-wrap: wrap; }
}

.divider { height: auto; min-height: 1rem; white-space: normal; text-align: center; overflow-wrap: anywhere; }
.divider::before, .divider::after { width: auto; min-width: .5rem; flex: 1 1 0; }
pre { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
.kbd { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

/* Keep navigation and account context usable on narrow or zoomed viewports. */
.navbar .dropdown-content { max-height: calc(100dvh - 6rem); overflow-y: auto; overscroll-behavior: contain; }
.breadcrumbs > :is(ul, ol) { flex-wrap: wrap; row-gap: .5rem; }
.breadcrumbs li { min-width: 0; max-width: 100%; white-space: normal; }
.breadcrumbs a { white-space: normal; }
.footer nav a { display: inline-flex; align-items: center; min-height: 2.75rem; }
@media (max-width: 479px) {
  .dashboard-links .card-body { padding: 1rem; }
  .dashboard-links figure { padding: .75rem; }
}