/* --- Variablen Erläuterung --- */
 /* --header-bg    Hintergrund des Headers */
 /* --header-fg    Textfarbe im Header */
 /* --bg           Hintergrund der Seite */
 /* --fg           Textfarbe der Seite */
 /* --btn-bg       Hintergrund der Buttons */
 /* --btn-fg       Textfarbe der Buttons */
 /* --fgb          Farbe für Ränder / Borders / Schatten */
 /* --btn-bg-hover Button-Hintergrund beim Hover */
 /* --fgb          Farbe für Ränder / Borders / Schatten */
 /* --btn-fgb      Farbe der Button-Ränder */

:root{
  --header-fg: #d8d8d8;
  --header-bg: #202020;
  --header-b: #6c18bb;

  --fg: #d8d8d8;
  --bg: #5a5a5a;

  --fg-b: #353535;
  --bg-b: #353535;

  --btn-fg: #d8d8d8;
  --btn-bg: #353535;
  --btn-bg-2: #362847;

  --btn-b: #353535;
}

body{
    color: var(--fg);
    background: var(--bg);
}

header {
    background-color: var(--header-bg);
    padding: 12px 20px;
    border: 2px solid var(--header-b);
    border-radius: 15px;
    box-shadow: 0 2px 4px var(--header-b);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: relative;
    transition: all 0.3s ease;
}

#header-logo {
    width: 60px;
    height: auto;
    object-fit: contain;
}

/* Dropdown Button */
.dropbtn {
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  border-radius: 15px;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: var(--btn-bg-2);
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--btn-bg);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border-radius: 15px;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: var(--btn-fg);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: var(--btn-bg-2);}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

#header-title {
    color: var(--header-fg);
    text-align: center;
    flex-grow: 1;
    margin: 0;
    font-size: 1.8em;
}

#theme-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-b);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    gap: 8px;
    transition: 0.15s;
    appearance: none;
}

#theme-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
}

main{
    color: var(--fg);
}

footer{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 15px;
    text-align: center;
}