.mode::before {
  border: 1px solid var(--light);
  border-radius: var(--radius);
  background-color: var(--mid);
  color: var(--text);
  padding: 5px 5px;
  cursor: pointer;
  width: 30px;
  user-select: none;
  content: "Light";
}

:root.light .mode::before {
  content: "Dark";
}

.theme::before {
  padding-right: 5px;
  content: "\2714\00a0 Dark";
  border-right: 1.5px solid var(--mid);
  color: var(--text);
}

:root.light .theme::before {
  content: "\2714\00a0 Light";
  color: var(--text);
}

#account {
  padding-left: 10px;
  background-image: url(/img/amna-opaque.svg);
  background-size: 100px auto;
  background-position: center;
  background-repeat: no-repeat;
}

#PFP {
  filter: none;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: var(--light);
}

#acc-edit {
  padding: 10px;
  cursor: pointer;
  border-radius: 25%;
}

#acc-edit img {
  width: 20px;
}

.flex {
  display: flex;
  align-items: center;
}

#change-btn {
  background-color: var(--light);
}

#change-btn:hover {
  background-color: var(--mid);
}

.sub-pages {
  margin-bottom: 15px;
}