/* ========== THEME ========== */
body {
  --text-color: #222;
  --bkg-color: #fff;
  --bkg-color2: #bbb;
}

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

@font-face { font-family: Avenir; src: url('/static/fonts/Avenir.ttf'); }

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

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

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

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

header, #logo-container, header nav {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
}

header, header nav {
  align-content: center;
  border: 1px solid green;
}

#logo-container {
  align-content: baseline;
  margin: 0.5em;
}

#logo-container span {
  margin: auto 0;
  font-size: 32px;
}

nav {
  display: flex;
  flex-direction: row;

  background: var(--bkg-color2);
  margin: 0 auto;
}

nav * {
  margin: auto 0.5em;
  text-decoration: none;
  font-size: medium;
  border: 1px solid red;
}

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

header img {
  margin-right: 2em;
  width: 50px;
  height: 50px;
}


h1 {
  text-align: center;
}