:root {
  --primary-color: #3B3B3B;
  --secondary-color: #F5F4F0;
  --accent-color1: #B784A7;
  --acent-color2: #675D50;
  --hover-color: #1F618D;
}


#logo { height: 80px; padding-right: .8em; }
.navbar { display: flex; justify-content: space-between; align-items: center; background-color: var(--secondary-color); margin: 0 auto; padding: 0 2em; }
  .desktop .navbar { padding: 0 6em; }
  .xl-desktop .navbar { padding: 0 9em; }
.navbar.sticky.is-stuck { background-color: var(--accent-color1); top: 0; }
.navbar.sticky.is-stuck .nav-links .menu-item a:hover { color: #FFF; }
.nav-links { display: flex; list-style: none; }
.nav-links .menu-item { margin-left: 20px; }
.nav-links .menu-item a { color: var(--primary-color); font-family: 'Amatic SC', cursive; }
.nav-links .menu-item a:hover { color: var(--hover-color); }
  .xl-desktop .nav-links .menu-item { font-size: 1.5rem!important; }

/* Hide Hamburger Menu on Desktop */
.menu-toggle { display: none; flex-direction: column; cursor: pointer; background: transparent; margin:0; }
.menu-toggle .material-symbols-outlined { color: var(--primary-color); font-size: 30px; }

/* Responsive Mobile Layout (Below 761px) */
@media screen and (max-width: 761px) {
  .menu-toggle { display: flex; }
  .nav-links { display: none; background-color: var(--secondary-color); position: absolute; top: 80px; left: 0; text-align: center; width: 100%; }
  .nav-links .menu-item { margin-bottom: 10px; margin-left: 0; }
  .nav-links.active { display: flex; flex-direction: column; }
  .sticky.is-stuck .nav-links.active { background-color: var(--accent-color1); }
}