:root {
  --ng-bg: white;
  --ng-bg-text: black; 
  --ng-creme:#FEFAE0;
  --ng-bush:#CCD5AE;
  --ng-bush-light:#E9EDC9;
  --ng-vanilla:#FAEDCD;
  --ng-choco:#D4A373;
} 

/* Layout */

body {
  margin: 0;
  padding-top: 50px;
  font-family: system-ui;
  color: var(--ng-bg-text);
  background-color: var(--ng-bg);
}

.logobanner {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width:200px;
}
.center {
  margin-left: auto;
  margin-right: auto;
  width: 75%;
  padding: 5px;
  justify-content: center;
}
.ng-content {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Text content */

a {
  color:var(--ng-choco);
}

.highlight {
  color: var(--ng-choco);
}

/* Navbar */

ul.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--ng-bush);
}

ul.navbar li {
  float: left;
}

ul.navbar li a {
  display: block;
  color: var(--ng-bg-text);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul.navbar li a:hover {
  background-color: var(--ng-bush-light);
}

.active {
  background-color: var(--ng-bush-light);
}