:root {
  /* Basis-Vordergrundfarben (Monotone) */
  --base0: #839496;    /* Primärer Text (Body Text) */
  --base1: #93a1a1;    /* Sekundärer Text / Hervorhebungen */
  --base2: #eee8d5;    /* Starker Kontrast (Background light) */
  --base3: #fdf6e3;    /* Maximaler Kontrast */
  
  --base00: #657b83;   /* Dezentere Texte / Inhalte */
  --base01: #586e75;   /* Kommentare / Unwichtige Infos */
  --base02: #073642;    /* Hintergrund-Highlights / Zeilenhervorhebung */
  --base03: #002b36;    /* Primärer Hintergrund (dunkelster Wert) */

  /* Akzentfarben (Vordergrund für Code, Links, etc.) */
  --yellow:  #b58900;
  --orange:  #cb4b16;
  --red:     #dc322f;
  --magenta: #d33682;
  --violet:  #6c71c4;
  --blue:    #268bd2;
  --cyan:    #2aa198;
  --green:   #859900;

  /* Standard-Mapping für Solarized Dark */
  --text-main: var(--base0);
  --text-highlight: var(--base1);
  --text-muted: var(--base01);
  --link-color: var(--blue);
  --bg-main: var(--base03);       /* Standard Seitenhintergrund */
  --bg-highlight: var(--base02);  /* Für Karten, Header oder Hover-Effekte */
}

body {
  font-family: Arial, sans-serif;
  background-image: url('/static/images/wp5961273.webp');
  background-size: cover;
  
  color: var(--base0);

  display: flex;             /* Aktiviert Flexbox */
  justify-content: center;   /* Zentriert horizontal */
  align-items: center;       /* Zentriert vertikal */
  min-height: 100vh;         /* Nutzt 100% der Viewport-Höhe */
  margin: 0;
}

.container-glass {

  background-color: color-mix(in srgb, var(--base03), transparent 30%);
  backdrop-filter: blur(5px);
  
  padding: 50px;
  border-radius: 20px;

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.1);
}

h1 {
  color: var(--red);
  font-size: 70px;
}

div.crafting-table {
  background-color: var(--base00);
  border: 2px solid;
  border-color: #DBDBDB #5B5B5B #5B5B5B #DBDBDB;
  padding: 6px;
}

div.crafting-table table td {
  width: 50px;
  height: 50px;
  background-color: var(--base01);
  border: 2px solid;
  border-color: #373737 #FFF #FFF #373737;
  text-align: center;      /* Horizontale Zentrierung für Inline-Elemente (img) */
  vertical-align: middle;  /* Vertikale Zentrierung innerhalb der Tabellenzelle */
}

div.crafting-table table td.empty {
  border: none;
  background: none;
}

div.crafting-table div.arrow {
  background: url(/static/images/arrow.png) no-repeat;
  width: 32px;
  height: 26px;
  padding-top: 70px;
}