:root, .night-colors, .light-colors, body.dark, body.light {
  --main: #232323;
  --selectedBg: #e5e5e5;
}

/* hide ALL original text in logo area */
#logo-area #logo { visibility: hidden; position: relative; }
#logo-area #logo::after {
  content: "zeidmahmoud";
  visibility: visible;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 32px;
  font-weight: 100;
  color: #fff;
  white-space: nowrap;
}
#logo-area #tagline { display: none; }
#logo-area { min-height: 90px; align-items: center; justify-content: center; }
#logo-area #logo::after { top: 50%; transform: translate(-50%, -50%); }