:root {
    --base-color: #e4e4e4;
    --primary-color: #b8b8b8;
    --secondary-color: #a9a9a9;
    --text-color: #222222;
  --topbar-height: 60px;
}
.darkmode {
    --base-color: #303030;
    --primary-color: #3b3b3b;
    --secondary-color: #5a5a5a;
    --text-color: #e4e4e4;
}
#topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-height);
  background: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  z-index: 999;
}

#topbar a {
  color: white;
  margin-left: 10px;
  text-decoration: none;
}

#footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px
}

body.darkmode {
  background: var(--base-color);
  color: var(--text-color);
  padding-top: var(--topbar-height);
}

body {
  background: var(--base-color);
  color: var(--text-color);
  padding-top: var(--topbar-height);
}

.hidden {
  display: none;
}