/* ========== THEME ========== */
body {
  --text-color: #222;
  --bkg-color: #fff;
  --bkg-color2: #bbb;
}
body.dark-theme {
  --text-color: #eee;
  --bkg-color: #121212;
  --bkg-color2: #303030;
}

@media (prefers-color-scheme: dark) {
  /* defaults to dark theme */
  body {
    --text-color: #eee;
    --bkg-color: #121212;
    --bkg-color2: #303030;
  }
  body.light-theme {
    --text-color: #222;
    --bkg-color: #fff;
    --bkg-color2: #bbb;
  }
}

* {
  font-family: Arial, Helvetica, sans-serif;
  background: transparent;
  color: var(--text-color);
}

body {
  background: var(--bkg-color);
}

h1, p {
  color: var(--text-color);
}

/* ========== MAIN STYLES ========== */

nav {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  padding: 0;
  justify-content: center;
  background: var(--bkg-color2);
}

nav * {
  margin: 10px;
  width: 12em;
  text-decoration: none;
  border: none;
  font-size: medium;
  text-align: center;
}

.header-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 1em;
}

.header-wrapper img {
  margin-right: 10px;
  width: 64px;
  height: 64px;

}

.header-wrapper div * {
  margin-top: 0;
  margin-bottom: 10px;
}

h1 {
  text-align: center;
}