:root {
  --name-length: 21ch;
  --half-name: 2ch;
  --navbar-color: olive;
  --navbar-items: antiquewhite;
}

body {
  margin: 0;
}

button {
  cursor: pointer;
}

#titlebar {
  display: flex;
  padding-top: 1ch;
  padding-bottom: 1ch;
  align-items: center;
  font-size: 4ch;
  font-weight: bold;
}

#titlebar a {
  text-decoration: none;
}

#titlebar div.title {
  padding-left: 1ch;
}

#navbar {
  display: flex;
  padding-top: 1ch;
  padding-bottom: 1ch;
  background-color: var(--navbar-color);
}

#navbar div {
  display: flex;
  align-items: center;
  padding-left: 3ch;
  font-weight: bold;
  color: var(--navbar-items);
}

#navbar div a {
  text-decoration: none;
  color: var(--navbar-items);
}

#tree {
  display: block;
  padding-top: 3ch;
}

#tree a {
  text-decoration: none;
}

.row {
  display: flex;
  align-items: center;
  justify-content: center;
}

.separator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--half-name);
}

.p-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--name-length) + var(--half-name));
  height: 5ch;
  border-left: 2px solid rgb(0, 0, 0);
  border-right: 2px solid rgb(0, 0, 0);
  border-bottom: 2px solid rgb(0, 0, 0);
}

.m-dropdown {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--name-length) + var(--half-name));
  height: 5ch;
  border-left: 2px solid rgb(0, 0, 0);
}

.p-dropdown {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--half-name);
  height: 5ch;
  border-right: 2px solid rgb(0, 0, 0);
}

.male {
  display: block;
  text-align: center;
  align-content: center;
  color: rgb(96,139,168);
  font-weight: bold;
  width: var(--name-length);
  height: 12ch;
  border: 2px solid rgb(96,139,168);
  border-radius: 5px;
  background-color: rgba(96,139,168,0.2);
}

.female {
  display: block;
  cursor: default;
  text-align: center;
  align-content: center;
  color: rgba(255,78,108,0.9);
  font-weight: bold;
  width: var(--name-length);
  height: 12ch;
  border: 2px solid rgb(255,78,108);
  border-radius: 5px;
  background-color: rgba(255,78,108,0.2);
}

.more {
  display: block;
  text-align: center;
  align-content: center;
  color: var(--navbar-items);
  font-weight: bold;
  width: 8ch;
  height: 4ch;
  border: 2px solid var(--navbar-color);
  border-radius: 5px;
  background-color: var(--navbar-color);
}